CSS布局

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;）

转载于:https://juejin.im/post/5c3b0adbe51d45653e3c6a96