第3章 深入理解盒子模型
一.盒子模型
三个名词：
border：边框
padding：内边距
margin：外边距
padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法。这些矩形对象可以被统称为“盒子”，英文为“Box”；
在CSS中一个独立的盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。
一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。因此只要利用好这些属性，就能够实现各种各样的排版效果。
在CSS中一个独立的盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。
一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。因此只要利用好这些属性，就能够实现各种各样的排版效果。
并不仅仅是用div定义的网页元素才是一个盒子，事实上所有的网页元素本质都是以盒子的形式存在的。在人的眼中，一个网页上有各种内容，包括文本、图像等，而在浏览器看来，就是许多盒子排列在一起或者相互嵌套。
二.分别论述（border、padding、margin）
1.边框（border）
border一般用于分隔不同元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。换句话说，border会占据空间，所以在计算精细的版面时，一定要把border的影响考虑进去。
border一般用于分隔不同元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。换句话说，border会占据空间，所以在计算精细的版面时，一定要把border的影响考虑进去。
border的属性主要有3个，分别是color，width和style。
可以给四个边框设置同一种样式，也可以分别设置，如：
1.如果给出1个属性值，即上右下左都为这种样式。
2.如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性
3.如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，最后一个数值表示下边框的属性。
4.如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针顺序。border-color、border-width、border-style还可以简写成border："width"，"color"，"style"。
在设置边框时，还有一点值得注意，在给元素设置background-color背景色时，IE作用的区域为content+padding，而Firefox则是content+padding+border。这在border设置为粗虚线是表现得特别明显。
可以给四个边框设置同一种样式，也可以分别设置，如：
1.如果给出1个属性值，即上右下左都为这种样式。
2.如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性
3.如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，最后一个数值表示下边框的属性。
4.如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针顺序。border-color、border-width、border-style还可以简写成border："width"，"color"，"style"。
在设置边框时，还有一点值得注意，在给元素设置background-color背景色时，IE作用的区域为content+padding，而Firefox则是content+padding+border。这在border设置为粗虚线是表现得特别明显。
2.内边距（padding）
是指border距里面元素的距离，记住“上右下左的原则”.
padding，又称为内边距，用于控制内容与边距之间的距离。
3.外边距（margin）
是指border距外面元素的距离，记住“上右下左的原则”.
margin指的是元素与元素之间的距离。
三.标准文档流
CSS规范的思路是，首先确定一种标准的排版模式，这样可以保证设置的简单化，各种网页元素构成的盒子按照这种标准呢的方式排列布局。这种方式就是接下来要详细介绍的“标准流”方式。
但是仅通过标准流方式，很多版式是无法实现的，限制了布局的灵活性，因此CSS规范中，又给出了另外若干种对盒子进行布局的手段，包括"浮动"属性和"定位"属性等。
但是仅通过标准流方式，很多版式是无法实现的，限制了布局的灵活性，因此CSS规范中，又给出了另外若干种对盒子进行布局的手段，包括"浮动"属性和"定位"属性等。
所谓标准流，就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。
四.行内元素和块级元素
标准文档流中的元素可以分为以下两类：
（1）块级元素
所谓块级元素就是指自己占据着一行矩形区域，与不包含在它里面的其他元素不排列在同一行中。因此，这类元素称为"块级元素"，即他们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。例如<div><table>等标记
（2）行内元素
所谓行内元素，即不占有独立区域，仅仅在其他元素的基础上指出了一定的范围。例如常用的<a>标记<span>标记等
（1）块级元素
所谓块级元素就是指自己占据着一行矩形区域，与不包含在它里面的其他元素不排列在同一行中。因此，这类元素称为"块级元素"，即他们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。例如<div><table>等标记
（2）行内元素
所谓行内元素，即不占有独立区域，仅仅在其他元素的基础上指出了一定的范围。例如常用的<a>标记<span>标记等
1.行内元素之间的水平margin
即两个元素margin之和。
即两个元素margin之和。
2.块级元素之间的竖直margin
即取最大的。
即取最大的。
3.嵌套盒子之间的margin
即父元素的padding+子元素的margin
即父元素的padding+子元素的margin
4.margin可以设置为负值
