box：盒子，每個元素在頁面中都會生成一個矩形區域

盒子類型

1.行盒，display等于incline的元素

行盒在頁面中不換行

display默認值為incline

2.塊盒，display等于block的元素

塊盒獨占一行
瀏覽器默認樣式表設置的塊盒：容器元素，h1~h6，p

常見的行盒：span，a，img，video，audio

盒子的組成部分

從內到外分別是

1.內容 content

width，height，設置的是盒子內容的寬高

內容部分通常叫做整個盒子的 內容盒 content-box

可以想象為一臺手機

2.填充（內邊距） padding

盒子邊框到盒子內容的距離

padding-left padding-right padding-top padding-bottom

可以簡寫為padding屬性，依次填入上右下左的距離

可以想象為包裹著手機的泡泡紙

填充區+內容區 = 填充盒

3.邊框 border

邊框=邊框樣式+邊框寬度+邊框顏色
????????border-style
??????????????????????border-width
???????????????????????????????????????border-color

速寫（簡寫）屬性：border-width最終展開上下左右border-top-width…等等

可以簡寫修改這三種屬性：border：寬度 樣式 顏色;

可以想象成泡泡紙的盒子

邊框+填充區+內容區=邊框盒 border-box

4.外邊距 margin

邊框到其他盒子的距離

margin-left…簡寫屬性可以簡單寫完，跟上面那樣

總結

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

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