左右布局
- 可使用
float来实现，对左部分区域float:left，对右部分区域float:right，注意在其父元素上面添加clearfix
clearfix代码
.clearfix::after {
content: '';
display: block;
clear: both;
}
- 父元素用
position: relative相对定位，子元素用position: absolute对父元素绝对定位，用 left 或 right 调整其左右位置
左中右布局
- 用
float属性使子元素浮动起来（注意父元素加clearfix），然后设置其中两个子元素的宽度，使第三个宽度自适应；也可以分别设置子元素的宽度，再用margin调整位置。 - 父元素用
position: relative相对定位，子元素用position: absolute绝对定位，根据需要用left/right调整其左右所在位置。
垂直居中
- 内联元素垂直居中只要将父元素的
height与line-height设置为一致即可实现 - 块级元素垂直居中用
position实现
水平居中
- 内联元素水平居中在父元素上加
text-align: center即可实现 - 块级元素可通过设置
margin-left:auto; margin-right: auto;实现
一些使用小技巧
- CSS 可以通过
inherit的继承关系，使其继承父元素的定义 - 若父元素高度固定，子元素高度可用
height:100%;与父元素保持一致 -
vertical-align: top;可解决距离上下边框上下距离不一样的问题 - border调试大法：
border: 1px solid red; - css搜索关键词：CSS tricks shape; css generator
- 推荐文章：方方的css line height
https://zhuanlan.zhihu.com/p/25808995
