7、盒子模型

• 什么是盒子模型？

  可以把页面上的每一个元素看成一个盒子，这是一个抽象的概念
  

• 盒子模型的组成

    盒子模型由内容，内边距，边框和外边距组成
  

• 盒子属性

    border:边框大小 线类型 颜色;（ 复合属性）
    border-style:边框样式  （虚线dotted，实线solid)
    border-top-style:顶部边框类型
    border-right-style   右
    border-bottom-style  下
    border-left-style    左
  
    border-color:边框颜色;
    border-top-color:上边框颜色;.....
  

• 盒子边距、大小

    padding  内边距，边框与内容之间的距离（margin外边距）
    一个值的时候： 代表四个方向值一样 上右下左（顺时针）
    二个值的时候： 上下  右左
    三个值的时候： 上 右左 下
    四个值的时候： 上  右  下 左
  
    注意： 行内元素-上下无效果,右左有效果
  
    margin:auto;    水平方向快速居中,垂直方向不存在
    margin垂直方向间距合并，水平方向正常
    盒子大小=样式宽+内边距+边框 
  

浮动

• 什么是浮动？

  浮动，其实就是让元素脱离正常的文档流，漂浮起来。
  

• 为什么需要浮动？

    当正常文档布局不能解决的时候，则需要脱离正常文档流
  

• 浮动带来的问题

    高度塌陷
  

        float:left          左浮动
        float:right         右浮动
        overflow:hidden;    解决坍塌问题

盒子定位

    position:
           static       默认定位。  静态定位，默认值不会发生任何变化
          relative      相对定位    相对定位，不会脱离文档流以自身元素为参考,可以给 top/right/bottom/left
          absolute      绝对定位  绝对定位，脱离文档流,默认以窗口为参考.有定位父级则父级参考可以给top/right/bottom/left
          fixed         固定定位  固定定位，脱离文档流默认以窗口为参考，可以给top/right/bottom/left窗口滚动，依然不会变.

   fixed    固定定位，相对于浏览器窗口进行定位
        方向词
            left
            right
            top
            bottom
        z-index 规定定位的层级（默认0）
        值：number 值越大层级越高