手记

2018-05-23 清除浮动、左边固定右边自适应、水平垂直居中

第三篇博客.png

清除浮动、左边宽度固定右边自适应、水平垂直居中这三个知识点是我们经常在开发过程中需要用到的。不但经常用到,而且经常出现在面试题当中,所以对这三者进行知识总结很有必要。

1.清除浮动

提问:为什么要清除浮动了?
答案:如果一个父元素的所有子元素都设置了浮动,那么父元素的高度就出现了“塌陷”现象,本来预期的是想要通过子元素的高度来撑起父元素的高度,意味着子元素的浮动设置使子元素跑到父元素外面了,这个时候问题就出现了······

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>高度塌陷</title>

    <style type="text/css">
        .container{            width: 500px;            border:1px solid #e8e8e8;
        }        .left{            float: left;            width: 200px;            height: 200px;            background-color: green;
        }        .right{            float: right;            width: 200px;            height: 300px;            background-color: blue;
        }    </style></head><body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div></body> </html>

父元素高度塌陷如下:


问题.png

1.1 使用伪元素(父元素添加伪元素)

.container:after{    display: block;    clear: both;    content:"";
}

1.2 overflow:hidden(父元素添加overflow:hidden)

.container{    width: 500px;    border:1px solid #e8e8e8;    overflow: hidden;
}

1.3 在子元素最后添加额外元素(额外元素添加clear:both)

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>高度塌陷</title>

    <style type="text/css">
        .container{            width: 500px;            border:1px solid #e8e8e8;
        }        .left{            float: left;            width: 200px;            height: 200px;            background-color: green;
        }        .right{            float: right;            width: 200px;            height: 300px;            background-color: blue;
        }        .clear{            clear: both;
        }    </style></head><body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div></body> </html>

1.4 为父元素设置高度(不明智的方式,要求子元素的高度相同)

.container{    width: 500px;    height: 200px;    border:1px solid #e8e8e8;
}.left{    float: left;    width: 200px;    height: 200px;        background-color: green;
}.right{    float: right;    width: 200px;    height: 200px;    background-color: blue;
}

1.5 overflow:auto(为父元素设置overflow:auto)

.container{    width:100%;    border:1px solid #e8e8e8;    overflow: auto;
}

1.6 float(为父元素设置浮动属性,不建议,因为页面中将会有越来越多的浮动元素)

.container{    width: 500px;    border:1px solid #e8e8e8;    float: left;
}

1.7 display:table(将父元素display的方式设置为table)

.container{    width: 500px;    border:1px solid #e8e8e8;    display: table;
}

2.左边固定右边自适应

提问:什么是左边固定右边自适应?
回答:左边固定右边自适应是一种经常在网页中采用的布局,要求是左边往往是导航栏,右边的宽度是需要根据屏幕尺寸来进行自适应的,左右区域的高度可以不同。

2.1 margin-left(右区域设置margin-left,左区域float:left)

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>左边长度固定右边自适应-margin-left</title>
    <style>
        .box1{            float: left;            width: 100px;            height: 100px;            background-color: red;
        }        .box2{            height: 100px;            background-color: blue;            margin-left: 100px;
        }    </style></head><body>
    <div class="box1"></div>
    <div class="box2"></div></body></html>

2.2 overflow:auto(右区域设置overflow:auto,左区域float:left)

.box1{    float: left;    width: 100px;    height: 100px;    background-color: red;
}.box2{    overflow: auto;    height: 100px;    background-color: blue;
}

2.3 添加父元素(父元素设置display:table,左右区域都设置为display:table-cell)

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>左边长度固定右边自适应-display:table</title>
    <style>
        .box{            width: 100%;            display: table;
        }        .box1{            width: 100px;            height: 100px;            display: table-cell;            background-color: red;
        }        .box2{            height: 100px;            display: table-cell;            background-color: blue;
        }    </style></head><body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div></body></html>

2.4 display:flex(父元素设置display:flex,左区域设置float:left,右区域设置flex:1)

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>左边长度固定右边自适应-display:flex</title>
    <style>
        .box{            flex: 1;            display: flex;
        }        .box1{            float: left;            width: 100px;            height: 100px;            background-color: red;
        }        .box2{            height: 100px;            flex: 1;            background-color: blue;
        }    </style></head><body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div></body></html>

3.水平垂直居中

提问:什么是水平垂直居中?
回答:网页设计当中往往讲究对称美,于是水平垂直居中的应用场景就非常多,子div相对于父div水平垂直居中,又或者内联元素的居中。

3.1 不定宽高的三种方式

3.1.1 margin:auto

<!DOCTYPE html><html><head>
    <title>水平垂直居中</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container{            width: 200px;            height: 200px;            position: relative;            border:1px solid #e8e8e8;
        }        .inner{            width: 100px;            height: 100px;            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;            margin: auto;            background-color: green;
        }    </style></head><body>
    <div class="container">
        <div class="inner"></div>
    </div></body></html>

3.1.2 transfrom:translate(50%,50%)(子元素添加该属性)

.inner{    width: 100px;    height: 100px;    position: absolute;    transform: translate(50%,50%);    background-color: green;
}

3.1.3 display:flex(父元素添加display:flex)

<!DOCTYPE html><html><head>
    <title>水平垂直居中</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container{            width: 200px;            height: 200px;            border:1px solid #e8e8e8;            position: relative;            display: flex;            justify-content: center;            align-items: center;
        }        .inner{            width: 100px;            height: 100px;            background-color: green;
        }    </style></head><body>
    <div class="container">
        <div class="inner"></div>
    </div></body></html>

3.2 定宽高(margin-left:-width/2,margin-top:-width/2,top:50%,left:50%)

<!DOCTYPE html><html><head>
    <title>水平垂直居中</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container{            width: 200px;            height: 200px;            border:1px solid #e8e8e8;            position: relative;
        }        .inner{            width: 100px;            height: 100px;            background-color: green;            position: absolute;            top:50%;            left: 50%;            margin-left: -50px;            margin-top: -50px;
        }    </style></head><body>
    <div class="container">
        <div class="inner"></div>
    </div></body></html>

希望大家可以动手实践,毕竟实践才是检验真理的唯一标准。



作者:瑾瑜爱上猫
链接:https://www.jianshu.com/p/bc5fe663d413

0人推荐
随时随地看视频
慕课网APP