Css-IE盒模型和标准盒模型

注意

本博文仅供学术研究和交流参考，严禁将其用于商业用途。如因违规使用产生的任何法律问题，使用者需自行负责。

• 最近无意刷咯一题。。算出IE盒模型所占的高度。。。果然。。。不知如何算。。。因为谁特么去关心IE。。。但是。。。基于是自已的错题情况下。。还是弄清楚为好。。

• 参考咯很多文章最后得出结论

标准盒模型

.box {
    width: 200px;
    height: 180px;
    border: 5px solid #666;
    margin: 10px;
    padding: 10px;
}

• 那么，这个盒子需要占据的尺寸为，

宽度 = margin.left + border.left + padding.left + content.width
+ padding.right + border.right + margin.right
  = 10 + 5 + 10 + 200 + 10 + 5 + 10
  = 300
  高度 = margin.top + border.top + padding.top + content.height
+ padding.bottom + border.bottom + margin.bottom
  = 10 + 5 + 10 + 180 + 10 + 5 + 10
  = 280
  而盒子的实际大小为，
  宽度 = border.left + padding.left + content.width
+ padding.right + border.right
  = 5 + 10 + 200 + 10 + 5
  = 280
  高度 = border.top + padding.top + content.height
+ padding.bottom + border.bottom
  = 5 + 10 + 180 + 10 + 5
  = 260

简单的概括就是，盒子在页面占据的大小包括了margin，border， padding以及content。而盒子的实际大小（这里的实际大小，通过调试工具inspect可以看出来） 包括border，padding以及内容区域content，但是不包括margin。 另一点需要说明的是，我们通过JavaScript代码获取某一个元素的大小时， 所得到的width和height其实是盒子模型中的content的大小。

IE盒模型

.box {
    width: 200px;
    height: 180;
    border: 5px solid #666
    margin: 10px
    padding: 10px;
}

• 那么，这个盒子需要占据的尺寸为，

宽度 = margin.left + content.width + margin.right
= 10 + 200 + 10
= 220
高度 = margin.top + content.height + margin.bottom
= 10 + 180 + 10
= 200
而盒子的实际大小为，
宽度 = content.width
= 200
高度 = content.height
= 180

结论

• 标准盒模型：
• 盒子面页面占据尺寸为：

width = margin.left + border.left + padding.left + content.width
 + padding.right + border.right + margin.right
(margin border padding content四个)   

height = margin.top + border.top + padding.top + content.height
+ padding.bottom + border.bottom + margin.bottom
(margin border padding content四个)

• 而盒子的实际大小：

width = border.left + padding.left + content.width
 + padding.right + border.right
(border padding content三个)

height = border.top + padding.top + content.height 
+ padding.bottom + border.bottom
(border padding content三个)

• IE盒模型：
• 盒子面页面占据尺寸为：

width = margin.left + content.width + margin.right
(margin content两个)

height = margin.top + content.height + margin.bottom
(margin content两个)

• 而盒子的实际大小：

width = content.width (content一个)
height = content.width (content一个)

• box-sizing属性允许你以特定的方式定义匹配某个区域的特定元素。
• 其语法如下，

box-sizing: content-box | border-box | inherit

content-box :这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 此值为其默认值，其让元素维持W3C的标准盒模型

border-box: 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 此值让元素维持IE传统的Box Model（IE6以下版本）

inherit: 规定应从父元素继承 box-sizing 属性的值

参考链接

1. w3cschool参考

2. 参考链接一

3. 参考链接二

4. 参考链接三

5. 参考链接四

---

分割线

---

相关信息

以上就是我关于 Css-IE盒模型和标准盒模型 知识点的整理与总结的全部内容，希望对你有帮助。。。。。。。