CSS布局与定位入门
声明：本文为转载
如何使用CSS做出：
- 左右布局
- 左中右布局
- 水平居中
- 垂直居中
- 等其他小技巧
一、水平居中
1.margin: 0 auto
适用于块级元素
2.text-align: center
适用于内联元素,inline-block元素，文字，使用方法是为目标的父元素添加该样式。（可使用包裹器技巧）
3.调整padding,margin
如不方便直接调整，可以使用包裹器包住元素，然后让包裹器代为调整
二、垂直居中
1.line-height=height
大多数情况下管用
2.调整padding,margin
如果不方便直接调整，可以使用包裹器包住元素，然后让包裹器代为调整
三、左右布局
1.float+clearfix
块级元素（尤其是列表元素）固定套路
step1.float+clearfix将列表元素调为横向布局
step2.列表元素宽度设为50%
2.绝对定位
step1.用一个relative父元素包裹住所有元素
step2.子元素absoulte调整位置
四、左中右布局
1.float+margin
image
2.float+absolute
image
五、等其他小技巧
1.如何让内联元素产生位移：
内联元素margin与padding左右有效，上下无效，解决办法就是inline-block
image
实例：
image
2.包裹器wrapper的技巧
使用方式：在xx元素外面写一个div命名为xx-wrapper，将其包裹起来。
使用情形：
- 内联元素居中：包裹一个父元素，添加text-align样式
- 元素不好利用padding调整位置：包裹一个父元素，在父元素上添加padding
3.对块级元素设置inline-block会发生什么？
答：至少发生两件事
第一件事：块级元素宽度收缩
块级元素不写宽度的情况下，默认宽100%（毕竟占据一行）。
加入inline-block，宽度自动适合内容
第二件事： 块级元素下方会产生空隙
解决方法→vertical-align:top;
image
4.状态机
使用情形：需要可变地切换一个元素的状态时
实现方法：
css文件里写入三个状态类xxx-state1,xxx-state2,xxx-state3
script标签修改 作用对象.className="xxx-state?"
技巧：配合transition:all 0.2s可让状态切换不显突兀
5.box-sizing:border-box
作用：在计算宽度的时候，将border和padding算入其中，使我们写的宽度是加入border、padding后的宽度（不至于因它们撑破父元素，破坏左右布局）
使用情形：
image
