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>
上一篇下一篇

猜你喜欢

热点阅读