前端的CSS布局是一個(gè)基本的技術(shù)之一，前端基本布局可以分為普通流和非普通流。普通流就是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定，顯示出來(lái)就是從左往右，從上到下。非普通流就是需要依靠css布局的三兄弟——position、display、float。它們?nèi)叩年P(guān)系是相互獨(dú)立又在暗中影響。
相信玩過(guò)《我的世界》游戲的朋友都知道，在《我的世界》之中一切都是有方塊組成，無(wú)窮的方塊組成無(wú)窮的世界。而在前端的世界之中也可以認(rèn)為所有一切都是由方塊的盒子組成的。這就是盒子模型，其有content、padding、border、margin組成，而一個(gè)個(gè)盒子的擺放位置就構(gòu)成了CSS布局。
首先來(lái)看看display，它有四個(gè)常用的屬性：none、block、inline、inline-block。
它們分別表示：
none：元素不會(huì)顯示，也不占據(jù)文檔空間，如同不存在。
block：元素顯示為塊級(jí)元素，此元素默認(rèn)寬度100%，獨(dú)占一行。
inline：元素顯示為內(nèi)聯(lián)元素，左右margin、padding可設(shè)置，上下則不可。
line-block：元素顯示為行內(nèi)塊元素，表現(xiàn)和inline元素一樣，不過(guò)可以設(shè)置其上下margin、padding。
position 常用屬性：
inhert：為此值時(shí)，從父元素繼承 position屬性
static：默認(rèn)值。元素出現(xiàn)在正常流中，忽略top、left、right、bottom和 z-index 聲明。
relative：生成相對(duì)定位的元素，相對(duì)于元素本身正常位置定位，元素占據(jù)的位置還是原來(lái)正常狀態(tài)的位置
absolute：生成絕對(duì)定位的元素，相對(duì)于static 定位以外的第一個(gè)祖先元素進(jìn)行定位，元素不占據(jù)文檔位置
fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位，同樣不占據(jù)文章位置
而float這個(gè)屬性就更有意思了，浮動(dòng)的元素根據(jù)其值左右移動(dòng)，直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。浮動(dòng)元素不在普通文檔流之中，文檔中的普通流元素表現(xiàn)的就像浮動(dòng)元素不存在一樣。
當(dāng)了解了三者各自的特性以后，我們就可以在文檔布局之中使用，但是有個(gè)問(wèn)題，這是寒冬大神提出的一個(gè)題目：
當(dāng)position、display、float的特性相互疊加后會(huì)發(fā)生什么？
在jackyWHJ前輩文章中找到一個(gè)圖片，其直觀說(shuō)明它們?nèi)叩年P(guān)系：
總體來(lái)說(shuō)
對(duì)于元素首先判斷其存在不，也就是“display: none”是不是存在，如果存在則直接結(jié)束，元素的position和float都不起作用。
當(dāng)元素確實(shí)存在時(shí)，“position: absolute”和“position: fixed”的優(yōu)先級(jí)最高，元素有這兩個(gè)值時(shí)，float屬性不起作用，大部分元素的display也會(huì)轉(zhuǎn)換為塊級(jí)元素。
當(dāng)元素?fù)碛衒loat且不為none時(shí)，元素會(huì)浮動(dòng)并且轉(zhuǎn)換為塊級(jí)元素。
當(dāng)元素是根元素時(shí)，元素也會(huì)轉(zhuǎn)換為塊級(jí)元素。
如果排一個(gè)優(yōu)先級(jí)：
display: none > position: absolute\fixed > float > root
因此，網(wǎng)頁(yè)的布局實(shí)際就是這三兄弟作用或相互影響作用的結(jié)果。
同樣，布局中應(yīng)用得多的還有負(fù)margin，并且對(duì)布局有影響的還有一個(gè)重要的特性 margin collapse，這個(gè)在下一篇文章中總結(jié)。
