歡迎光臨
每天分享高質量文章

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


赞(0)

分享創造快樂