CSS的一些常见技巧总结
2018-12-30 本文已影响7人
孙炎_
1.左右布局
页面中常见的布局就是左右布局。
可以通过float元素的left或者right属性将元素左右浮动，之后将浮动元素的父元素加上一个类clearfix，清除两侧浮动。这是一个套路写法：
.clearfix::after {
content: '';
display: block;
clear: both;
}
还可以通过position属性实现左右布局。常见的如将position属性设置为absolute，然后将该元素的父元素的position属性设置为relative；再设置该元素的left或者right属性为0，也可以实现左右布局。如下：
.parent{
position:relative;
}
.leftChild{
position:absolute;
left:0;
top:0;
}
.rightChild{
position:absolute;
left:200px;
top:0;
}
2.左中右布局
仍然是通过float元素实现，比如将一个列表ol中的li标签元素左浮动，然后给ol标签加一个父元素如div，然后将就可以给ol标签的display属性改为inline-block；之后给div标签加一个属性text-align:center;就可以将浮动元素实现居中布局，结合1就可以实现左中右布局。如下：
.parents {
text-align: center;
}
.parent {
display: inline-block;
}
.child {
float: left;
}
当然，通过position属性实现左中右布局会更加方便，只需要将left或者right属性设置为50%即可。
3.水平居中
块级元素的水平居中如下，注意不要忘记设置块级元素的width属性。
div {
width:200px;
margin:0 auto;
}
内联元素的水平居中设置其父元素的text-align属性为center即可。
4.垂直居中
1.内联元素垂直居中
将上下padding设置为相同即可
.link {
padding-top: 30px;
padding-bottom: 30px;
}
2.块级元素垂直居中
- 知道确定的高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
- 高度无法确定，只需要在设置top之后，自身相对于Y轴负方向移动50%即可。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
- 还可以使用flexbox，将会特别的简单。
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
5.用css画三角形
- 首先将元素内容区宽高设置为0，然后将边框设置为透明色，最终根据需要设置需要显示的颜色，设置三角形的朝向。
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
本文参考资料：
