- 查看Demo
盒模型
- 一張圖看懂盒模型
getImage.jpg
- 默認(rèn)情況下唤冈，一個盒子寬度會由邊框長度（border）建椰，內(nèi)邊距（padding）以及寬度（width）決定揣云，而當(dāng)我們把box-sizing設(shè)置為border-box以后虽惭，一個盒子的寬度敌蚜，就會只由寬度（width）決定了
浮動 float
- 為什么使用float？
- 我們知道笼蛛，如果在不使用定位的情況下，元素默認(rèn)定位
static蛉鹿，即所有文檔都在文檔流以內(nèi)滨砍，由上到下進(jìn)行排列，而當(dāng)我們想要創(chuàng)造出多列布局的時候妖异，就必須要由元素脫離文檔流進(jìn)行排列惋戏，此時可以想到的要么改變其position，要么則用float他膳，在css3屬性當(dāng)中响逢，新增添的flex屬性同樣可以達(dá)到多列布局的效果。 - 有時候我們需要一個元素脫離文檔流棕孙，然后把它安放在容器的左端或者右端舔亭，并且其他文本和行內(nèi)元素圍繞它安放。
- 可以取的值包括
left,right,none
- 我們知道笼蛛，如果在不使用定位的情況下，元素默認(rèn)定位
- 浮動元素如何定位蟀俊？
- 當(dāng)一個元素浮動之后钦铺，它會被移出正常的文檔流，然后向左或者向右平移肢预，一直平移到碰到了所處的容器的邊框矛洞，或者碰到了另外一個浮動的元素。
- 如果由多個元素浮動烫映，例如向左沼本，那么它們會從左到右依次排開噩峦，直到填滿一整行，然后往下一行填抽兆。
- 清除浮動
- 什么是清除浮動识补？為什么要清除？我們知道當(dāng)一個元素脫離文檔流后郊丛，往往下一個元素會與之重疊李请，這個時候就需要加一點css屬性來達(dá)到清除浮動的效果
-
clear:both會使得元素不再與浮動元素重疊，但是如果不符合塊格式化上下文block formatting context的話厉熟，如包含多個浮動屬性导盅，就會使元素出現(xiàn)浮動元素的下方，但是假如我們的目的時創(chuàng)造多列布局揍瑟，則應(yīng)該使用另外一種屬性overflow:auto或者overflow:hidden白翻，利用這個可以達(dá)到容器伸展的效果 - 除此之外，我在網(wǎng)易云課堂學(xué)習(xí)的時候绢片，由另外一種方法可以清除浮動滤馍，利用的時在元素后面的
:after創(chuàng)造一個不可見的內(nèi)容只為一個小點的容器來清除浮動.clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
創(chuàng)建多列布局的效果
-
利用BFC原理（即塊級格式化上下文）
- 原理是，先渲染浮動在左右兩邊的block元素底循，最后再渲染中間的block元素巢株，并設(shè)置為
overflow:hidden使得可以順利撐開自適應(yīng)并且插入其中。 -
html部分
getImage.png -
css部分
getImage-1.png
- 原理是，先渲染浮動在左右兩邊的block元素底循，最后再渲染中間的block元素巢株，并設(shè)置為
-
雙飛翼布局
- 雙飛翼布局主要利用了浮動熙涤、負(fù)邊距阁苞、相對定位三個布局屬性，使三列布局就像小鳥一樣祠挫，擁有中間的身體和兩側(cè)的翅膀那槽，并且瀏覽器兼容性非常好，帶IE6等舔。
-
首先有如下所示布局
getImage-2.png -
首先我們將中間元素放在文檔流最前面優(yōu)先渲染骚灸，然后使其向左浮動，并設(shè)置 width 為 100%
getImage-3.png -
此時中間元素?fù)螡M整個頁面慌植，然后給小鳥加上雙翼甚牲，將左右兩列元素均設(shè)為左浮動，然后通過調(diào)整負(fù)邊距將其定位在各自的位置上
getImage-4.png -
此時會發(fā)現(xiàn)涤浇，中間元素的雖然撐開了鳖藕，但是會和左右兩邊重疊，那怎么辦呢只锭？只需要在中間裹上一層元素就可以解決這個問題了著恩，完成以后，調(diào)整左右邊距便可以達(dá)到我們想要的效果。
getImage-4
-
flex布局
- flex可以用來制作彈性布局喉誊，方法很簡單邀摆，在主容器設(shè)置
display:flex，在需要自適應(yīng)的部分依比例將flex值設(shè)置為1伍茄，2栋盹，3等整數(shù)即可，具體demo可以查看MDN - 缺點時兼容性不太好
- flex可以用來制作彈性布局喉誊，方法很簡單邀摆，在主容器設(shè)置
