CSS 布局技巧

2019-09-13 212 阅读1分钟

左右布局

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

友情链接：