国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

hot_pot_Leo / 2959人閱讀

摘要：這個布局是最簡單的布局之一，但是網絡上大多是，而沒有認真解釋以及用新的特性實現。

這個布局是最簡單的布局之一，但是網絡上大多是copy，而沒有認真解釋以及用新的特性實現。下面就做一個新的概括.

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

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

  
右邊自適應1 右邊自適應2 右邊自適應3


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

demo展示

左邊float，觸發父元素寬度計算 入門寫法

html結構同上

.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，右邊使用負邊距 奇伎淫巧

這個技能要這樣get：

父元素清除浮動

A元素寬100%不變，margin-left:-100px后，外部的文檔流認為以邊框為界，A減少了100px，而A是右浮動，也就是左邊開始有100px空白可填充的文檔流空間；

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

B元素左浮動，且是后面的dom節點，正好占據并且覆蓋A空出來的空間


  

    

      右邊自適應1 右邊自適應2 右邊自適應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布局后，子元素默認就是彈性布局，除非你確定子元素的彈性方式
ps：這個方法完美之處還在于，垂直方向也自動填充，輕松實現了等高布局！！
html同第一個demo

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

demo展示

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

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

相關文章

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

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

    includecmath 評論0 收藏0

  • CSS布局——左定寬度右自適應寬度并且等高布局

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

    dreamtecher 評論0 收藏0

  • CSS 布局經典問題初步整理

    摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理 標簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

    Amos 評論0 收藏0

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區別在哪一雙飛翼布局可以看到，我們在里面又加了一個內容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都...

    Clect 評論0 收藏0

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區別在哪一雙飛翼布局可以看到，我們在里面又加了一個內容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都...

    468122151 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<