CSS常见面试题(持续更新)

div高度永远是宽度的一半

<h1>高度永远为宽度一半</h1>
<div class="height-half-width-wrap">
    <div class="outer">
        <div class="inner">
            <div class="box">hello</div>
        </div>
    </div>
</div>

.height-half-width-wrap .outer {
    width: 400px;
    height: 100%;
    background: blue;
    margin: 0 auto;

    display: flex;
    align-items: center;
}

.height-half-width-wrap .inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    background: red;
}

.height-half-width-wrap .box {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

• margin-top、margin-bottom、padding-top、padding-bottom的百分数值是相对于父元素内容区的宽度计算的。
• 将height设置为 0，这是为了将元素高度完全交给padding负责。
• 元素的height为 0，导致该元素里面再有子元素的时候，就无法正常设置高度。所以我们需要用到position: absolute。
• 据W3C文档，当子元素使用absolute定位时，宽高设定百分比的参考量是其第一个非static祖先元素的padding box宽高，即width/height + padding

大小为父元素宽度一半的正方形

<div class="half-square-wrap">
    <div class="outer">
        <div class="inner"></div>
    </div>
</div>

.half-square-wrap .outer {
    width: 400px;
    height: 600px;
    background: red;
}

.half-square-wrap .inner {
    width: 50%;
    padding-bottom: 50%;
    background: blue;
}

• padding-bottom的百分数值是相对于父元素内容区的宽度计算的

实现单行文字、多行文字的垂直居中

1.利用line-height和vertical-align

<div class="word-vertically-center1">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center1 div {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #000;
    line-height: 200px;
}

.word-vertically-center1 span {
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
}

2.利用display:table-cell

<div class="word-vertically-center2">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center2 div {
    display: table-cell;
    width: 200px;
    height:150px;
    border:1px solid blue;
    vertical-align: middle;
}

3.利用flex布局align-items:center;

<div class="word-vertically-center3">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center3 div{
    float: left;
    width: