前言
2019.9.20更新
言简意赅，查漏补缺。
链接：https://www.nowcoder.com/intelligentTest
来源：牛客网（牛客网 > 题库 > 专项练习）
CSS-盒子模型：IE&标准
IE盒模型主要用在IE5.5及更早的版本，现在普遍浏览器主要使用标准盒模型。
下面展示两张图以展示区别：
两者的区别主要在于content的不同：
- IE盒子宽度 = margin + width , width = border + padding + content ;
- 标准盒子宽度 = margin + border + padding + width , width = content ;
这里我们来关注CSS3的一个属性：box-sizing，该属性与上述两种盒子模型息息相关。
根据W3school的定义：box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
语法：box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
即：
- 当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式。
- 当使用border-box时，页面将采用怪异模式解析计算，怪异模式也称为IE模式。
- 当使用inherit时：页面将从父元素继承box-sizing的值。
例子：注意查看盒子宽度的变化。<!DOCTYPE html>
<html>
<head>
<style>
.container {width: 30em;border: 1em solid;}
.box {box-sizing: border-box;width: 50%;
border: 1em solid red;padding: 1em;float: left;}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
</div>
</body>
</html>
