亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

box-sizing:border-box 不是本來就是設置帶邊框的框嗎 這個跟設置border 有什么關系？

box-sizing:border-box

不是本來就是設置帶邊框的框嗎 這個跟設置border 有什么關系？

正在回答

4 回答

box-sizing?屬性用于更改用于計算元素寬度和高度的默認的 CSS盒子模型。

  • content-box

  • 默認值，標準盒子模型。 width?與 height?只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距, 邊框?& 外邊距?都在這個盒子的外部。?比如. 如果?.box {width: 350px}; 而且?{border: 10px solid black;} 那么在瀏覽器中的渲染的實際寬度將是370px;

    尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。

  • border-box

  • ?width?和 height?屬性包括內容，內邊距和邊框，但不包括外邊距。這是當文檔處于 Quirks模式 時Internet Explorer使用的盒模型。注意，填充和邊框將在盒子內 , 例如,?.box {width: 350px; border: 10px solid black;}?導致在瀏覽器中呈現的寬度為350px的盒子。內容框不能為負，并且被分配到0，使得不可能使用border-box使元素消失。

    這里的維度計算為：

  • width = border + padding + 內容的? width，

  • height = border + padding + 內容的 height。

詳情戳這里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

0 回復 有任何疑惑可以回復我~

box-sizing: border-box和border不是一個概念只是字面比較類似

border-box是指將邊框border和內邊距padding在現有元素的寬度和高度內設置舉個例子

比如div的寬度和高度都是100pxpadding是10pxborder是2px

如果設置box-sizing為默認值即為content-box那么div的實際寬高將為124px*124px100+10*2+2*2
<div?class="box">
</div>
.box?{
??width:?px2rem(100);
??height:?px2rem(100);
??padding:?px2rem(10);
??border:?px2rem(2)?solid?#ccc;
??box-sizing:?content-box;
}

https://img1.sycdn.imooc.com//5b851e9b0001505004700436.jpg

如果設置box-sizing為border-box那么div的實際寬高將為100px*100px
.box?{
??width:?px2rem(100);
??height:?px2rem(100);
??padding:?px2rem(10);
??border:?px2rem(2)?solid?#ccc;
??box-sizing:?border-box;
}

https://img1.sycdn.imooc.com//5b851f0d0001db4604020350.jpg

0 回復 有任何疑惑可以回復我~

就這最佳回答?惡心死我遼

0 回復 有任何疑惑可以回復我~

噢噢噢噢哦我懂了謝謝老師！因為以前沒怎么用過box-sizing-_-||? 您這樣一講我都明白了！

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

box-sizing:border-box 不是本來就是設置帶邊框的框嗎 這個跟設置border 有什么關系？

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號