CSS盒子模型和浮动

1、盒子模型

  

（1）内容 - 框的内容，其中显示文本和图像。

width：内容的宽度

height：内容的高度

（2）内边距 - 清除内容周围的区域。内边距是透明的。

padding-left：左内边距

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

padding:复合写法

（3）边框 - 围绕内边距和内容的边框。

语法：border:border-width | border-style | border-color

（4）外边距 - 清除边界外的区域。外边距是透明的。

margin-left：左外边距

margin-right：右外边距

margin-top：上外边距

margin-bottom：下外边距

margin:复合写法

（5）盒模型的相关属性

box-sizing：用来设置盒子尺寸的计算方式

outline：用来设置元素的轮廓线

box-shadow：用来设定值元素的阴影效果

border-radius：用于设变边框的圆角

2、浮动

（1）普通流

块级元素：独占一行

行内元素：不独占一行

（2）语法规则

选择器{float:属性值}    div{float: left;}

        none:元素不浮动

        left:元素左浮动

        right:元素右浮动

（3）浮动的元素特性

浮动元素会脱离标准流(脱标)

浮动的多个元素会一行内显示并且元素顶部对齐

浮动的元素会具有行内块元素的特性

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

浮动的盒子不再保留原先的位置

浮动元素回具有行内块元素特性

        添加浮动后，它的大小根据内容来决定

        浮动的盒子中间是没有缝隙的，是紧挨着一起的

        行内元素同理

（4）清除浮动

选择器{clear :属性值}     div{clear:left}

        left:清除左侧浮动的影响

        right:清除右侧浮动的影响

        both:同事清除左右两侧浮动的影响

列：