理解box-sizing属性

最新推荐文章于 2023-09-18 17:33:17 发布

weixin_34289744

最新推荐文章于 2023-09-18 17:33:17 发布

阅读量588

点赞数 1

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

版权

box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：

box-sizing: content-box|border-box|inherit:
复制代码

content-box 使得元素的宽高即为内容区的宽高

<style>
    * {
        padding:0;
        margin:0
    }
    #app{
        height: 100px;
        width: 200px;
        background: green;
        margin:10px;
        padding:5px;
        box-sizing: content-box
        border:2px solid red;
    }
    .box{
        display: inline-block;
        border:1px solid red;
        width:50%
       
    }
</style>
<body>
   <div id="app">
       <span class="box">左</span>
       <span class="box">右</span>
   </div> 
</body>
复制代码

上图红色箭头即宽200px,不难理解，想象你有个div 现在你要定义它的宽为200px,此时头脑中想象这个div,就是纯粹的200px，无任何修饰。此时你觉得太单调了，想要添加一个宽2px的边框，那么在设置成content-box规则下，你需要往这个div外边围绕一个边框，此时你这个div实际上要比原来div要稍微大。

border-box 与上面相反，如果你需要在一个宽200px的div上围绕2px的边框，那么你的边框是在这个div容器内壁围绕，即content+padding+border=200px

可见你的内容区实际上偏小了一点。

inherit 指定box-sizing属性的值，应该从父元素继承

weixin_34289744

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
理解box-sizing属性

box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：box-sizing: content-box|border-box|inherit:复制代码content-box 使得元素的宽高即为内容区的宽高&lt;style&gt; * { padding:0; margin:0 ...
复制链接

扫一扫