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

資訊專欄INFORMATION COLUMN

css常用布局

Cristalven / 3300人閱讀

摘要：二雙列布局一列固定寬度，另外一列自適應(yīng)寬度。如果先執(zhí)行，由于有左，就正好可以放的下注意使用后清除浮動(dòng)三三列布局兩側(cè)兩列固定寬度，中間列自適應(yīng)寬度。

一、單列布局

單列布局長(zhǎng)這個(gè)樣子，主要有兩種：普通單欄，通欄的單欄布局

1、普通單欄

比較簡(jiǎn)單，設(shè)置 定寬 + 水平居中即可




內(nèi)容

執(zhí)行結(jié)果鏈接描述
瀏覽器寬度超過(guò)960px時(shí)，外margin出現(xiàn)。

當(dāng)收縮瀏覽器寬度，小于960px時(shí)，margin為0，出現(xiàn)滾動(dòng)條。

2、通欄 




header




 content

執(zhí)行結(jié)果鏈接描述
在header 和footer上再包裹一層div，在外層的div上添加背景顏色，設(shè)置內(nèi)層layout上設(shè)置左右margin：auto，就出現(xiàn)了通欄的效果。實(shí)際上layout占據(jù)的位置是固定的，如下圖border框出的位置。

當(dāng)瀏覽器寬度收縮的時(shí)候，也會(huì)出現(xiàn)滾動(dòng)條。

二、雙列布局

一列固定寬度，另外一列自適應(yīng)寬度。通過(guò)float+margin實(shí)現(xiàn)

  #content:after{
      content: "";
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;
    }
    .main{
      margin-left: 210px;
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  
  

    
aside
 
    
    
content

執(zhí)行結(jié)果鏈接描述
1、最重要布局的時(shí)候浮動(dòng)元素要放在前面，要先放aside，再寫content。因?yàn)閏ontent是普通的塊級(jí)元素，如果先執(zhí)行content，就會(huì)占據(jù)一整行，aside就只能向下浮動(dòng)。
如果先執(zhí)行aside，由于有左margin，就正好可以放的下
2、注意使用后清除浮動(dòng)

三、三列布局

兩側(cè)兩列固定寬度，中間列自適應(yīng)寬度。通過(guò)設(shè)置aside 左右float+左右margin實(shí)現(xiàn)


   

  
aside

     
aside2

  
main

執(zhí)行結(jié)果：鏈接描述

四、水平等距排列 



  
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    • 
    
  • 8
    •

執(zhí)行結(jié)果鏈接描述
左右沒(méi)有margin

五、flex布局

關(guān)于flex這三篇文章，寫得比較好
Flex 布局教程：實(shí)例篇
Flex 布局教程：語(yǔ)法篇
深入理解 flex-grow & flex-shrink & flex-basis

六、圣杯布局 1、起因

三列布局中，一般兩邊是廣告，中間是實(shí)際內(nèi)容。要求中間內(nèi)容元素在 dom 元素次序中處于優(yōu)先位置。所以普通的三欄布局就用不了，必須要用更復(fù)雜的方式來(lái)實(shí)現(xiàn)。

2、原理（浮動(dòng)+負(fù)margin+絕對(duì)定位）

1、給main，aside，extra都設(shè)置為浮動(dòng)，main設(shè)置寬度為100%

2、設(shè)置aside負(fù)margin-left為100%（相當(dāng)于向左移動(dòng)一個(gè)父元素的寬度），將aside移動(dòng)到main的左邊

3、設(shè)置extra負(fù)margin-left為150px（extra的寬度），將extra移動(dòng)到main的右邊

4、為了避免main的內(nèi)容被extra和aside遮擋。給content設(shè)置左padding為100px，右padding為150px，給extra和aside騰出位置

5、最后使用position：relative，將extra和aside分別移動(dòng)到兩邊

3、遇到的坑

設(shè)置負(fù)margin和width為百分比，計(jì)算的基數(shù)都是父元素的寬度
負(fù)margin使用較難掌握，使用前可以看一下這篇負(fù)margin的原理的文章

  

  

    
main

    
aside

    
extra

執(zhí)行結(jié)果鏈接描述

七、雙飛翼布局（浮動(dòng)+左右margin+負(fù)margin）

demo
原理：雙飛翼的布局和圣杯是很相似的，不同的是雙飛翼在main內(nèi)部再嵌套了一層wrap。用wrap設(shè)置左右margin，代替content設(shè)置padding和絕對(duì)定位。



  

    

      
main

    

    
aside

    
extra

執(zhí)行結(jié)果

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

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

相關(guān)文章

  • CSS常用布局

    摘要：頭部主要內(nèi)容左邊欄右邊欄尾部顯示為頭部主要內(nèi)容左邊欄右邊欄尾部圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。 ====== 樣例代碼不能顯示，請(qǐng)看原文https://magicly.me/css-layout/ ====== 布局是CSS中一個(gè)很重要的部分，甚至我覺(jué)得是最重要也是最難的部分，其他諸如字體大小、顏色等等都是很容易的。最近總結(jié)一下使用過(guò)的CSS常...

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

  • 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

    摘要：布局涉及到的屬性常用屬性值此元素不會(huì)被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動(dòng)塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性 一直感覺(jué)自己對(duì)CSS的各個(gè)屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺(jué)自己知道，可是實(shí)際上自己并不是真的理解了...

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

  • CSS 常用布局在小程序中的應(yīng)用

    摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個(gè)基本概念定位浮動(dòng)外邊距操縱我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。具體實(shí)現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動(dòng)布局來(lái)實(shí)現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、外邊距操縱 我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。所以我們先來(lái)看看什么是正常的文檔流。 正常文...

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

  • CSS 常用布局在小程序中的應(yīng)用

    摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個(gè)基本概念定位浮動(dòng)外邊距操縱我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。具體實(shí)現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動(dòng)布局來(lái)實(shí)現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、外邊距操縱 我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來(lái)進(jìn)行的。所以我們先來(lái)看看什么是正常的文檔流。 正常文...

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

  • CSS常用布局簡(jiǎn)潔解決方案

    摘要：與常人的直覺(jué)不符的是，實(shí)際上表示視口寬度的，而不是。與類似，表示視口高度的。存在問(wèn)題它只適用于在視口中居中的場(chǎng)景基于的解決方案伸縮盒是專門針對(duì)這類需求所設(shè)計(jì)的。 相關(guān)基礎(chǔ)知識(shí) 1.內(nèi)部與外部尺寸模型：（w3c草案）親測(cè)google可支持。（http://w3.org/TR/css3-sizing ） 基于原有CSS尺寸特性，可以使CSS更容易描述內(nèi)容自適應(yīng)以及適應(yīng)固定上下文的盒模型： ...

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

  • JS / CSS 常用實(shí)戰(zhàn)代碼片段

    摘要：常用模式片段之摘要第一次看到這個(gè)字眼是在中，即。之后也見到一些別人的代碼里有，它和頁(yè)面的有什么關(guān)系，以及和有何淵源。以前都見過(guò)這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個(gè)完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質(zhì)...

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

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

0條評(píng)論

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