CSS阶段总结
CSS布局之左右布局与左中右布局
方法:为子元素设置浮动,然后在其父元素上使用clearfix类来清除浮动。代码示例:
html部分:
<div class="parent clearfix">
<div class="child">a</div>
<div class="child">b</div>
<div class="child">c</div>
</div>
CSS部分:
.child{
float: left;
}
.clearfix::after {
display: block;
content: '';
clear: both;
}
水平居中
子元素为内联元素、单个块状及多级块状元素布局方案不同,具体总结如下:
- 内联元素:对父元素设置
text-align: center;
- 单个块状元素:对子元素设置
margin: 0 auto;
- 多个块状元素:有三种方式
a、子元素全部设置为display: inline-block;
,父元素设置为text-align: center;
b、flex布局,父元素display: flex; justify-content: center;
c、如果是在多行各自居中,直接给子元素设置margin: 0 auto;
垂直居中
子元素为单行内联、多行内联及块状元素布局方案不同,具体总结如下:
- 单行内联元素:父元素高度一定,设置
line-height
等于height
- 多行内联元素:父元素设置:
display: table-cell; vertical-align: middle;
-
块状元素:1、固定高度的块级元素:通过绝对定位元素距离顶部50%,并设置
``` 2、未知高度的块级元素:借助CSS3中的`transform`属性向Y轴反向偏移50%的方法来实现 ```margin-top
为向上偏移元素高度的一半
一些小技巧
- 合理使用伪元素
- a标签去掉其默认样式时,颜色可设置为继承父元素
a{color:inherit;}
- 合理使用
max-width
属性