css：盒模型

        盒模型规定了所有元素都拥有一个像盒子一样外形的东西，由border、margin、padding、content组成。

1. 标准盒模型：

• 宽度=左右margin+左右border+左右padding+width
• 高度=上下margin+上下border+上下padding+height

2. 怪异盒模型（在IE6下，当不对doctype进行定义时，会触发怪异盒模型）：

• 宽度=左右margin+content的width；
• 高度=上下margin+content的height；

3. padding：内容到元素边框的距离，也称为补白、内边距；

• 控制文本的距离使用padding，一般设置在元素本身；
• 控制子元素的位置，padding属性需要添加到父元素上；
• 要保持元素大小不变，要减去增加的padding的值；
• padding不可以为负值；

• 传参不同：

                上 右 下 左{padding:0px 0px 0px 40px}

                上 左右 下{padding:10px 20px 30px}

                上下 左右{padding:10px 20px}

                四个方向 {padding:2px}

4. margin：元素外边，被称为边距；

• 传参不同：

        四个值：上 右 下 左

        三个值：上 左右 下

        二个值：上下 左右

        一个值：四个方向

• margin-top问题：当给子元素设置margin-top时，浏览器在解析它的时候，会误认为给父元素设置，所以会出现整体往下掉的情况。如果子元素是浮动的，不会出现这种情况，或者给父元素设置overflow:hidden;。

5. css3增加了盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式；

• box-sizing：content-box border-box

• content-box：元素的宽 = width + padding + border；

• border-box：元素的宽 = width（包含padding和border）保持盒子整体不会变；

6. 元素分类

• 块级元素： 自上而下排列的元素，可以设置宽和高，独占一行，比如：div、h1-h6、p、ul、dl、ol、form等；

• 行内(内联)元素：横向排列的元素，不可以设置宽和高，比如：span、a、em、i、b、strong等；

• 行内(内联)块元素：横向排列的元素，可以设置宽和高，比如：input、select、textarea、button、img等；