CSS相關面試題——三欄等高布局

Taste 發布于2019-08-02 16:08 / 3087人閱讀

摘要：題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應。代碼如下效果如下所示乍一看實現了三列布局，但是題目要求等高，這個可就麻煩了。

題目

最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應。要求三欄的高度隨最高的一欄展示

解題 step1

常規拿到這個面試題，首先想到的是三個盒子左浮動右浮動，然后中間盒子給個左右外邊距，防止內部元素被浮動元素覆蓋。但是這樣只是實現了基本的三列布局。

代碼如下：

效果如下所示：

step2

乍一看實現了三列布局，但是題目要求等高，這個可就麻煩了。常規的css，非table布局很難解決這個問題。于是乎只能利用一些奇淫巧技。代碼改動如下:

同樣的html片段，這次再看下效果：

實現了等高效果。當時我是記得可以利用負邊距實現這個奇淫巧技的，但是筆試紙上寫的css寫的對不對忘記了。

回顧（原理探究）

這里原理暫且不寫，感興趣的小伙伴可以查詢下負邊距相關的資料。

展開

在跟面試官聊了以后，其實面試官是想考察我對flex的使用。那么如果用flex該如何實現這種三列布局呢？

flex實現的列布局

要點就是父容器設置為flex容器，子元素會自動變為flex項目。這時候通過給center設置flex:1，讓其撐滿剩余空間。

這里面試官繼續問了: flex是三個屬性的縮寫，那你知道是哪三個屬性嗎？
這里直接說答案為：[ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

其中flex-grow規定了對flex項目對剩余空間的分配比例(剩余空間多的話)
flex-shrink規定了容器空間不夠時，容器項目要被壓縮的比例。
flex-basic一般指項目占據主軸的空間，比如200px;

疑問

這里只對center的值設置了flex:1，那left,right,center的flex默認值分別展開是什么呢？

這里通過F12審查可以得到結果:
.left與.right =>
flex-basic:auto(寬200px);flex-grow:0(不占剩余空間);flex-shrink:1(縮小比例占1份)
.center => flex-basic(0%);flex-grow:1(left與right都為0，所以它占據了全部的剩余空間);flex-shrink:1(縮小比例占1份)
因為當前空間足夠，所以這里flex-shrink沒有體現。

結語

大概與這道題相關的css知識有這么多，如果是你，能做到哪一步呢？

參考鏈接

阮一峰的flex布局講解

云服務器 GPU云服務器三欄布局 html5 三欄布局面試題棧面試題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54737.html

CSS相關面試題——三欄等高布局

摘要：題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應。代碼如下效果如下所示乍一看實現了三列布局，但是題目要求等高，這個可就麻煩了。題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應。要求三欄的高度隨最高的一欄展示解題 step1 常規拿到這個面試題，首先想到的是三個盒子左浮動右浮動...

fsmStudy 2019-08-30 15:56 評論0 收藏0
CSS中的負邊距

摘要：之后仔細的百度了一下，發現了這么一個叫做內外補丁負值法的東西。在這個解決方案中，又涉及到了傳說中的負。深入研究之后又發現了圣杯布局雙飛翼布局等很多示例，確實要好好研究負邊距這個東西了。相關推薦那些年，奇妙的圣杯與雙飛翼，還有負邊距 2015-04-22 時候寫的老文，因為希望引用所以拿了出來。那天被一個同學問了一個問題，三列的div，要求父div的高度和三個div的高度都和三個中字數...

cocopeak 2019-08-29 10:57 評論0 收藏0
CSS布局——左定寬度右自適應寬度并且等高布局

摘要：今天有位朋友一早從妙味課堂轉來一個有關于布局的面試題，需要解決，花了點時間寫了幾個放上來與大家分享受。今天有位朋友一早從妙味課堂轉來一個有關于CSS布局的面試題，需要解決，花了點時間寫了幾個DEMO,放上來與大家分享受。那么我們在看DEMO之前一起先來看看這個面試題的具體要求吧：左側固定寬，右側自適應屏幕寬；左右兩列，等高布局；左右兩列要求有最小高度，例如：200px;（當內容超出...

dreamtecher 2019-08-29 12:43 評論0 收藏0
面試寶典

摘要：有談談面試與面試題對于前端面試的一些看法。動態規劃算法的思想及實現方法幫大家理清動態規劃的解決思路以及原理方法前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。極客學院前端練習題道練習題，面試季練練手。由數據綁定和排序引入的幾個 JavaScript 知識點在 JavaScript 的數據綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎...

neu 2019-08-29 14:00 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0