盒模型
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…簡寫屬性可以簡單寫完,跟上面那樣
總結
- 上一篇: 修改注册表
- 下一篇: 解决Win10 /Win11 Fastb