常见前端开发面试题（css部分）

2019-11-11 本文已影响0人党云龙

如何实现三分布局

先来个简单一些的，比如说，左右固定中间自适应的：

中央自适应布局

实现这个布局的方法有很多，比如，一个父级div的paddingleft和right就是这两个float的div的大小，通过float浮动来实现。

再比如，通过flex布局，主轴横向，然后左右两个div宽度固定，中间的div设置flex:1即可。

可是，实战中我们通常遇到的是这样的布局：

常用后台框架布局

上下各有一条固定，然后中间左侧固定，右边自适应。

你会发现，这些东西都来源于真实的项目框架。考察就是你如何实现这样的布局。

最好的方法就是通过flex布局实现，这里稍微绕个弯，你需要嵌套一下flex，外层是垂直主轴，内层是横向的主轴。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html,body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            #box {
                width: 100%;
                height: 100%;
                background: lightblue;
                display: flex;
                flex-direction: column ;
            }
            .top {
                width: 100%;
                background: red;
                height: 30px;
            }
            .main {
                width: 100%;
                display: flex;
                background: blueviolet;
                flex: 1;
            }
            .left {
                width: 100px;
                height: 100%;
                background: green;
            }
            .right {
                flex: 1;
                background: yellow;
                height: 100%;
            }
            .bottom {
                height: 30px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="top"></div>
            <div class="main">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="bottom"></div>
        </div>
    </body>
</html>

css过渡动画如何实现

过渡的写法是transition，例子：

transition:all 0.5s linear 1s;

这个东西需要配合hove等伪类去执行。比如说，你再一个div上鼠标悬停以后，当变化成hover中的样式时，就会通过transition去执行。

如何实现垂直居中

实现垂直居，常见的有四种方法：
1.通过inline-block居中，这种方法需要把你两个按着的元素都转化为行内块元素。注意这个时候，你的行高对元素是有影响的。

display: inline-block;
vertical-align: middle;

2.通过flex布局居中。
3.通过table-call的方式居中。
4.通过absolute绝对定位去居中，这个方法非常不推荐，因为他不适合去做一些自适应的布局。当你的字体随着媒体大小变化的时候，这个布局有可能被破坏。

你如何解决移动端页面自动缩放

在页面中使用rem布局就可以解决问题。
这里我使用的是淘宝lib-flexible 解决方案：
需要你在页面中注入一段js

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

它有一个换算公式，就是比如说，给你的是750的设计图还是640的设计图。

例如你的设计图宽度是640px的，然后你的logo是130px的
那么rem 就是 130/64 =2.03rem。基准就是设计图宽度除以 10

如何实现媒体查询

为什么需要媒体查询？让我们rem也不好解决问题的时候。
比如说，在iphone4和5上面，有一些文件太长了，就算你使用rem也放不下。
这个时候，你可能需要给不同的机型做一个区别的对待。

媒体查询主要是通过@media完成的。

请看例子:

/*iphone5*/
@media only screen and (max-height: 460px) and (max-width: 320px){
    .inv-phone-btn2 {
       bottom: 20%;
    }
}
/*iphone6 iphone7*/
@media only screen and (min-height: 559px) and (min-width: 375px) {
    .inv-phone-btn2 {
       bottom: 20%;
    }
}
/*三星s6 note5*/
@media only screen and (min-height: 604px) and (min-width:412px){
    .inv-phone-btn2 {
       bottom: 20.5%;
    }
}
/*小米 */
@media only screen and (max-height: 514px) and (max-width:360px){
    .inv-phone-btn2 {
       bottom: 19.5%;
    }
}
/*联想 */
@media only screen and (max-height: 512px) and (max-width:360px){
    .inv-phone-btn2 {
       bottom: 19.5%;
    }
}
/*华为 */
@media only screen and (min-height: 568px) and (max-height: 650px) and (max-width:360px){
    .inv-phone-btn2 {
       bottom: 22%;
    }
}
/*ipad*/
@media only screen and (min-width: 768px) and (min-height: 960px){
    .inv-phone-btn2 {
       bottom: 18.5%;
    }
}

你可以发现，就是在@media only screen and后面限制了一些条件做出来的。然后通过里面的样式去覆盖原来的样式，就这么简单。