第3章 深入理解盒子模型

一.盒子模型

    三个名词：

          border：边框
          padding：内边距
          margin：外边距

     padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法。这些矩形对象可以被统称为“盒子”，英文为“Box”；
在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的属性主要有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设置为粗虚线是表现得特别明显。

2.内边距（padding）

     是指border距里面元素的距离，记住“上右下左的原则”.

     padding，又称为内边距，用于控制内容与边距之间的距离。

3.外边距（margin）

     是指border距外面元素的距离，记住“上右下左的原则”.

     margin指的是元素与元素之间的距离。

三.标准文档流

     CSS规范的思路是，首先确定一种标准的排版模式，这样可以保证设置的简单化，各种网页元素构成的盒子按照这种标准呢的方式排列布局。这种方式就是接下来要详细介绍的“标准流”方式。
     但是仅通过标准流方式，很多版式是无法实现的，限制了布局的灵活性，因此CSS规范中，又给出了另外若干种对盒子进行布局的手段，包括"浮动"属性和"定位"属性等。

 

     所谓标准流，就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

四.行内元素和块级元素

     标准文档流中的元素可以分为以下两类：
     （1）块级元素
          所谓块级元素就是指自己占据着一行矩形区域，与不包含在它里面的其他元素不排列在同一行中。因此，这类元素称为"块级元素"，即他们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。例如<div><table>等标记
     （2）行内元素
          所谓行内元素，即不占有独立区域，仅仅在其他元素的基础上指出了一定的范围。例如常用的<a>标记<span>标记等

 

1.行内元素之间的水平margin
     即两个元素margin之和。

2.块级元素之间的竖直margin
     即取最大的。

3.嵌套盒子之间的margin
     即父元素的padding+子元素的margin

4.margin可以设置为负值