站長(zhǎng)資訊網(wǎng)
每天10道題，100天后，搞定所有前端面試的高頻知識(shí)點(diǎn)，加油?。。?，在看文章的同時(shí)，希望不要直接看答案，先思考一下自己會(huì)不會(huì)，如果會(huì)，自己的答案是什么？想過(guò)之后再與答案比對(duì)，是不是會(huì)更好一點(diǎn)，當(dāng)然如果你有比我更好的答案，歡迎評(píng)論區(qū)留言，一起探討技術(shù)之美。
面試官：css 如何實(shí)現(xiàn)左側(cè)固定 300px，右側(cè)自適應(yīng)的布局？
我：呃~，好的，可以采用flex布局，或者浮動(dòng)+BFC，整出代碼如下：
flex布局：
<style> *{margin: 0;padding: 0;} .container{ display: flex; } .left{ width: 300px; height: 100vh; background-color: #f00; } .main{ flex: 1; background-color: #ae5aca; } </style> <body> <div class="container"> <div class="left"></div> <div class="main"></div> </div> </body>
登錄后復(fù)制
浮動(dòng)+BFC：
<style> *{margin: 0;padding: 0;} .container { height: 100vh; } .left { float: left; width: 300px; height: 100%; background-color: #f00; } .main { height: 100%; background-color: #ae5aca; overflow: hidden; } </style> <body> <div class="container"> <div class="left"></div> <div class="main"></div> </div> </body>
登錄后復(fù)制
面試官：flex 布局中 align-content 與 align-items 有何區(qū)別？
我：呃~，它們都是作用于縱軸的元素，具體區(qū)別如下：
align-content：作用于縱軸多行元素，一行元素不起作用?！?/p>
