css盒模型(标准盒模型 怪异盒模型)

css盒模型(标准盒模型 怪异盒模型)

CSS 盒子模型(Box Model)
每个HTML元素都可以看作是一个盒子，父元素和子元素的关系就行大盒子里放了个小盒子，兄弟元素就像在大盒子平放了两个小盒子。盒模型包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型）

用两个简单的例子分别介绍下这两个盒子模型：

标准盒模型：


这里外层盒子的width和height都是：10 + 150 + 10 = 170px。

怪异盒模型:


这里外层盒子的width和height都是：10 + 130+ 10 = 150px。

这里得出一个结论：
标准盒模型，一个块的总宽度 = width（content的宽度） + margin（左右）+ padding（左右）+ border（左右）

怪异盒模型，一个块的总宽度 = width（content + border + padding）+ margin(左右)

据上面实验也看到了,如果不想因为改变padding的时候盒子的大小也会跟着变化的话就可以使用怪异盒模型,而如果想让盒子的大小被padding撑开的话就可以使用标准盒模型