美文网首页
Css3解决塌陷和元素居中的代码

Css3解决塌陷和元素居中的代码

作者: 老哥深蓝 | 来源:发表于2021-03-23 17:41 被阅读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>
    

    相关文章

      网友评论

          本文标题:Css3解决塌陷和元素居中的代码

          本文链接:https://www.haomeiwen.com/subject/xmnfhltx.html