前端网页学习12（设计优秀网页的三种布局方式）

网页布局三种方式：

1. 标准流
2. 浮动
3. 定位

标准流：

行内元素可以一行多个。
块级元素独占一行。
即每个元素都有自己的格式。
常用于从上到下布局。

浮动：

定义：
元素脱离原有的位置，处于更高的一个层次。
语法
选择器{float：属性值}
none（默认）left。right
特点：
1. 脱标：
脱离标准位置，即原有位置会被未浮动的格子占据。

2. 并列：
多个盒子都设置了浮动，且顶端对齐，在同一行排列，直至到达容器改行边缘。

3. 行内块元素特性：
任何元素都可以浮动，浮动后的元素具有行内块元素特性。

4. 注意点：
以标准父元素上下排列，以约束浮动子元素位置。
一个元素浮动了，理论上，其他兄弟元素也要浮动。（只会影响后面的标准流）。
5. 清除浮动：
使用时机：
父类不方便给高度时。
原理：
闭合浮动。
语法：
选择器{clear：属性值}
left。right。both（常用）
四种方法：

1. 最后一个浮动的元素后添加一个额外标签，添加清除浮动样式。
2. 父元素添加overflow属性（hidden，auto，scroll），但是无法显示溢出部分。
3. after伪元素。
4. 双伪元素。

定位：

定义：
盒子固定在某个位置，并压住其他盒子。
结构：
定位模式+定位距离
定位模式：
position：static静态/relative相对/absolute绝对/fixed固定/sticky粘性
定位距离：
top/bottom/left/right
静态：
默认定位：
（不定位），是标准流。
相对定位：
相对于原来位置。
不脱标。
绝对定位：
相对于父元素的位置（没有父元素，或没有定位，则以浏览器为标准）。
父元素有定位90（非静态），以最近的父元素为标准。
不占有原来位置，脱标。
子绝父相
固定定位：
以浏览器可视区为标准，不随进度条滚动。
不占有原来位置，脱标。
粘性定位：
（相对和固定的混合。）
相对于浏览器可视窗口。
占有位置。
必须添加四个距离中的一个才有效。

定位的叠放次序：

z-index:整数或auto；
属性值大的居上。
属性值相同的后面居上。
只有定位的盒子才有z-index属性