定位 position

布局方式

1、标准流 流动模型（Flow）

流动（flow）是默认的网页布局模式。
1）第一点，块状元素都会在所包含元素内自上而下按顺序垂直显示，块状宽度都为100%。就是以行的形式占据位置。
2）流动模型下，内联元素所在的包含元素 从左到右水平显示

2、float 浮动 浮动模型 (Float)

• 通过float来实现 left/top/right/bottom
• 块元素通过float 可以到一行 float活跃在块元素中。

3、position定位 层模型（Layer）

postion属性指定了元素的定位类型

static //默认值

即没有定位 按照标准流

relative// 相对位置

相对该行 当前位置 配合top bottom left right ("left:-20px" 从元素的原始左侧位置减去 20 像素。)偏移前的位置保留不动。

• left 以右为坐标轴相对移动
• top 以下为坐标轴相对移动
• bottom以上位坐标轴相对移动
• right以左为坐标轴相对移动

fixed // 固定位置

相对 left top bottom right 即使窗口滚动也不移动

• 不受制于父元素

absolute // 相对

配合top bottom left right 对应四个角
1.相对于屏幕的四个角来做相对位置
2.并且不受外层布局限制（外层没有定位属性时）

• sticky // 依赖于用户的滚动，在relative和fixed之间 切换

以下不为position

• clip:rect(top,right,bottom,left); // 剪切

• cursor // 光标的类型

• overflow // 设置当前元素溢出光标时发生的事情 auto//hidden//scroll//visible//inherit

• z-index:-1; // 1 重叠的元素

居中对齐

• margin : auto; // 元素居中对齐

• text-align:center;// 文本居中对齐

• position:absolute;// 左右对齐

• overflow: auto; 如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。

• padding: 70px 0;//垂直居中对齐 - 使用 padding

*垂直居中 - 使用 line-height : 200px; 让 line-height 属性值和 height 属性值相等来设置 div 元素居中