CSS布局小结

左右布局

1. 可使用float来实现，对左部分区域float:left，对右部分区域float:right，注意在其父元素上面添加clearfix

clearfix代码

.clearfix::after {
  content: ''; 
  display: block;
  clear: both;
}

2. 父元素用 position: relative相对定位，子元素用 position: absolute对父元素绝对定位，用 left 或 right 调整其左右位置

左中右布局

1. 用 float 属性使子元素浮动起来（注意父元素加clearfix），然后设置其中两个子元素的宽度，使第三个宽度自适应；也可以分别设置子元素的宽度，再用 margin 调整位置。
2. 父元素用 position: relative 相对定位，子元素用 position: absolute 绝对定位，根据需要用 left/right 调整其左右所在位置。

垂直居中

1. 内联元素垂直居中只要将父元素的height与line-height设置为一致即可实现
2. 块级元素垂直居中用 position实现

水平居中

1. 内联元素水平居中在父元素上加text-align: center 即可实现
2. 块级元素可通过设置 margin-left:auto; margin-right: auto;实现

一些使用小技巧

1. CSS 可以通过inherit的继承关系，使其继承父元素的定义
2. 若父元素高度固定，子元素高度可用height:100%;与父元素保持一致
3. vertical-align: top; 可解决距离上下边框上下距离不一样的问题
4. border调试大法： border: 1px solid red;
5. css搜索关键词：CSS tricks shape; css generator
6. 推荐文章：方方的css line height
   https://zhuanlan.zhihu.com/p/25808995