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

資訊專欄INFORMATION COLUMN

常見面試題之左邊固定，右邊自適應(yīng)布局(四種方法：負(fù)邊距、flex)

hot_pot_Leo / 2974人閱讀

摘要：這個(gè)布局是最簡(jiǎn)單的布局之一，但是網(wǎng)絡(luò)上大多是，而沒有認(rèn)真解釋以及用新的特性實(shí)現(xiàn)。

這個(gè)布局是最簡(jiǎn)單的布局之一，但是網(wǎng)絡(luò)上大多是copy，而沒有認(rèn)真解釋以及用新的特性實(shí)現(xiàn)。下面就做一個(gè)新的概括.

要求： 左邊固定100px, 右邊自適應(yīng)
左position:absolute, 右margin-left 入門寫法 

  
左邊固定1  左邊固定2 左邊固定3

  
右邊自適應(yīng)1 右邊自適應(yīng)2 右邊自適應(yīng)3


//父元素相對(duì)定位，作為子元素絕對(duì)定位的參考
.parent{display:relative; background:#ffffd }
.l-child{position:absolute; width:100px;background:#bbb }
.r-child{margin-left:100px;background:#999 }

demo展示

左邊f(xié)loat，觸發(fā)父元素寬度計(jì)算 入門寫法

html結(jié)構(gòu)同上

.parent{background:#ffffd;overflow:hidden; }
.l-child{float:left;width:100px;background:#bbb;z-index:10000; }
.r-child{margin-left:100px;background:#999;}

demo展示

左右float，右邊使用負(fù)邊距 奇伎淫巧

這個(gè)技能要這樣get：

父元素清除浮動(dòng)

A元素寬100%不變，margin-left:-100px后，外部的文檔流認(rèn)為以邊框?yàn)榻?，A減少了100px，而A是右浮動(dòng)，也就是左邊開始有100px空白可填充的文檔流空間；

子元素A1是認(rèn)為父元素大小沒有變化，margin-left:100px后，正好等于父元素在外部空出來的文檔流空間。

B元素左浮動(dòng)，且是后面的dom節(jié)點(diǎn)，正好占據(jù)并且覆蓋A空出來的空間


  

    

      右邊自適應(yīng)1 右邊自適應(yīng)2 右邊自適應(yīng)3
    

  

  

    左邊固定1  左邊固定2 左邊固定3
  


.parent{background:#ffffd;overflow:hidden; }
.l-box{float:left;width:100px;background:#bbb;}
.r-box{float:right;width:100%;margin-left:-100px;background:#999;}
.r-content{margin-left:100px;}

demo展示

flex布局 高大尚

父元素flex布局后，子元素默認(rèn)就是彈性布局，除非你確定子元素的彈性方式
ps：這個(gè)方法完美之處還在于，垂直方向也自動(dòng)填充，輕松實(shí)現(xiàn)了等高布局??！
html同第一個(gè)demo

.parent{display:flex; background:#ffffd }
.l-child{flex:0 0 100px; background:#bbb }
.r-child{background:#999}

demo展示

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

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

相關(guān)文章

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到?？梢酝ㄟ^設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

    includecmath 評(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,放上來與大家分享受。那么我們?cè)诳碊EMO之前一起先來看看這個(gè)面試題的具體要求吧： 左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬；左右兩列，等高布局；左右兩列要求有最小高度，例如：200px;（當(dāng)內(nèi)容超出...

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

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

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

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁面的形象表達(dá)。一起來看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問的問題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗(yàn)嘛~ 事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都...

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

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁面的形象表達(dá)。一起來看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問的問題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗(yàn)嘛~ 事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都...

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

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

0條評(píng)論

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