前端基礎面試題@CSS篇

時間 2019-11-07

標籤前端基礎面試 css 欄目快樂工作简体版

原文原文鏈接

隨筆

最近出去面了一次試。去以前信心滿滿，去以後灰頭土臉，由於連最簡單的「css居中方式有多少種」、「說說js數據類型」這種入門問題居然回答的支支吾吾，也怪不得面試官20分鐘就優雅的把我送了出來。
css

痛定思痛，總結了一些基礎面試題，望壯士你出門迎敵時，不要像我同樣尷尬……html

清除浮動方式

一、使用僞類。
也能夠在父級標籤最後添加一個div，div中的屬性同僞類。原理其實和僞類是同樣的，都是利用clear：both前端

.father :after {
	clear:both;
	content:"";
	display:block;
}
.father{
	zoom:1;//IE專有屬性，解決ie六、7浮動問題
}
複製代碼

二、父級標籤觸發BFC(下面有專門介紹)web

.father {
	overflow:auto;
	zoom:1;//IE專有屬性，解決ie六、7浮動問題
}
複製代碼

未知寬高的元素實現水平垂直居中

方法一：父元素dispaly:table,子元素display:cell-table。

優點：父元素能夠動態改變高度。
劣勢：table屬性容易形成屢次reflow,IE8如下不支持面試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法一</title>
</head>
<style>

.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>
複製代碼

方法二：利用空元素或僞類

下面代碼中的註釋部分爲替代after僞類的另外一種寫法，原理同樣

優勢：兼容性好
缺點：多出來個空元素、麻煩canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
    .wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        background: #92b922;
    }
    .test {
        background: #de3168;
        display: inline-block;
        color: #fff;
        padding: 20px;
    }
    .wrap:after {
        display: inline-block;
        content: '';
        width: 0px;
        height: 100%;
        vertical-align: middle;
    }
    /* .vamb{
        display: inline-block;
        width: 0px;
        height: 100%;
        vertical-align: middle;
    } */
    </style>
    <div class="wrap">
            <!-- <b class="vamb"></b> -->
        <div class="test">
            水平垂直居中了吧<br>
            兩行文字哦
        </div>
    </div>
</html>
複製代碼

方法三：絕對定位+transform

優勢：方便，支持webkit內核
缺點：transform兼容性差，IE9如下不支持api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
.parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
        <div class="child">hello world</div>
    </div>
</body>
</html>
複製代碼

方法4:flexbox佈局

優勢：方便
缺點：兼容性很差,IE支持不好bash

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
.parent4{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
	<div class="parent4">
        <div class="child">hello world</div>
    </div>
</body>
</html>
複製代碼

BFC

BFC(block formatting context)翻譯爲「塊級格式化上下文」，它會生成一個獨立的渲染區域(不影響外面的元素，同時也不受外面元素的影響)，它的生成有如下規則：session

內部的box會在垂直方向上一個接一個的放置
內部box在垂直方向上的距離由margin決定，同屬一個BFC內的相鄰box會發生margin重疊
每個內部box的左邊，與BFC的的左邊相接觸，即便存在浮動也是同樣
BFC的區域不會與float box發生重疊
計算BFC的高度時，浮動元素也參與計算(上面清除浮動的問題就是這個原理)

觸發BFC的條件：多線程

根元素
float屬性不爲none
position爲absolute或者fixed
display爲inline-block、table-cell、table-caption、flex、inline-flex
overflow不爲visible

前端精選文摘：BFC 神奇背後的原理這篇文章說的很清楚，也有相應的原理和例子，能夠仔細看看。

實現自適應兩列布局

方法一：右邊元素觸發BFC

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
    .father {
        background-color: lightblue;
    }

    .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }

    .right {
        overflow: auto;
        height: 500px;
        background-color: lightseagreen
    }
</style>

<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='right'>
            right
        </div>
    </div>
</body>

</html>
複製代碼

方法二：margin-left實現

侷限性：這種方法必須知道左側的寬度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
    .father {
        background-color: lightblue;
    }

    .left {
        width: 100px;
        float: left;
        background-color: red;
    }

    .right {
        margin-left: 100px;
        background-color: lightseagreen
    }
</style>

<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='right'>
            right
        </div>
    </div>
</body>

</html>
複製代碼

三列布局

flex

優勢：方便
缺點：仍是flex兼容性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
    .father {
        display: flex;
        height: 100%;
    }

    .left,
    .right {
        flex: 0 1 100px;
        background-color: red;
    }

    .middle {
        flex: 1;
        height: 100%;
        background-color: green;
    }
</style>
<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='middle'>middle</div>
        <div class='right'>center</div>
    </div>
</body>
</html>
複製代碼

負margin佈局(雙飛翼)

優勢：市面上使用最多的一個
缺點：麻煩，這是多年前淘寶的老技術了

<!DOCTYPE>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>聖盃佈局/雙飛翼佈局</title>
    <style>
        .mainWrap {
            width: 100%;
            float: left;
        }

        .main {
            margin: 0 120px;
        }

        .left,
        .right {
            float: left;
            width: 100px;
        }

        .left {
            margin-left: -100%;
        }

        .right {
            margin-left: -100px;
        }
    </style>
</head>

<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="mainWrap">
        <div class="main" style="background-color: lightcoral;">
            main
        </div>
    </div>
    <div class="left" style="background-color: orange;">
        left
    </div>
    <div class="right" style="background-color: lightsalmon;">
        right
    </div>
</div>

</html>
複製代碼