css面试题

Posted samfung

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css面试题相关的知识,希望对你有一定的参考价值。

水平垂直居中的几种方法

水平居中

1、如果是行内元素,只需在父元素设置 text-align: center; 即可。

2、块级元素,只需设置 margin: 0 auto; 即可。
如下元素结构:

<div id="wrap">
    <div id="box">hello world</div>
</div>

3、absolute + magin
定位位置为 left: 50%; 然后 margin-left: -50px; 向左偏移元素宽度的一半。
缺点:要知道元素的宽度

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

4、absolute + translate
跟上面方法差不多,用 transform: translateX(-50%); 代替 margin-left,这样就不需要知道元素的宽度了。
缺点:transform 的兼容性(ie10)

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

5、absolute + margin auto
元素定位 left: 0; right: 0; margin: 0 auto; 即可。

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

6、flex
弹性布局什么的最喜欢了。
缺点:flex 兼容性(ie11)

#wrap{
    display: flex;
    justify-content: center;
}

垂直居中

垂直居中跟水平居中有很多相似的方法。

1、如果是单行文本,设置 line-height 即可。

2、absolute + magin
定位位置为 top: 50%; 然后 margin-top: -50px; 向上偏移元素高度的一半。
缺点:要知道元素的高度

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

3、absolute + translate
跟上面方法差不多,用 transform: translateY(-50%); 代替 margin-top,这样就不需要知道元素的高度了。
缺点:transform 的兼容性(ie10)

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

4、absolute + margin auto
元素定位 top: 0; bottom: 0; margin: auto 0; 即可。

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

5、display: table-cell
在父元素设置 display: table-cell; 将普通元素变成 table 元素,再设置 vertical-align: middle; 垂直居中。

#wrap{
    display: table-cell;
    vertical-align: middle;
}

6、flex
缺点:flex 兼容性(ie11)

#wrap{
    display: flex;
    align-items: center;
}

参考文章

以上是关于css面试题的主要内容,如果未能解决你的问题,请参考以下文章

CSS面试题

前端高频面试题 CSS篇

Java进阶之光!2021必看-Java高级面试题总结

css面试题汇总 (持续更新)

css面试题汇总 (持续更新)

经验总结:Java高级工程师面试题-字节跳动,成功跳槽阿里!