box-sizing与盒模型

最后更新于:2018-05-13 22:43:51

盒模型介绍

盒模型分为两种,标准盒模型和怪异盒模型,大多数浏览器支持的是标准盒模型,老版的IE浏览器支持一种怪异盒模型。

    <style>
        .box {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            border: 5px solid yellow;
        }
    </style>
<body>
    <div class="box"></div>
</body>

以上代码定义了一个盒子,我们给的宽度/高度是100px,padding是10px,margin是10px,边框是5px。

  • 在标准盒模型的解释如下: enter image description here
  • 在怪异盒模型中解释如下: enter image description here

box-sizing

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

定义和用法

属性 详细
默认值 content-box
继承性 no
版本 css3
语法 box-sizing: content-box/ border-box/ inherit

兼容性

Desktop

enter image description here

Mobile

enter image description here

属性对应值解释

  • content-box为默认值,解释为标准盒模型.
<style>
        .box {
            box-sizing: content-box;
            ...
        }
</style>
  • border-box解释为怪异盒模型
<style>
        .box {
           box-sizing: border-box;
           ...
        }
</style>
  • inherit继承父级box-sizing属性值。
<style>
        .box {
           box-sizing: inherit;
           ...
        }
</style>