面试题总结（二）

时间 2019-11-11

标签面试总结栏目快乐工作繁體版

原文原文链接

此次总结四个个遇到的CSS有关的面试题。CSS是做为网页效果关键的东西，因此我的认为CSS的掌握能看出一个初学者的基础功底。css

1、使用css画三角形(底边为10px)html

div{web

witdth:0; height:0;面试

border-left: 10px solid transparent;浏览器

border-right:10px solid transparent;spa

border-bottom: 10px solid;orm

}htm

这个题目的关键在于border-left 与 border-right，这两个边框必要的属性为 transparent属性，若是不加上这个属性的话左右两边的边框会显示出来，但要是不写这个边框的话，又没法造成三角形，这是一个关键，考察的就是初学者对transparent属性的应用。it

2、使用css写出二栏（第一栏100px，第二栏自适应）io

#left {

position: fixed; left: 0; top: 0;

height: 100vh; width: 100px;

/* background: blue; *//* 解开此处注释来查看效果 */

}

#right {

position: fixed; left: 100px; top: 0;

height: 100vh; width: calc(100vw - 100px);

/* 若是浏览器不支持CSS3 calc方法，可使用js计算宽度 */

/* background: red; *//* 解开此处注释来查看效果 */

}

这个考察的就很显而易见了。可是二栏，几栏这样的模式也是常常出现的考点。

3、使用两个、五个div写出十字架形状

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*方法一：五个div实现*/
        /*div{*/
        /*height: 50px; width: 50px;  */
        /*}*/
        /*.d1{ position: fixed; left: 50%; top:50% ; transform:  translateX(-50%) translateY(-50%);}*/
        /*.d2{position: absolute; top:-100%;}*/
        /*.d3{position: absolute ; bottom:-100%}*/
        /*.d4{position: absolute; left: -100%}*/
        /*.d5{position: absolute; right: -100%}*/
        /*方法二：两个div实现*/
        #heng,#shu{left:50%;top:50%;position:absolute; background-color:#f00;}
        #shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}
        #heng{width:150px;height:50px;margin-left:-75px;margin-top:-25px;background-color:#f00;}
    </style>
</head>
<body>
<!--方法一：-->
<!--<div class="d1">-->
    <!--<div class="d2"></div>-->
    <!--<div class="d3"></div>-->
    <!--<div class="d4"></div>-->
    <!--<div class="d5"></div>-->
<!--</div>-->
<!--方法二：-->
<div id="heng"></div>
<div id="shu"></div>
</body>
</html>
这个考察的就是对于定位的考察，CSS最多见最基础的定位。

4、div垂直居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Div垂直居中方法总结</title>
    <style>
        .testbg{
            position: fixed;
            /*position: absolute;    方法二*/
            top: 50%;
            left: 50%;
            background-color: #000;
            width:100px;
            height: 100px;
            /*margin: -50px 0 0 -50px;   使得margin的值为宽高的一半且为负值*/
            -webkit-transform: translateX(-50%) translateY(-50%);
        }
    </style>
</head>
<body>
<div class="testbg">
</div>
</body>
</html>

css考察初学者的并非很深，都是基础中的基础，因此我的认为最为一个刚出来的小菜鸟，不须要你能用css写出多么炫酷的特效，可是对于css基础的属性，方法等要掌握很是牢固，这样在面试的时候，碰到面试题就不会因基础而丢失机会。