关于css:盒子模型

1. 盒子模型

 文档中的每个元素都能够被看作是一个矩形盒子
1) 盒子的属性
    width
    height
    margin 外边距 盒子与其余盒子之间的间隔
        margin-top 上外边距
        margin-right 右外边距
        margin-bottom 下外边距
        margin-left 左外边距

        margin:10px;    上下左右都是 10px
        margin:5px 10px;    高低为 5px，左右为 10px
        margin:5px 10px 15px;  上为 5px，左右为 10px，下为 15px
        margin:5px 10px 15px 20px; 上 5px，右 10px，下 15px，左 20px

    border 边框
        border-width 边框线的宽度
            px
        border-style 边框线的款式
            solid   实线
            dotted  点状线
            dashed  虚线
            double  双实线
        border-color 边框线的色彩

        速写
            border:10px double #333;
        border-radius 边框圆角
            border-radius:100%; 圆
            border-radius:10px; 10px 的圆角

    padding 内边距

    background-color
    background-image:url();
    background-position
    background-repeat
        no-repeat 不反复
        repeat-x x 轴反复
        repeat-y y 轴反复
    background-size 背景图的尺寸
        background-size:100% 100%;

2) 盒子的组成
    width、padding、border、margin

3) 盒子的分类
    通过 box-sizing 设置盒子的类型
    1) box-sizing:content-box;
        内容盒子【W3C 盒子】【默认】width 200px= 内容 width
        所占的宽 = width + padding + border + margin 

    2) box-sizing:border-box;
        边框盒子【IE 盒子】width 200px = 内容 width + padding + border
        所占的宽 = width + margin
    
4) 边框塌陷 (margin 塌陷)
    浏览器中有两个盒子，高低布局，如果给下面的盒子加上 margin-bottom:10px; 给下面的盒子加上 margin-top:10; 两个盒子之间的间隔为 10px，不是 20px
    两个盒子之间间隔取 margin 大的那一个