display的四种取值：
- inline：使块级元素在一行展示(大部分HTML元素的宽、高、上下边距就无法设置了)
- block：使内联元素各自占一行
- inline-block：修饰的元素称之为行内块元素，它们会像行内元素一样在同一行显示，又可以像块元素一样设置高、宽、行高、边距
- none：当一个元素的display属性被设为none时，该元素不会被渲染，也不会占位，就像不存在一样。
水平居中
-
text-align:center
用于内联元素,inline-block元素或者文字，使用方法是为目标的父元素添加该样式。（可使用包裹器技巧）
e.g 想让一个<a>居中，可以用一个<p>包裹住它，然后给<p>加上一个text-align:center属性
-
margin: 0 auto
用于块级元素 - 直接调整
margin,padding
垂直居中
-
line-height=height
大多数情况下管用 - 直接调整
margin,padding
左右布局
-
float+clearfix
子元素一个float:left，一个float:right，且宽度各自50%，父级元素clearfix - 绝对定位
父级元素position: relative，子元素position: absolute，然后调整子元素的边距
左中右布局
-
float+clearfix
子元素一个float:left，一个float:right，中间元素会自适应，然后调整中间元素的边距即可。 - 绝对定位
父级元素position: relative，子元素position: absolute，然后调整子元素的边距（左边元素left: 0；中间按需求设置；右边元素right: 0）
知识点
- 内联元素的左右padding有用，上下padding没用（因为上下高度是由字体建议行高决定的）。加上display: inline-block就可以了。
- 包裹器wrapper：在xx元素外面写一个div命名为xx-wrapper，将其包裹起来。可以实现：
内联元素居中：包裹一个父元素，添加text-align样式
元素不好利用padding调整位置：包裹一个父元素，在父元素上添加padding
- 对块级元素设置inline-block，块级元素宽度会收缩
块级元素下方会产生空隙（解决方法vertical-align:top;）
