盒子模型

什麼是邊框？--> 邊框就是環繞在標籤寬度和高度周圍的線條。

1.邊框屬性的格式：border：邊框的寬度 樣式 顏色；
2.連寫的格式：
2.1）按照方向：border-top（right、left、bottom）: ；
2.2）按照屬性同時設置四條邊：border-width（style、color）：; ----> 取值規律是按照上右下左來賦值的。
3.注意點：
3.1）連寫的格式顏色屬性能夠省略，省略以後默認就是黑色。
3.2）連寫格式中樣式不能省略，省略以後就看不到邊框了。
3.3）連寫格式中寬度能夠省略，省略以後仍是能夠看到邊框。
4.特殊點：
4.1）border-bottom：none；表明不須要邊框。
4.2）同一選擇器後面設置的屬性會覆蓋前面的。

內邊距（padding）

1.內邊距就是邊框和內容之間的距離。
2.注意點：
2.1）給標籤設置內邊距以後，標籤佔有的寬度和高度會發生變化。
2.2）給標籤設置內邊距以後，內邊距也會有背景顏色。

外邊距（margin）

1.外邊距就是標籤和標籤之間的距離。
2.注意點：
2.1）給標籤設置外邊距以後，外邊距那一部分是沒有背景顏色的。
2.2）在默認佈局的垂直方向上，默認狀況下外邊距是不會疊加的，會出現合併現象，誰的外邊距比較大就聽誰的。

盒子寬高練習

1.規律：
1.1）增長了padding以後元素的寬高也會隨之增大。
2.2）若是增長了padding以後還想保持元素的寬高不變，那麼就必須縮小內容的寬高大小，減去padding的大小。
2.3）若是增長了border以後還想保持元素的寬高不變，那麼就必須縮小內容的寬高大小，減去border的大小。
3.

4.
4.1）內容的寬度和高度：就是經過標籤的width/height屬性設置的寬度和高度。
4.2）元素的寬度和高度：
寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框
高度 同理可得
4.3）元素空間的寬度和高度：
寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
高度 同理可得
5.在CSS3中新增了一個box-sizing屬性，這個屬性能夠保證咱們給盒子新增padding和border以後，盒子元素的寬度和高度不變。它的原理就是上方所提到了，內部自動偷偷的把對應的內容寬高減少了。
5.1）取值：
5.1.1）content-box：元素的寬高 = 邊框 + 內邊框 + 內容寬高
5.1.2）border-box：元素的寬高 = width/height屬性
6.例題：
方法1

方法2

 

 

 

 

來自爲知筆記(Wiz)