CSS盒模型结构及浮动

CSS盒模型结构

一.概念：把HTML页面中的元素看作是以一个矩形的盒子，也就是一个装东西的容器。

二.组成：内容框的内容，其显示文本和图像。内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。外边距 - 清除边界外的区域。外边距是透明的。

结构包括：content（width、height），边框（border）、内边距（padding）、内边距（padding）、外边距（margin）

padding-left：左内边距、padding-right：右内边距padding-top：上内边距
padding-bottom：下内边距、padding:复合写法

padding-left：左内边距、padding-right：右内边距padding-top：上内边距
padding-bottom：下内边距、padding:复合写法

CSS浮动

一.浮动元素的特性

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

2.浮动元素会脱离标准流(脱标) 标准流:指的是在不使用其他的与排列和浮动、定位相关的特殊CSS规则时，各种元素的排列规则。脱流:使用了浮动、定位相关的特殊规则脱离了标准流的控制浮动到了指定位置。

3.浮动元素回具有行内块元素特性   如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小  根据内容来决定浮动的盒子中间是没有缝隙的， 是紧挨着一起的行内元素同理

4.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列注意:浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。