盒子模型浅析

在css标准中，所有标签都有一个规则的矩形盒子——这就是css中的盒子模型，它主要用来给网页布局，活着处理网页制作中比较麻烦的距离问题

    其中有内外边距之分，内边距用padding，外边距用margin，两者区别和联系如下：

1、内边距和外边据都是在原有的盒子模型基础上增加

2、内外边距用法相同

3、如果用firebug测试，可以看到其中浅蓝色的范围表示的是实体范围，他的值是原盒子的高度和宽度的范围，与他比较接近的颜色紫色表示内边距的范围，颜色反差很大的黄色则表示外边距，利用firebug可以很清楚的观察到盒子的组成部分

4、盒子共有两种尺寸，一种为总尺寸，第二种为实体尺寸算法如下：

    总尺寸=盒子尺寸+内边距尺寸+边框线的尺寸

    总尺寸=盒子尺寸+内边距尺寸+边框线的尺寸+外边据的尺寸

其中注意的是内边距也算是实体的范围，所以在计算标签的高和宽的时候要减去padding的值。

转载于:https://my.oschina.net/u/1865741/blog/300138