css常見問題（2）之padding是否佔取高度

2021-10-08 03:35:52 字數 507 閱讀 5046

一般來說，元素的實際高度=元素高度height+上下margin外邊距+上下padding內邊距+上下border邊框寬度
在這裡第乙個塊所占取的高度為100+40+40+2共182px（有乙個問題，如果藍色方塊也有margin，則兩個方塊的margin會重合中間的距離會取其中最大值。相鄰兩個方塊則不會，也可以使用浮動，絕對定位解決重合。）。而方塊實際高度為100+40+2共142px，這裡背景色只會計算加入內邊距，外邊距只佔位置而不會改變背景色。

當我們使用了box-sizing: border-box之後

方塊所占取的高度為58+2+40+40共140px，實際高度為58+40+2共100px;

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...