box-sizing与盒模型

最新推荐文章于 2024-03-13 16:41:19 发布

原创最新推荐文章于 2024-03-13 16:41:19 发布 · 438 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #box-sizing

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了标准盒模型与IE盒模型的区别，通过实例展示了box-sizing属性如何解决宽度计算问题，避免滚动条的出现。文章通过不同CSS样式设置，对比了content-box与border-box在实际布局中的应用效果。

标准盒模型：width+padding+border+margin
ie盒模型：width（contentWidth+padding+border）+margin

box-sizing属性可以指定盒子模型种类

box-sizing兼容性：
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。

box-sizing语法：
box-sizing: content-box|border-box|inherit;

box-sizing 默认值：content-box （对应CSS2.1规范中标准的盒子模型计算方式）
inherit :指定box-sizing属性的值，从父元素继承
在这里插入图片描述

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title></title>
    <style>
        *{padding: 0;margin: 0}
        div{width: 100%;background: green;margin-top: 40px;color: #fff;text-align: center}

        .div1{border: 20px solid #000;}
        .div2{border: 20px solid #000;;box-sizing: border-box}

        .div3{border: 20px solid #000;padding-left: 100px}
        .div4{border: 20px solid #000;padding-left: 100px;box-sizing: border-box}

        .div5{height: 60px;}
        .div6{border: 20px solid #000;height: 60px;padding-left: 100px;box-sizing: border-box}

        .span{height: 50px}
    </style>
</head>
<body>
<div class="div1">
    一个width 100%+boder的div1，结果出现拖动框
</div>
 
<div class="div2">
    一个width 100%+boder的div2，不过用了box-sizing: border-box，结果没有出现拖动框,
</div>

<div class="div3">
    一个width 100%+boder+padding的div3，结果出现拖动框
</div>

<div class="div4">
    一个width 100%+boder+padding的div4，不过用了box-sizing: border-box，结果没有出现拖动框,
</div>

<div class="div5">
     一个width 100%+高60px的div5
</div>

<div class="div6">
    一个width 100%+高60px的div6
</div>
</body>
</html>