Web前端面試題小集

來自：前端打小怪升級筆記，作者：spademan

segmentfault.com/a/1190000008322096

一、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800），請寫出大概的css程式碼。

1.使用flex

//html

class=‘box’>

class=‘left’> 

class=‘right’>

//css

.box {

    width: 400px;

    height: 100px;

    display: flex;

    flex-direction: row;

    align-items: center;

    border: 1px solid #c3c3c3;

}

.left {

    flex-basis：100px;

    -webkit-flex-basis: 100px;

    /* Safari 6.1+ */

    background-color: red;

    height: 100%;

}

.right {

    background-color: blue;

    flex-grow: 1;

}

2.浮動佈局

id=“left”>Left sidebar

id=“content”>Main Content