智一面gtalent-星之码前端css清除浮动常用方式及实现元素的垂直水平居中方法

581 05-11

清除浮动常用方式总结

HTML代码如下：

<div id="wrap">
    <div id="inner"></div>
</div>

CSS 清除浮动方案

（1）给浮动的父级元素加高度，缺点：浮动元素高度不确定的时候不适用

#wrap{
    border: 1px solid;
    height: 300px;
}
#inner{
    float: left;
    width: 200px;
    height: 200px;
    background: pink;
}

（2）开启BFC：让浮动的子元素库撑开父级的高度

#wrap{
    border: 1px solid;
    overflow: hidden; /*触发bfc*/
}
#inner{
    float: left;
    width: 200px;
    height: 200px;
    background: pink;
}

（3）br 标签清除浮动

<div id="wrap">
    <div id="inner"></div>
    <br clear="all" />
</div>

（4）空标签清除浮动

<div id="wrap">
    <div id="inner"></div>
    <div style="clear: both;"></div>
</div>

（5）伪元素 + 开启haslayout—终极解决方案

/*开启haslayout-兼容 IE6，7*/
.clearfix {
    *zoom: 1;
}

/* 万能清除法 after伪类 清浮动 -主流方法*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height:0;
    overflow:hidden;
    visibility:hidden;
}

纯CSS实现元素的垂直水平居中(5种)

1、已知高度的元素水平垂直居中方案一

原理：绝对定位+margin（反向偏移利用绝对定位的50% + 自身元素宽高的一半来解决）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>已知高度的元素水平垂直居中方案</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                position: relative;
                width: 400px;
                height: 600px;
                background: pink;
                margin: 0 auto;
            }

            #inner{
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
                width: 100px;
                height: 100px;
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">test</div>
        </div>
    </body>
</html>

2、已知高度的元素水平垂直居中方案二

原理：绝对定位+margin：auto（利用绝对定位盒子模型的特性解决-高宽有内容撑开）
水平方向上：left + right + width + padding + margin = 包含块padding区域的尺寸
直方向上：top + bottom + height + padding + margin = 包含块padding区域的尺寸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>已知高度的元素水平垂直居中方案</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                position: relative;
                width: 400px;
                height: 600px;
                background: pink;
                margin: 0 auto;
            }

            #inner{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 100px;
                height: 100px;
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">
                    test<br />
                    test<br />
                    test<br />
                    test<br />
            </div>
        </div>
    </body>
</html>

3、未知高度的元素水平垂直居中方案一

原理：绝对定位+transform反向偏移（利用绝对定位加CSS3的translate3d来解决）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>未知高度的元素水平垂直居中方案</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                position: relative;
                width: 400px;
                height: 600px;
                background: pink;
                margin: 0 auto;
            }

            #inner{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate3d(-50%,-50%,0);
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
            </div>
        </div>
    </body>
</html>

4、未知高度的元素水平垂直居中方案二

原理：display：tabel

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>未知高度的元素水平垂直居中方案</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                display: table;
                width: 400px;
                height: 600px;
                margin: 0 auto;
            }

            /* 加一层table-cell包裹 */
            #subwrap {
                display: table-cell;
                vertical-align: middle;
                background: pink;
            }

            #inner{
                margin: auto;
                height: auto;
                max-height: 50%;
                max-width: 50%;
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="subwrap">
                <div id="inner">
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                    testtesttesttesttesttesttest<br />
                </div>
            </div>
        </div>
    </body>
</html>

5、未知高度的元素水平垂直居中方案三

原理：display: inline-block

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>未知高度的元素水平垂直居中方案</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 400px;
                height: 600px;
                margin: 0 auto;
                background: pink;
                text-align: center;
            }

            #wrap:after {
                content: '';
                display: inline-block;
                vertical-align: middle;
                height: 100%;
            }

            #inner{
                display: inline-block;
                vertical-align: middle;
                width: auto;
                height: auto;
                max-width: 90%;
                max-height: 90%;
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">
                <h3>完全居中方案五：</h3>
                testtesttesttesttesttesttest<br />
                testtesttesttesttesttesttest<br />
                testtesttesttesttesttesttest<br />
                testtesttesttesttesttesttest<br />
                testtesttesttesttesttesttest<br />
                testtesttesttesttesttesttest<br />
                testtesttesttesttesttesttest<br />
            </div>
        </div>
    </body>
</html>

————————————————

智一面|前端面试必备练习题

标签： CSS