Css3解决塌陷和元素居中的代码
2021-03-23 本文已影响0人
老哥深蓝
重置样式表-去除默认样式
重置浏览器默认样式,可以使用reset.css和normalize.css。
reset.css:直接去除浏览器所有的默认样式。
normalize.css:统一浏览器的所有样式。
这两个一般只用一个即可,放在所有样式表最前面,由于normalize. css还是带有默认样式,一般都会用reset.css。
元素垂直居中
只要把height和line-height两个属性设置一样的值,就可以实现。
{
height:10px;
line-height:10px;
}
解决高度塌陷和外边距重叠
在float是出现高度塌陷,可以使用如下伪元素代码解决。
<style>
.clearfix::before,//选中前面
.clearfix::after//选中后面
{
content:'';
display:table;
clear:both;
}
</style>
元素水平垂直居中
<style>
.父元素{
position:relative;//绝对定位
}
.子元素{
left:0;
right:0;
top:0;
bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
postion:absolute;
}
</style>