box-sizing:border-box 不是本來就是設(shè)置帶邊框的框嗎 這個跟設(shè)置border 有什么關(guān)系？
box-sizing:border-box
不是本來就是設(shè)置帶邊框的框嗎 這個跟設(shè)置border 有什么關(guān)系？
qq_夢紫菱_0
2018-08-28
4 回答
舉報
0/150
提交
取消
2018-08-28
box-sizing?屬性用于更改用于計算元素寬度和高度的默認(rèn)的 CSS盒子模型。content-box默認(rèn)值，標(biāo)準(zhǔn)盒子模型。 width?與 height?只包括內(nèi)容的寬和高， 不包括邊框（border），內(nèi)邊距（padding），外邊距（margin）。注意: 內(nèi)邊距, 邊框?& 外邊距?都在這個盒子的外部。?比如. 如果?.box {width: 350px}; 而且?{border: 10px solid black;} 那么在瀏覽器中的渲染的實際寬度將是370px;
尺寸計算公式：width = 內(nèi)容的寬度，height = 內(nèi)容的高度。寬度和高度都不包含內(nèi)容的邊框（border）和內(nèi)邊距（padding）。
border-box?width?和 height?屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。這是當(dāng)文檔處于 Quirks模式 時Internet Explorer使用的盒模型。注意，填充和邊框?qū)⒃诤凶觾?nèi) , 例如,?
.box {width: 350px; border: 10px solid black;}?導(dǎo)致在瀏覽器中呈現(xiàn)的寬度為350px的盒子。內(nèi)容框不能為負(fù)，并且被分配到0，使得不可能使用border-box使元素消失。這里的維度計算為：
width = border + padding + 內(nèi)容的? width，
height = border + padding + 內(nèi)容的 height。
詳情戳這里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
2018-08-28
box-sizing: border-box和border不是一個概念只是字面比較類似
border-box是指將邊框border和內(nèi)邊距padding在現(xiàn)有元素的寬度和高度內(nèi)設(shè)置舉個例子
比如div的寬度和高度都是100pxpadding是10pxborder是2px
.box?{ ??width:?px2rem(100); ??height:?px2rem(100); ??padding:?px2rem(10); ??border:?px2rem(2)?solid?#ccc; ??box-sizing:?content-box; }.box?{ ??width:?px2rem(100); ??height:?px2rem(100); ??padding:?px2rem(10); ??border:?px2rem(2)?solid?#ccc; ??box-sizing:?border-box; }2019-08-27
就這最佳回答?惡心死我遼
2018-08-29
噢噢噢噢哦我懂了謝謝老師！因為以前沒怎么用過box-sizing-_-||? 您這樣一講我都明白了！