盒模型的类型及其宽高的计算

盒模型的类型及其宽高的计算

css中的box-sizing可选为content-box或者border-box

注意：border-box不包含margin

• content-box

  • 默认值，标准盒子模型。

  • width与height只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

  • 注意: 内边距、边框和外边距都在这个盒子的外部。

  • 比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

  • 计算公式：

    width=内容的高度
    height=内容的高度
    宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。
    盒子的实际大小=边框+内边距+content
    盒子占据的空间=外边距+边框+内边距+content
    

• border-box

  • width和height属性包括内容，内边距和边框，但不包括外边距。也叫IE盒模型

  • 注意，padding和border将在盒子内。

  • 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。

  • 内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

  • 计算公式：

    width = border + padding + 内容的宽度
    height = border + padding + 内容的高度
    盒子的实际大小=content
    盒子占据的空间=外边距+content
    

对计算公式的说明：难点在于理解计算公式中的width/height的含义，width/height的含义为你在css代码中设定的值。还需要区分盒子的实际大小和盒子占据的空间两个不同的概念，着重理解margin在两种盒模型中都是“局外人”，都得“另算帐”。

**注意：**在计算公式中的content是width和height所围绕的区域。

**例题：**一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px

假如用content-box，那么

盒子的实际大小为：

宽 1*2 + 10*2 + 200 = 222px高 1*2 + 10*2 + 50 = 72px；

盒子需要占据的位置为：

宽 222 + 20*2 = 262px高 70 + 20*2 = 112px

假如用border-box，那么

盒子的实际大小为：

宽 200px、高 50px

盒子需要占据的位置为：

宽 200 + 20*2 = 240px、高 50 + 20*2 = 70px