、
。
塊級(jí)元素默認(rèn)會(huì)充滿整個(gè)屏幕，具有自適應(yīng)性，而內(nèi)聯(lián)元素默認(rèn)則是水平排列。
你可以想象為塊級(jí)元素就想是水流一樣充滿容器，而內(nèi)聯(lián)元素就是漂浮在水里按照從左到右排列的物體。
在項(xiàng)目中會(huì)經(jīng)常碰到 display：block 這個(gè)屬性。但注意，它與塊級(jí)元素不是同一個(gè)東西。display：table，也屬于塊級(jí)元素。
失去流動(dòng)性
到這里你應(yīng)該明確了流的特性，其實(shí)很多人都知道「文檔流」這個(gè)概念，但卻沒有好好的去利用，從而給自己增加了一些不必要的麻煩。
比如以前我會(huì)寫出這樣的 CSS：
span {
display: block;
width: 100%;
}如果明白流的特性的話，其實(shí) width: 100%; 這個(gè)屬性是多余的，因?yàn)閴K級(jí)元素在流布局中默認(rèn)是自動(dòng)充滿容器的。
你是否也中槍寫過這種 CSS ？歡迎在評(píng)論區(qū)說出你的問題。
但如果僅僅只是多了一條屬性，其實(shí)也就是增加了一行代碼顯得不那么簡潔而已，可事情總是沒有那么簡單。
一旦你給元素添加了寬度（width）屬性，它就會(huì)失去流動(dòng)性，即便是它的值為 100%，也是會(huì)失去。
對(duì)，你沒有看錯(cuò)，只要有了寬度屬性，它就會(huì)失去了它最牛逼的流動(dòng)性。這樣就變的毫無價(jià)值。
比如開頭中導(dǎo)航案例，如果給導(dǎo)航加入一些邊距。就會(huì)出現(xiàn)不好的效果。
.nav {
display: block;
padding: 10px; //添加的邊距
width: 100%;
border-bottom: 1px solid #000;
color: #fff;
}而如果我們把寬度屬性去掉，就會(huì)得到完美的展示效果。
.nav {
display: block;
padding: 10px;
border-bottom: 1px solid #000;
color: #fff;
}可能你之前并沒有意識(shí)到，加入寬度屬性帶來的危害。
但當(dāng)你看到這篇文章之后，你應(yīng)該警惕寬度給流動(dòng)性帶來的危害，盡量少用寬度，甚至是「無寬度」。
在此之前我相信很多伙伴在項(xiàng)目匯總遇到過超出寬度的情況，但很少有人去探究，所以很多人都會(huì)發(fā)揮他特有的計(jì)算能力，然后寫出如下代碼。
.nav {
display: block;
padding: 10px;
width: 180px; // 200px - 10px*2
border-bottom: 1px solid #000;
color: #fff;
}貌似也實(shí)現(xiàn)了該有的功能，不過這種缺點(diǎn)我們顯而易見，就是太過固定，任何一點(diǎn)的改動(dòng)都需要你重新計(jì)算。
可能有人會(huì)說，兄die，我的計(jì)算能力很驚人，你管的著嗎，好吧這，波算我輸。
那為什么加了寬度屬性會(huì)超出，而不加寬度屬性就可以了呢？
原來是因?yàn)椋?dāng)元素不設(shè)置寬度屬性時(shí)或者是 width：auto ，元素的margin、border、padding 可以自動(dòng)分配空間。
一旦，我們?cè)O(shè)置了固定的寬度屬性，就算是100%，它就會(huì)根據(jù) CSS 的盒模型進(jìn)行計(jì)算。從而失去了自動(dòng)分配空間的流動(dòng)性。
至于如何計(jì)算的細(xì)節(jié)，因?yàn)楹心Ｐ偷牟煌?，所以寬度的作用就不同，它包含的東西也就不一樣。具體不在多說。
兄die，這時(shí)候知道「無寬度」有多牛逼了吧。
因?yàn)檫@里我提到了盒模型，你會(huì)想到把上面的案例，改變下盒模型不就行了嗎？比如我們這么做：
.nav {
display: block;
padding: 10px;
width: 100%;
border-bottom: 1px solid #000;
box-sizing: border-box; //改變盒模型
color: #fff;
}確實(shí)在這個(gè)案例中是可以這么用的，但是如果想實(shí)現(xiàn)案例一的水平有間距排列問題，就有點(diǎn)力不從心了。
由于 CSS 盒模型，是不計(jì)算 margin 的，水平排列可以很容易實(shí)現(xiàn)，但是想要有相同間距，就比較難以實(shí)現(xiàn)。
這個(gè)時(shí)候你就可以嘗試?yán)昧鞯奶匦?，來很好的?shí)現(xiàn)這個(gè)方案。
寬度分離
這時(shí)候我們可以利用流的特性，進(jìn)行寬度分離。
內(nèi)容
重慶分公司
重慶分公司
