• 查看Demo

盒模型

• 一張圖看懂盒模型

getImage.jpg

• 默認(rèn)情況下，一個(gè)盒子寬度會(huì)由邊框長(zhǎng)度（border），內(nèi)邊距（padding）以及寬度（width）決定，而當(dāng)我們把box-sizing設(shè)置為border-box以后，一個(gè)盒子的寬度，就會(huì)只由寬度（width）決定了

浮動(dòng) float

• 為什么使用float？
  • 我們知道，如果在不使用定位的情況下，元素默認(rèn)定位static，即所有文檔都在文檔流以內(nèi)，由上到下進(jìn)行排列，而當(dāng)我們想要?jiǎng)?chuàng)造出多列布局的時(shí)候，就必須要由元素脫離文檔流進(jìn)行排列，此時(shí)可以想到的要么改變其position，要么則用float，在css3屬性當(dāng)中，新增添的flex屬性同樣可以達(dá)到多列布局的效果。
  • 有時(shí)候我們需要一個(gè)元素脫離文檔流，然后把它安放在容器的左端或者右端，并且其他文本和行內(nèi)元素圍繞它安放。
  • 可以取的值包括left,right,none
• 浮動(dòng)元素如何定位？
  • 當(dāng)一個(gè)元素浮動(dòng)之后，它會(huì)被移出正常的文檔流，然后向左或者向右平移，一直平移到碰到了所處的容器的邊框，或者碰到了另外一個(gè)浮動(dòng)的元素。
  • 如果由多個(gè)元素浮動(dòng)，例如向左，那么它們會(huì)從左到右依次排開，直到填滿一整行，然后往下一行填。
• 清除浮動(dòng)
  • 什么是清除浮動(dòng)？為什么要清除？我們知道當(dāng)一個(gè)元素脫離文檔流后，往往下一個(gè)元素會(huì)與之重疊，這個(gè)時(shí)候就需要加一點(diǎn)css屬性來(lái)達(dá)到清除浮動(dòng)的效果
  • clear:both會(huì)使得元素不再與浮動(dòng)元素重疊，但是如果不符合塊格式化上下文block formatting context的話，如包含多個(gè)浮動(dòng)屬性，就會(huì)使元素出現(xiàn)浮動(dòng)元素的下方，但是假如我們的目的時(shí)創(chuàng)造多列布局，則應(yīng)該使用另外一種屬性overflow:auto或者overflow:hidden，利用這個(gè)可以達(dá)到容器伸展的效果
  • 除此之外，我在網(wǎng)易云課堂學(xué)習(xí)的時(shí)候，由另外一種方法可以清除浮動(dòng)，利用的時(shí)在元素后面的:after創(chuàng)造一個(gè)不可見的內(nèi)容只為一個(gè)小點(diǎn)的容器來(lái)清除浮動(dòng).clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}

創(chuàng)建多列布局的效果

• 利用BFC原理（即塊級(jí)格式化上下文）

  • 原理是，先渲染浮動(dòng)在左右兩邊的block元素，最后再渲染中間的block元素，并設(shè)置為overflow:hidden使得可以順利撐開自適應(yīng)并且插入其中。

  • html部分

    
    
    getImage.png

  • css部分

    
    
    getImage-1.png

• 雙飛翼布局

  • 雙飛翼布局主要利用了浮動(dòng)、負(fù)邊距、相對(duì)定位三個(gè)布局屬性，使三列布局就像小鳥一樣，擁有中間的身體和兩側(cè)的翅膀，并且瀏覽器兼容性非常好，帶IE6。

  • 首先有如下所示布局

    
    
    getImage-2.png

  • 首先我們將中間元素放在文檔流最前面優(yōu)先渲染，然后使其向左浮動(dòng)，并設(shè)置 width 為 100%

    
    
    getImage-3.png

  • 此時(shí)中間元素?fù)螡M整個(gè)頁(yè)面，然后給小鳥加上雙翼，將左右兩列元素均設(shè)為左浮動(dòng)，然后通過(guò)調(diào)整負(fù)邊距將其定位在各自的位置上

    
    
    getImage-4.png

  • 此時(shí)會(huì)發(fā)現(xiàn)，中間元素的雖然撐開了，但是會(huì)和左右兩邊重疊，那怎么辦呢？只需要在中間裹上一層元素就可以解決這個(gè)問(wèn)題了，完成以后，調(diào)整左右邊距便可以達(dá)到我們想要的效果。

    
    
    getImage-4

• flex布局

  • flex可以用來(lái)制作彈性布局，方法很簡(jiǎn)單，在主容器設(shè)置display:flex，在需要自適應(yīng)的部分依比例將flex值設(shè)置為1，2，3等整數(shù)即可，具體demo可以查看MDN
  • 缺點(diǎn)時(shí)兼容性不太好

文章參考

• MDN-float
• cnblog