面試題總結（二）

時間 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基礎的屬性，方法等要掌握很是牢固，這樣在面試的時候，碰到面試題就不會因基礎而丟失機會。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。