理解CSS的盒子模型和样式继承

一、盒模型
     CSS中盒子模型属性：(content)、填充(padding)、边框(border)、边界(margin)。
1.margin
    a.为margin-width指定一个值
    margin: margin-top（上）/margin-right（右）/margin-bottom（下）/margin-left（左）;
    b.{
        margin:12px;
    }
    所有边外边距全部为12px
    等价于下面的定义
    {
    margin-top-width:12px;
    margin-right-width:12px;
    margin-bottom-width:12px;
    margin-left-width:12px;
    }
    c.为margin-width指定两个值

    margin: margin-top/margin-bottom(上下) margin-right/margin-left（右左）;
    {
    margin:12px 20px;
    }
    上下边外边距是12px,左右边外边距是20px(相对于整个页面)
    等价于下面的定义
    {
    margin-top-width:12px;
    margin-right-width:5%;
    margin-bottom-width:12px;
    margin-left-width:5%;
    }
    d.为margin-width指定三个值
    margin: margin-top(上) margin-right/margin-left（右左） margin-bottom（下）;
    {
    margin:12px 20px 0;
    }
    上边外边距是12px,左右边外边距是20px(相对于整个页面),下边外边距是0    
    等价于下面的定义
    {
    margin-top-width:12px;
    margin-right-width:5%;
    margin-bottom-width:0;
    margin-left-width:5%;
    }


    e.如果margin属性后面跟随四个值,那么值的分配顺序是从上面开始以顺时针旋转分配
    {
    margin-top-width:12px;
    margin-right-width:5%;
    margin-bottom-width:-12px;
    margin-left-width:auto;
    }
2.padding
       Padding（填充）属性定义元素边框与元素内容之间的空间。
    属性值和margin相同
    padding:10px; 意思是上下左右值全是10px
    padding:5px 10px; 意思是上下为5px，左右为10px;
    padding:1px 2px 3px 4px; 这个写法意思是：上为1px，右为2px，下为3px，左为4px
    padding:5px 10px 7px; 这种写法意思是：上为5px，左右为10px，下为7px
    （注意：padding后面4个值定义的顺序分别为：上 右 下 左）

块级元素设置margin时，上下margin以最大的那个为标准显示,嵌套盒子中，子元素与父元素的margin会合并。

二、样式继承

能够继承的样式
       a.文字样式
     font-family, font-size, font-style,font-variant, font-weight, font
    b.文本样式
     letter-spacing,line-height，text-align, text-indent, text-transform,word-spacing
    c.列表和表格样式
      list-style-image, list-style-position,list-style-type, list-style
    d.color属性