1、盒子模型作用：
盒子模型就是一個盒子，封裝周圍的html元素。允許我們在其他元素和周圍元素邊框的空間放置元素。
2、組成：
外邊距（margin）：相鄰的兩個盒子margin，會發生折疊，可為負數
邊框（border）：
內邊距（padding）：
實際內容（content）：百分比相對于父容器的content box 的寬度，只有包含塊的高度不依賴該元素時，百分比寬度才生效

*IE盒模型和W3C盒模型在計算總寬度中存在一些差異

W3C盒模型：width=content.width；heigth=content.heigth IE盒模型：width =content.width+border +margin；height=content.height+margin+border

CSS3引入box-sizing屬性，可允許改變默認的css盒模型對元素寬高的計算方式

content-box: 瀏覽器定義元素的屏幕寬度和高度的默認方法, 會將border寬度和padding厚度與width和height屬性值相加,來確定該標簽的屏幕高度和寬度 padding-box-: 當你在一個樣式中設置了width和hight屬性時,它應該包含padding作為該值的一部分 border-box: 包含了border寬度和padding厚度,將它們作為width和height的一部分.

總結

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

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