CSS布局

 1.左右布局：

方法一：

给子元素加上“float：left、right，父元素加上clearfix

方法二：

利用position。position可使元素脱离文档流。父元素设position: relative; 子元素设position: absolute 并且设置距离上下左右的位置即可

方法三：

属性：table-cell：

2.左中右布局

 左中右布局与左右布局类似

方法一：利用float

方法二：利用position

方法三：

类似左右布局中使用table-cell。

3.水平居中：

行内元素居中：设置text-align:center即可

块级元素居中

（1）单个块级元素：设置： margin左右为auto；

（2）多个块级元素:子元素设display: inline-block，父元素设text-align:center

4.垂直居中

方法一： 设置height和line-height的高度一致；

方法二：设置padding和margin

5.其他

1.内联元素设置宽高是无效的；设置margin-top和margin-bottom也是无效的

2.要好好利用box-sizing: border-box/content-box; border-box设置width是包括border及padding的，content-box的width只是指内容的宽度，不包括border和padding

3.设置宽度时设置max-width比设置width要更好

4。尽量不要设置width和height，多想想设置padding和margin

5. 伪类”xxx: nth-child(even/odd)可选中第偶数/单数个元素对其进行设置

     其实方法有很多，最重要是根据实际情况需要运用不同的方法