页面布局方式
标准流
浮动
定位：
定位模式 + 边偏移 ( top left right bottom )
定位模式 position
1.static 静态定位  
元素默认的定位方式 不能设置边偏移 不可以设置层级（z-index）  不脱标
2.relative 相对定位
相对定位的元素参考自身之前在标准流中的位置进行定位 可以设置边偏移 可以设置层级  不脱离标准流（在标准流中保留位置）
3.absolute 绝对定位
绝对定位的元素参考 距离最近带有定位（相对定位 、绝对定位、固定定位）的父元素（祖级元素）进行对齐，如果没有定位的父元素则参考浏览器进行对齐
可以设置边偏移 ，可以设置层级， 完全脱离标准流（在标准流中不保留位置）
绝对定位的元素会转换元素的显示模式变成 近似行内块的显示方式
绝对定位的元素不存在外边距塌陷
4. fixed 固定定位
固定定位的元素只参考浏览器可视区进行对齐
可以设置边偏移，可以设置层级
完全脱离标准流 （ 在标准流中不保留位置 ）
固定定位的元素显示模式会发生变化 变成 近似行内块的显示方式
固定定位的元素不会跟随浏览器滚动条滚动
固定定位的元素不存在外边距塌陷


子绝父相：


子元素设置绝对定位 父元素设置 相对定位
绝对定位的盒子 居中对齐：
1.先设置 绝对定位的子元素边偏移为 50%
2. 设置绝对定位的子元素 margin 负值
定位元素的层级属性 z-index  
定位（静态定位除外）的元素层级都会高于 标准流 和 浮动
只有设置了定位（静态定位除外）的元素才有z-index
元素默认的层级为 0 默认显示 后来者居上（按照元素的书写顺序进行显示，后写的元素在最高层级显示）
如果设置了层级属性则 按照 层级属性大小显示 层级越大 显示越靠前
圆角边框  border-radius:50%  圆形
盒子阴影   box-shadow: 水平位置 垂直位置 阴影大小 阴影模糊程度 阴影颜色 内外阴影
页面布局的三种方式：
标准流:  页面所有的元素都 按照默认的显示方式进行排列
浮动：让块级元素同一行显示 并且脱离标准流
定位
浮动：
为什么要学习浮动？  为了让多个块级元素可以在同一行显示方便我们进行页面布局
float: left / right / none
浮动的特性:
1. 浮动的元素脱离标准流 ，在标准流中不再占有位置 (后面标准流的兄弟元素会占据浮动元素原来的位置)
2. 浮动的元素 显示模式会发生变化 变成类似 行内块元素的显示方式
3. 浮动的元素与父元素的关系: 浮动的子元素 只能和父元素的 内容区进行对齐 不会超出 padding 和border 部分
4. 浮动的元素与标准流中兄弟元素的关系： 浮动的元素只会影响标准流中 后面的兄弟元素
浮动的元素在使用的时候:
1. 一般情况为了不让浮动的元素影响 后面标准流中的元素，会为其增加一个父元素
2. 一般情况为了布局稳定，当前元素浮动 兄弟元素也应该浮
清除浮动:
为神马要清除浮动？
1. 当父元素没有高度的时候，浮动的子元素 无法撑开父元素 ，导致父元素高度为0，父元素后面标准流中的兄弟元素就会占据父元素的位置
清除浮动的属性:  clear:both
清除浮动的方法:
1. 额外标签法 增加一个带有清除浮动属性的 空标签
   用法: 谁浮动就给最后浮动的元素后面增加一个 带有清除浮动属性的空标签
   缺点:会给页面增加许多没有用的空标签 导致页面结构混乱
2. 给父元素设置overflow :hidden

页面布局方式
标准流
浮动
定位：
定位模式 + 边偏移 ( top left right bottom )
定位模式 position
1.static 静态定位  
元素默认的定位方式 不能设置边偏移 不可以设置层级（z-index）  不脱标
2.relative 相对定位
相对定位的元素参考自身之前在标准流中的位置进行定位 可以设置边偏移 可以设置层级  不脱离标准流（在标准流中保留位置）
3.absolute 绝对定位
绝对定位的元素参考 距离最近带有定位（相对定位 、绝对定位、固定定位）的父元素（祖级元素）进行对齐，如果没有定位的父元素则参考浏览器进行对齐
可以设置边偏移 ，可以设置层级， 完全脱离标准流（在标准流中不保留位置）
绝对定位的元素会转换元素的显示模式变成 近似行内块的显示方式
绝对定位的元素不存在外边距塌陷
4. fixed 固定定位
固定定位的元素只参考浏览器可视区进行对齐
可以设置边偏移，可以设置层级
完全脱离标准流 （ 在标准流中不保留位置 ）
固定定位的元素显示模式会发生变化 变成 近似行内块的显示方式
固定定位的元素不会跟随浏览器滚动条滚动
固定定位的元素不存在外边距塌陷


子绝父相：


子元素设置绝对定位 父元素设置 相对定位
绝对定位的盒子 居中对齐：
1.先设置 绝对定位的子元素边偏移为 50%
2. 设置绝对定位的子元素 margin 负值
定位元素的层级属性 z-index  
定位（静态定位除外）的元素层级都会高于 标准流 和 浮动
只有设置了定位（静态定位除外）的元素才有z-index
元素默认的层级为 0 默认显示 后来者居上（按照元素的书写顺序进行显示，后写的元素在最高层级显示）
如果设置了层级属性则 按照 层级属性大小显示 层级越大 显示越靠前
圆角边框  border-radius:50%  圆形
盒子阴影   box-shadow: 水平位置 垂直位置 阴影大小 阴影模糊程度 阴影颜色 内外阴影
页面布局的三种方式：
标准流:  页面所有的元素都 按照默认的显示方式进行排列
浮动：让块级元素同一行显示 并且脱离标准流
定位
浮动：
为什么要学习浮动？  为了让多个块级元素可以在同一行显示方便我们进行页面布局
float: left / right / none
浮动的特性:
1. 浮动的元素脱离标准流 ，在标准流中不再占有位置 (后面标准流的兄弟元素会占据浮动元素原来的位置)
2. 浮动的元素 显示模式会发生变化 变成类似 行内块元素的显示方式
3. 浮动的元素与父元素的关系: 浮动的子元素 只能和父元素的 内容区进行对齐 不会超出 padding 和border 部分
4. 浮动的元素与标准流中兄弟元素的关系： 浮动的元素只会影响标准流中 后面的兄弟元素
浮动的元素在使用的时候:
1. 一般情况为了不让浮动的元素影响 后面标准流中的元素，会为其增加一个父元素
2. 一般情况为了布局稳定，当前元素浮动 兄弟元素也应该浮
清除浮动:
为神马要清除浮动？
1. 当父元素没有高度的时候，浮动的子元素 无法撑开父元素 ，导致父元素高度为0，父元素后面标准流中的兄弟元素就会占据父元素的位置
清除浮动的属性:  clear:both
清除浮动的方法:
1. 额外标签法 增加一个带有清除浮动属性的 空标签
   用法: 谁浮动就给最后浮动的元素后面增加一个 带有清除浮动属性的空标签
   缺点:会给页面增加许多没有用的空标签 导致页面结构混乱
2. 给父元素设置overflow :hidden