css盒子模型

可认为每个html标签都是一个方块 这个方块里面又包含着几个小方块 然后一层一层包裹着 ，这就是css盒子模型

css盒子模型分为两类

1. IE盒子模型

2. W3c标准盒模型

1.w3c标准盒模型： 属性width和height只包含内容content 不包含border和padding

2.IE盒模型： 属性width和height包含内容content 指的是content+border+padding

需要注意的是在IE8以上的浏览器中 盒子模型可以由box-sizing来控制 它的默认值为content-box（标准盒模型） 如果想使用IE盒模型 需要将box-sizing设置为 border-box 所以盒模型是可以自由切换的 即使用box-sizing来切换

标准盒模型：

1. width ：内容的宽度 2. height ：内容的高度：

IE盒模型

1.width=border+padding+内容的宽度 2.height=border+padding+内容的高度

在 CSS的标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

下图说明了盒子模型：

不同部分的说明：

• Margin（外边距）：清除边框外的区域，外边距是透明的。
• Border（边框）：围绕在内边距和内容的外边框
• Padding（内边距）：清除内容周围的区域，内边距是透明的
• Content（内容）：盒子的内容 显示文本和图像

举例：

在上面的盒模型中，如果是标准和模型，那么width=300 height=400

如果是IE盒模型 则width=300+20×2＋5×2 ; height=400+20×2＋5×2

所以说，盒子的大小为content+padding+border即内容的(width)+内边距的再加上边框，而不加上margin。很多时候，我们会错误地把margin算入 那是不可取的

css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定，把margin算进去的那是盒子占据的位置，而不是盒子的大小