CSS盒模型

一、 概述
        就是把HTML页面中的元素看作是以一个矩形的盒子，也就是一个装东西的容器。
二、组成
        内容：指定内容的大小。框的内容，其中显示文本和图像。width：内容的宽度，height：内容高度。行内元素不支持设置宽度和高度。
        内边距：边框与内容之间的距离。清除内容周围的区域。内边距是透明的。
            属性
                padding-left左内边距
                padding-right：右内边距
                padding-top：上内边距
                padding-bottom：下内边距
                padding-复合写法
        边框：指定一个元素边框的样式、粗细、颜色。围绕内边距和内容的边框。边框会影响盒子的实际大小。
        外边距：控制盒子和盒子之间的距离。清楚边界外的区域。外边距是透明的。
            属性
                margin-left：左外边距
                margin-right：右外边距
                margin-top：上外边距
                margin-bottom：下外边距
                margin-复合写法
  三、相关属性
        box-sizing：用来设置盒子尺寸的计算方式
        outline：用来设置元素的轮廓线
        box-shadow：用来设定值元素的阴影效果
        border-radius：用于设变边框的圆角
    四、普通流
        块级元素：独占一行
        行内元素：不独占一行
    五、浮动
        概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。
        语法规则：选择器{
    float:属性值
        }
属性值：none：元素不浮动 left：元素左浮动 right：元素右浮动
        特性
            1.浮动元素会脱离标准流(脱标)
       标准流：指的是在不使用其他的与排列和浮动、定位相关的特殊CSS规则时,各种元素的排列规则。
      脱流：使用了浮动、定位相关的特殊规则脱离了标准流的控制浮动到了指定位置。
            2.浮动的盒子不再保留原先的位置
            3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。浮动的元素是互相贴靠在一起的(不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
            4. 浮动元素回具有行内块元素特性
    如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
    浮动的盒子中间是没有缝隙的，是紧挨着一起的
    行内元素同理
        六、清除浮动
            为什么要清除浮动：1.由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。2.由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
            语法规则
                选择器{
    clear:属性值
}
                属性值：
left:清除左侧浮动的影响
right:清除右侧浮动的影响
both:同事清除左右两侧浮动的影响