盒子模型

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大的那一个