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

資訊專欄INFORMATION COLUMN

三欄布局只知道圣杯、雙飛翼，最終評(píng)級(jí)是……F

KavenFan / 3470人閱讀

摘要：三欄布局，面試與工作中的常見布局。分左中右三部分，其中左右寬度已知，中間寬度自適應(yīng)。根據(jù)不同的順序與處理，這里寫下了五類布局方式。用了它，內(nèi)外部元素渲染互不影響，就不會(huì)蔓延到兩側(cè)了。網(wǎng)格布局網(wǎng)格布局好了，后續(xù)再來說一下各自的優(yōu)缺點(diǎn)。

三欄布局，面試與工作中的常見布局。分左中右三部分，其中左右寬度已知，中間寬度自適應(yīng)。
根據(jù)不同的DOM順序與CSS處理，這里寫下了五類布局方式。

一、浮動(dòng)布局 1 圣杯布局

L：“我問你，你就是我的Master嗎？”
……



  
    
    圣杯布局
    
  
  
    

      

        
圣杯布局
2 雙飛翼布局 


  
    
    雙飛翼布局
    
  
  
    

      

        

          
雙飛翼布局
3 浮動(dòng)布局 


  
    
    Float布局
    
  
  
    

      

      

      

        
中間部分的內(nèi)容

這樣會(huì)有個(gè)問題，就是center高度大于兩側(cè)的時(shí)候，會(huì)duang的蔓延到兩側(cè)，像這樣：

相應(yīng)的，為了讓頁面成為我們需要的樣子，引入了兩個(gè)解決方案。

BFC修正

L：“我問你，你這里是不是有什么問題？(指著腦袋)”
……
BFC(Block Fromatting Context),直譯就是塊級(jí)格式化上下文。
先知其然吧，概念差不多又需要整理一篇文章。用了它，內(nèi)外部元素渲染互不影響，center就不會(huì)蔓延到兩側(cè)了。
具體代碼：

.center{
  overflow:hidden;
  background-color: gray;
}

Margin修正

.center{
  margin: 0 200px;
  background-color: gray;
}
二、Flex布局 


  
    
    Flex布局
    
  
  
    

      

      

        
Flex布局
三、絕對(duì)定位布局 


  
    
    絕對(duì)定位布局
    
  
  
    

      

      

        
絕對(duì)定位布局
四、Table布局

現(xiàn)在很少人用的table標(biāo)簽



  
    
    Table布局
    
  
  
    

      

        
        Table布局

display:table-cell與上面一個(gè)意思



  
    
    table-cell
    
  
  
    

      

      

        
table-cell
五、網(wǎng)格布局

如果說flex用于一維，grid就是用于二維的。



  
    
    網(wǎng)格布局
    
  
  
    

      

      

        
網(wǎng)格布局

好了，后續(xù)再來說一下各自的優(yōu)缺點(diǎn)。

你一贊，我一贊，開開心心去吃飯~

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

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

相關(guān)文章

  • 三欄布局只知道圣杯、雙飛翼，最終評(píng)級(jí)是……F

    摘要：三欄布局，面試與工作中的常見布局。分左中右三部分，其中左右寬度已知，中間寬度自適應(yīng)。根據(jù)不同的順序與處理，這里寫下了五類布局方式。用了它，內(nèi)外部元素渲染互不影響，就不會(huì)蔓延到兩側(cè)了。網(wǎng)格布局網(wǎng)格布局好了，后續(xù)再來說一下各自的優(yōu)缺點(diǎn)。 三欄布局，面試與工作中的常見布局。分左中右三部分，其中左右寬度已知，中間寬度自適應(yīng)。根據(jù)不同的DOM順序與CSS處理，這里寫下了五類布局方式。 一、浮動(dòng)布...

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

  • CSS三欄布局的四種方法

    摘要：浮動(dòng)代碼如下注意元素次序代碼如下左欄左浮動(dòng)中間自適應(yīng)右欄右浮動(dòng)這種方式代碼足夠簡(jiǎn)潔與高效，也容易理解后記四種方法其實(shí)只有圣杯布局和雙飛翼布局較難理解，但實(shí)際上理解了圣杯布局，雙飛翼布局自然就理解了。 前言 總括： 不管是三欄布局還是兩欄布局都是我們?cè)谄綍r(shí)項(xiàng)目里經(jīng)常使用的，也許你不知道什么事三欄布局什么是兩欄布局但實(shí)際已經(jīng)在用，或許你知道三欄布局的一種或兩種方法，但實(shí)際操作中也只會(huì)依賴那...

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

  • CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對(duì)位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

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

  • CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對(duì)位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

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

  • CSS 圣杯布局 / 雙飛翼布局的實(shí)現(xiàn)

    摘要：先讓它們浮動(dòng)，并給和一個(gè)固定寬度，寬度，清除浮動(dòng)流，結(jié)果變成上面這樣。工作的越久，有些基礎(chǔ)知識(shí)我們可能就逐漸淡忘了，今天我們來回顧一下css的圣杯布局和雙飛翼布局， 這兩個(gè)名詞你可能不熟， 那三欄布局你肯定就非常熟悉了， 就是兩邊定寬， 中間自適應(yīng) 的 布局? 1 ， 圣杯布局? !--三欄布局-- header 三欄布局 /header div div cent...

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

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

0條評(píng)論

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