css布局

标准流布局

1.标准流布局（文档流， 普通流，静态流）
　　是默认的布局方式
　　特点：将元素按照书写顺序及元素类型，从上至下，从左至右排序

浮动布局

　　1.设置元素浮动
　　　　属性：float
　　　　取值：left / right / none(默认值)
　　2.浮动元素的特点：
　　　　1.元素设置浮动（left / right），会脱离文档流，在文档中不在占位，后面正常的元素会向前占位，同时浮动元素会"漂浮"在文档流上方
　　　　2.元素设置浮动，会从它当前所在文档中的位置脱流，向左或者向右浮动。
　　　　3.多个元素同时左浮或右浮，浮动元素会依次停靠在前一个浮动元素的边缘，中间没有缝隙。
　　　　4.浮动元素会在父元素的尺寸范围内浮动，多个浮动元素无法并排显示时，会自动换行。停靠在其他浮动元素边缘。
　　　　5.任何元素只要设置浮动，就具有块元素的特征，可以手动调整宽高

　　3.浮动引发的特殊效果
　　　　文字环绕效果：浮动元素脱流，在文档中不占位，后面正常元素会向前占位，可能被浮动元素遮挡。但是浮动元素只会遮挡正常元素的尺寸区域。不会遮挡正常的文本内容。文本会围绕在浮动元素周围显示。

　　4.浮动元素对父元素高度的影响
　　　　子元素如果全部设置浮动，在文档中不占位，父元素高度为0：
　　　　1.父元素的背景图片和背景颜色无法显示
　　　　2.父元素后面的正常元素会上移，影响布局
　　　　解决： 1.为父元素指定高度
　　　　　　　2.设置父元素 overflow：hidden；
　　　　　　　3.清除浮动效果：
　　　　　　　　属性：clear
　　　　　　　　取值：left/right/both
　　　　　　　　使用：为正常元素添加clear属性，清除浮动元素带来的影响。
　　　　　　　　　　　left：表示正常元素左边不允许出现浮动元素
　　　　　　　　　　　right：正常元素不受右浮元素的影响
　　　　　　　　　　　both：正常元素不受左浮和右浮元素的影响
　　　　　　　　解决父元素高度为0的问题：
　　　　　　　　　　1.为父元素末尾添加空的块元素
　　　　　　　　　　2.为空的块元素设置clear：both；

定位布局

　1.定位布局的布局：

　　属性：position
　　取值：1.static：默认值，使用文档流布局
　　　　　2.relative：相对定位
　　　　　3.absolute：绝对定位
　　　　　4.fixed：固定定位
　　注意：只有元素设置position属性 relative / absolute / fixed三者之一，才认为元素是“已定位的元素”

　2.偏移属性：
　　使用 top / bottom / left / right 偏移属性调整已定位元素的位置
　　1.top：取像素值，可正可负。正值表示元素向下移动，负值向上
　　2.bottom：正值表示向上移动，负值向下
　　3.left：正值表示元素向右移动，负值表示向左
　　4.right：正值表示元素向左移动，负值表示向右

　3.定位布局的分类：　

　　1.相对定位 position：relative
　　　元素设置相对定位之后，可以使用偏移属性调整元素位置
　　　相对定位的元素是参照元素在文档中的原始位置进行偏移
　　　特点：
　　　相对定位的元素不会脱离文档流，在文档中始终保留它的原始位置。

　　2.绝对定位 position：absolute
　　　绝对定位的元素会脱离文档流，类似于浮动。
　　　绝对定位的元素参照一个离他最近的已定位的祖先元素进行偏移，如果没有已定位的祖先元素，会参照浏览器窗口（0，0）点进行偏移。
　　　使用：
　　　　采用“父相子绝”的方式实现元素绝对定位。

　　3.固定定位 position：fixed
　　　1. 固定定位可以使元素固定在浏览器窗口的某个位置，不会随网页内容滚动而滚动
　　　2. 语法 ：
　　　　属性 ：position
　　　　取值 ：fixed
　　　　配合偏移属性实现元素位置的固定
　　　3. 注意 ：
　　　　1. 固定定位的元素永远是参照浏览器窗口进行定位的
　　　　2. 固定定位的元素都会变成块元素