盒子模型、BFC、外边距重叠等

1.盒子模型 *****
盒子种类:{
    1.w3c盒子 内容盒子 标准盒子
        width设置给内容区的
    盒子的宽:width+左右padding+左右border
    盒子的高:height+上下padding+上下border
    盒子所占页面的宽:盒子的宽+左右margin
    盒子所占页面的高:盒子的高+上下margin
    2.边框盒子 怪异盒子 IE盒子
     width设置给盒子本身的
     盒子的宽:width=contentWidth+左右padding+左右border
     盒子的高:height=contentHeight+上下padding+上下border
     盒子所占页面的宽:width+左右margin
     盒子所占页面的高:height+上下margin
}
box-sizing:content-box/border-box
2.盒子背景样式
    background-color:背景色
    background-image:背景图片
    background-position:背景图片定位
    background-repeat:no-repeat 设置图片平铺
    background-attachment:attachment 不随着滚动条滚动而滚动
3.浮动:
    特性:脱离文档流 原先位置不保留 飘在文档流上方
    float left right none
    清除浮动:
        1.对哪一个元素造成了影响 {clear:both}
        2.伪元素清除浮动
        ::after{
            content:"",
            display:block,
            clear:both
        }
        3.空div（浮动元素之后）
        {clear:both}
        4.给父元素加高度
        5.触发BFC overflow:auto/hidden 
4.BFC
    1概念:块计格式化上下文 理解为元素的一种属性 
    只要元素拥有了这种属性 就成为一块的独立的渲染区域
    2.如何触发?
        1.html
        2.float
        3.position
        4.display 
        5.overflow不为visible
    3.作用特性:
        1.避免外边距重叠
        2.清除浮动
        3.避免元素被浮动元素遮盖
        4.两列布局
        5.三列布局 
5.外边距重叠?
    1.兄弟级外边距重叠
        1.尽量给其中一个设置外边距
        2.给其中一个包裹父元素 设置BFC
    2.父子级外边距重叠
        1.给父元素设置边框
        2.给父元素触发BFC