html盒子模型

    盒子模型（所有的标签看做是一个盒子）：
        块级元素（大盒子）
        行内元素包括行内块级元素都是（小盒子）
        一个盒子的组成部分:内容的宽和高（尺寸）+内边距+边框+外边距
            width+内边距（填充）+边框+外边距
            height+内边距（填充）+边框+外边距
 
        边框：
            border：宽度 样式 颜色
            border：10px solid（实线） dashed（虚线） dotted（点线） double（双线） #ff0
            border-color:
            border-style:
            border-width:
            
            border-top:10px solid red;
            border-left(right/bottom);
            
            border:none/0;
            border-collapse:collapse;去掉重边;应用table这个标签 做细线表格;要在table里面用这个标签不能在tr和td下用
        内边距：(内容到边框的距离)（内容是文字，也可以使任何一个标签）
            padding-top（/left/right/bottom）:20px/20%/auto
            一般都用复合属性 不要分开写  
            
 
        padding:10px 20px 30px 40px;    上右下左
        padding:10px 20px 30px;        上右下    （右=左）
        padding:10px 20px;        上右    (上=下 左=右)
        padding:10px;            上右下左都一样        
        
        注意：内边距会影响盒子的大小；
        外边距：（标签与标签之间的距离）        
            margin: 0 auto;   用法和padding差不多
            注意事项：
            margin:auto;可以使块级元素水平方向居中对齐
            text-align:center;可以使行内元素水平方向居中对齐
 
            清除内外边距：
                *{margin:0;padding:0;}
            margin:-50px;但是padding没有负值
    
            margin不影响盒子的尺寸 在这里讲了一个vertical-align：center；图片下面的那个背景就没了
            
            对于块级元素：上下的外边距会塌陷；取最大值。但是左右是累加的。
            对于行内元素：上下的外边距不起作用，但是左右是累加的。
            对于行内元素：上下的外边距是累加的，左右也是累加的。