1. 前言

盒子模型，英文即box model。無論是div、span、還是a都是盒子。

但是，圖片、表單元素一律看作是文本，它們并不是盒子。這個很好理解，比如說，一張圖片里并不能放東西，它自己就是自己的內容。

2. 盒子中的區域

一個盒子中主要的屬性就5個：width、height、padding、border、margin。如下：

• width和height：內容的寬度、高度（不是盒子的寬度、高度）。
• padding：內邊距。
• border：邊框。
• margin：外邊距。

盒子模型的示意圖：

?

標準盒子模型：

上圖顯示：

• 在 CSS 盒子模型 (Box Model) 規定了元素處理元素的幾種方式：?內容、內邊距、邊框、外邊距。
• 在 CSS的標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

真實占有寬度 = 左border + 左padding + width + 右padding + 右border

如果想保持一個盒子的真實占有寬度不變，那么加width的時候就要減padding。加padding的時候就要減width。因為盒子變胖了是災難性的，這會把別的盒子擠下去。

3. 認識padding

3.1 padding區域也有顏色

　　padding就是內邊距。padding的區域有背景顏色，css2.1前提下，并且背景顏色一定和內容區域的相同。也就是說，background-color將填充所有boder以內的區域。

3.2 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;

4. 認識border

border就是邊框。邊框有三個要素：像素（粗細）、線型、顏色。顏色如果不寫，默認是黑色。另外兩個屬性不寫，要命了，顯示不出來邊框。

4.1 border-style

border的所有的線型如下：（我們可以通過查看CSS參考手冊得到）

?

4.2 border拆分

border是一個大綜合屬性。比如說：

border:1px solid red;

就是把4個邊框，都設置為1px寬度、線型實線、red顏色。

border屬性是能夠被拆開的，有兩大種拆開的方式：

• （1）按三要素拆開：border-width、border-style、border-color。（一個border屬性是由三個小屬性綜合而成的）

• （2）按方向拆開：border-top、border-right、border-bottom、border-left。

現在我們明白了：一個border屬性，是由三個小屬性綜合而成的。如果某一個小屬性后面是空格隔開的多個值，那么就是上右下左的順序。舉例如下：

border-width:10px 20px; border-style:solid dashed dotted; border-color:red green blue yellow;

(1）按三要素拆：

border-width:10px; //邊框寬度 border-style:solid; //線型 border-color:red; //顏色。

等價于：

border:10px solid red;

(2)按方向來拆：

border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-left:10px solid red;

等價于：

border:10px solid red;

?

轉自：https://www.cnblogs.com/smyhvae/p/7256371.html

轉載于:https://www.cnblogs.com/sunfie/p/8407445.html

總結

以上是生活随笔為你收集整理的CSS学习之盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。