CSS盒模型

#盒模型学习
##1、概念
###1、网页上的每一个模块都可以看作是一个盒子，一个网页是由很多个盒子组成的。网页装盒子，盒子装元素（内容）。
    内边距：元素（内容）与盒子的边距（padding），相当于给改元素的外面填充一层海绵。
    padding有四个参数的时候表示上右下左，顺时针。
            有两个参数的时候，padding(50px 30px)表示上下是50像素，左右是30像素
            有3个参数的时候，padding(30px 20px 10px)表示上为30像素，左右为20，下为10

    边框：border
    边框的像素设置为1px最好看，用实线solid。虚线是dashed。（boder: 1px solid  red）
    边框颜色：boder-color整体颜色  boder-left-color左边框颜色

    外边距：盒子与盒子之间，或者盒子与整个网页的边距，margin。
    相当于给改元素的四周划分一块领地，其他的盒子不能占领这块区域。

    外边距的传递性：只有margin-top才有传递性。
    要想子div相对于父div下降，给父div加一个边框border

    同一方向的外边距的合并：div1外边距设置20px，div2外边距设置20px，他们之间只会相隔20px
                如果一个是30，一个是20，则取最大值。

##2、块级元素和行级元素
###1、块级元素：
    独占一行空间，前后换行显示。
    块级元素常用来作为容器，可以容纳其他的行级元素和块级元素
    块级元素具有一定的宽度和高度，width、height。
    块级元素：div、p、ul、ol、table、form、h1-h6
    display：inline 设置块级元素为行级元素，设置之后它就没有高宽属性了，并且横着排列。
###2、行级元素（行内标签）：
    共享一行，自动换行，多用于组织内容（文本、超链接、img）
    行级元素：span、lable、a、img、input、textarea、br
    行级元素不支持width、height，它的高和宽由内容决定
    display：block 设置行级元素为块级元素，设置之后就可以设置它的width和height了