成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS相關(guān)面試題——三欄等高布局

Taste / 3098人閱讀

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

題目

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

解題 step1

常規(guī)拿到這個(gè)面試題，首先想到的是三個(gè)盒子左浮動(dòng)右浮動(dòng)，然后中間盒子給個(gè)左右外邊距，防止內(nèi)部元素被浮動(dòng)元素覆蓋。但是這樣只是實(shí)現(xiàn)了基本的三列布局。

代碼如下：




    
    
    
    Document
    


    

        
left

        
right

        

            1
            

            2
            

            3
            

            4
            

            5

效果如下所示：

step2

乍一看實(shí)現(xiàn)了三列布局，但是題目要求等高，這個(gè)可就麻煩了。常規(guī)的css，非table布局很難解決這個(gè)問題。于是乎只能利用一些奇淫巧技。代碼改動(dòng)如下:

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

實(shí)現(xiàn)了等高效果。當(dāng)時(shí)我是記得可以利用負(fù)邊距實(shí)現(xiàn)這個(gè)奇淫巧技的，但是筆試紙上寫的css寫的對(duì)不對(duì)忘記了。

回顧（原理探究）

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

展開

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

flex實(shí)現(xiàn)的列布局 



    
    
    
    Document
    


    

        

            left
        

        

            center

            123
        

        

            right

要點(diǎn)就是父容器設(shè)置為flex容器，子元素會(huì)自動(dòng)變?yōu)閒lex項(xiàng)目。這時(shí)候通過給center設(shè)置flex:1，讓其撐滿剩余空間。

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

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

疑問

這里只對(duì)center的值設(shè)置了flex:1，那left,right,center的flex默認(rèn)值分別展開是什么呢？

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

結(jié)語

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

參考鏈接

阮一峰的flex布局講解

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54737.html

相關(guān)文章

  • CSS相關(guān)面試題——三欄等高布局

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

    fsmStudy 評(píng)論0 收藏0

  • CSS中的負(fù)邊距

    摘要：之后仔細(xì)的百度了一下，發(fā)現(xiàn)了這么一個(gè)叫做內(nèi)外補(bǔ)丁負(fù)值法的東西。在這個(gè)解決方案中，又涉及到了傳說中的負(fù)。深入研究之后又發(fā)現(xiàn)了圣杯布局雙飛翼布局等很多示例，確實(shí)要好好研究負(fù)邊距這個(gè)東西了。相關(guān)推薦那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距 2015-04-22 時(shí)候?qū)懙睦衔模驗(yàn)橄Ｍ盟阅昧顺鰜怼?那天被一個(gè)同學(xué)問了一個(gè)問題，三列的div，要求父div的高度和三個(gè)div的高度都和三個(gè)中字?jǐn)?shù)...

    cocopeak 評(píng)論0 收藏0

  • CSS布局——左定寬度右自適應(yīng)寬度并且等高布局

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

    dreamtecher 評(píng)論0 收藏0

  • 面試寶典

    摘要：有談?wù)劽嬖嚺c面試題對(duì)于前端面試的一些看法。動(dòng)態(tài)規(guī)劃算法的思想及實(shí)現(xiàn)方法幫大家理清動(dòng)態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個(gè)方面。極客學(xué)院前端練習(xí)題道練習(xí)題，面試季練練手。 由數(shù)據(jù)綁定和排序引入的幾個(gè) JavaScript 知識(shí)點(diǎn) 在 JavaScript 的數(shù)據(jù)綁定和做簡單的表格排序中遇到的幾個(gè)知識(shí)點(diǎn) [[JS 基礎(chǔ)...

    neu 評(píng)論0 收藏0

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

    FuisonDesign 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<