左右布局
float:left和float:right实现靠左靠右布局,或者使用两个float:left靠左,再用padding/margin调整间距。
.left {
float: left;
}
.right {
float: right;
}
左中右布局
用float:left或float:right使所有元素一字排,再用padding/margin调整间距。
水平居中
- 通过margin: 0 auto; text-align: center实现CSS水平居中。
- 通过position:absolute实现CSS水平居中。
- 通过display:inline-block和text-align:center实现CSS水平居中。
点击详见。
垂直居中
- 通过line-height实现CSS垂直居中。(设置子元素的line-height值等于父元素的height,该方法适用于子元素为单行文本)。
- 通过verticle-align:middle实现CSS垂直居中。(元素要是display:inline-block)
点击详见 。
其他小技巧
使用float的元素父级块元素要class="clearfix",以去除一些bug。
.clearfix::after{
content: '';
display: block;
clear: both;
}
css布局属性主要有:
display:inline|block|inline-block
float:left|right|none
position:absolute|fixed|relative