css的盒子模型有2種，分別為：1、W3c標準的盒子模型（標準盒子模型），width和height指的是內容區域的寬度和高度；2、IE標準的盒子模型（怪異盒模型），width和height指的是內容區域、邊框、內邊距總的寬度和高度。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
盒子模型
CSS盒子模型就是在網頁設計中常用到的CSS技術所使用的一種思考模型。盒子模型（Box Modle）可以用來對元素進行佈局，包括內邊距，邊框，外邊距，和實際內容這幾個部分。
盒子中的區域
一個盒子中主要的屬性就5個：width、height、padding、border、margin。如下：
- width和height：內容的寬度、高度（不是盒子的寬度、高度）。
- padding：內邊距。
- border：邊框。
- margin：外邊距。
盒子模型的示意圖：
程式碼示範：
上面這個盒子，width:200px; height:200px; 但是真實佔有的寬高是302*302。這是因為還要加上padding、border。
注意：寬度和真實佔有寬度，不是一個概念！ 來看下面這例子。
標準盒模型與IE盒模型
盒子模型分為兩種：
第一種是W3c標準的盒子模型（標準盒模型）
第二種IE標準的盒子模型（怪異盒子模型）
我們目前所學習的知識中，以標準盒子模型為準。
標準盒子模型：
IE盒子模型：
- width和height：
- 內容的寬度、高度（不是盒子的寬度、高度）。 padding：內邊距。
- border：邊框。
- margin：外邊距。
- #在
標準盒子模型中，width 和height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但會增加元素框的總尺寸。
IE盒子模型中，width 和height 指的是內容區域border padding #的寬度和高度。
標籤也有margin
標籤有必要強調一下。很多人以為標籤佔據的是整個頁面的全部區域，其實是錯的，正確的理解是這樣的：整個網頁最大的盒子是，即瀏覽器。而是的兒子。瀏覽器給預設的margin大小是8個像素，此時佔據了整個頁面的一大部分區域，而不是全部區域。來看一段程式碼。 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狭路相逢</div>
</body>
</html>上面的程式碼中，我們為div標籤設定了邊距等資訊。開啟google瀏覽器，按住F12，顯示效果如下：
.box1{
width: 100px;
height: 100px;
padding: 100px;
border: 1px solid red;
}
盒子2：
.box2{
width: 250px;
height: 250px;
padding: 25px;
border: 1px solid red;
}
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
上面这两个盒子的盒模型图如下：
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
认识padding
padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。
效果如下：
padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性的写法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
padding:30px 20px 40px 100px;
如果写了四个值，则顺序为：上、右、下、左。
如果只写了三个值，则顺序为：上、右、下。??和右一样。
如果只写了两个值，比如说：
padding: 30px 40px;
则顺序等价于：30px 40px 30px 40px;
要懂得，用小属性层叠大属性。比如：
padding: 20px; padding-left: 30px;
上面的padding对应盒子模型为：
下面的写法：
padding-left: 30px; padding: 20px;
第一行的小属性无效，因为被第二行的大属性层叠掉了。
（学习视频分享：css视频教程）
以上是css的盒子模型有幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！
重新創建Codepen Gutenberg嵌入塊以進行理智。Apr 09, 2025 am 11:43 AM了解如何通過Chris Coyier實施WordPress的Gutenberg編輯器來創建一個自定義Codepen塊，並為Sanity Studio提供預覽。
我們如何創建一個在SVG中生成格子呢模式的靜態站點Apr 09, 2025 am 11:29 AM格子呢是一塊圖案布，通常與蘇格蘭有關，尤其是他們時尚的蘇格蘭語。在Tartanify.com上，我們收集了5,000多個格子呢
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
禪工作室 13.0.1
強大的PHP整合開發環境
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
SublimeText3漢化版
中文版，非常好用
