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

盒子類型

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

行盒在頁面中不換行

display默認值為incline

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

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

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

盒子的組成部分

從內(nèi)到外分別是

1.內(nèi)容 content

width，height，設(shè)置的是盒子內(nèi)容的寬高

內(nèi)容部分通常叫做整個盒子的 內(nèi)容盒 content-box

可以想象為一臺手機

2.填充（內(nèi)邊距） padding

盒子邊框到盒子內(nèi)容的距離

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

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

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

填充區(qū)+內(nèi)容區(qū) = 填充盒

3.邊框 border

邊框=邊框樣式+邊框?qū)挾?#43;邊框顏色
????????border-style
??????????????????????border-width
???????????????????????????????????????border-color

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

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

可以想象成泡泡紙的盒子

邊框+填充區(qū)+內(nèi)容區(qū)=邊框盒 border-box

4.外邊距 margin

邊框到其他盒子的距離

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。