前端面试一次弄懂box-sizing

最新推荐文章于 2024-08-11 20:00:00 发布

weixin_33720956

最新推荐文章于 2024-08-11 20:00:00 发布

阅读量468

点赞数

文章标签：面试前端 ViewUI

原文链接：https://juejin.im/post/5cdcddede51d453a572aa2fe

版权

.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    background: red;
    border: 20px solid black;
    box-sizing: border-box;
}
.box1 {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    background: red;
    border: 20px solid black;
    box-sizing: content-box;
}
<div class="box"></div>
<div class="box1"></div>
复制代码

来看下什么是box-sizing值： box-sizing: content-box|border-box|inherit; content-box在宽度和高度之外绘制元素的内边距和边框。 border-box从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit规定应从父元素继承 box-sizing 属性的值。所以， box.width = 200 - 20*2 - 20*2 - 20*2 (80px) box1.width = 200 (200px)