网页布局之盒子模型

一、 盒子模型 Box-Model

在HTML中一切的元素都可以看做是盒子，而网页的布局就好像堆积木，如何将这些积木堆出自己想要的布局，那就需要对盒子有一定的了解。

image.png

• 从上图我们可以知道，一个盒子基本包括，外边距margin（深黄色），边框 border（黄色），内边距 padding（绿色）， 实际内容 content（蓝色）

margin 一般用来处理盒子与盒子之间的间距，且margin的值是可以取负值的，那么我们尝试将一个盒子比做一个人，margin就相当于人与人之间的距离，border就相当于人的皮肤，padding为脂肪，content为内脏。

二、 盒子模型的布局稳定性

上面说到，将盒子比作人，margin 用来处理人和人之间的距离，border，padding，content属于人自身比较好控制的东西，不是吗？因此，在布局时候

• 优先使用内部的width，height，控制内容；
• 其次使用padding，padding是需要计算大小的；
• 最后才是margin，由于margin是会产生边距重合问题， 就好像人和人之间，你想离人家远点，人家却想靠近你;

三、 标准盒模型和 ie的怪异盒模型

计算公式

• 标准盒模型
  盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。

• 怪异盒模型
  盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。

指定盒子模型种类

使用 css中的box-sizing属性设置盒子的模型种类