margin设置负值
margin复制应用
- 增加宽度
- 圣杯布局
- 双飞翼布局
margin负值效果
-margin-left负值，元素自身向左移动 -margin-top负值，元素自身向上移动 -margin-right负值，右边的元素向左移动 -margin-bottom负值，下边的元素向上移动
（增加宽度）演示代码
如何实现圣杯布局
什么是圣杯布局
两边固定宽度中间自适应宽度
难点
- marhin-left:-100%;100%是父级宽度的100%
- margin-right:-150px;其他元素当他宽度少了150px
演示代码
如何实现双飞翼布局
什么是双飞翼布局
左右宽度固定，中间宽度自适应，中间的内容优先加载
演示代码
如何清除浮动？手写clearfix
什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动的特点
- 浮动元素会脱离标准流（脱标：浮动的盒子不再保留原先的位置）
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性（不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性）
- 一个元素浮动，理论其他兄弟元素也得浮动
清除浮动的方法
- 父级加overflow:hidden
- 父级设置clearfix
- 父级也浮动
手写clearfix
.clearfix:after { content:""; display:block; clear:both; }
演示代码
手写垂直水平居中
常见的垂直水平居中方法
- position + margin负值的方法（宽高固定）
- position + margin:auto（宽高固定）
- display:table-cell + vertical-align:middle （宽高固定）
- position + transform （不需要固定宽高）
- flex(不需要固定宽高)
