何為“流”
有人稱流是文檔流亦或者是正常留痰滋，我簡(jiǎn)稱為“流”摘能，它在css中引導(dǎo)元素的排列和定位的一條看不見(jiàn)的“水流”。
塊級(jí)元素一定是獨(dú)占一行即寡，并且依次向下排列
內(nèi)聯(lián)元素從左往右在一行中排列徊哑，需要換行的時(shí)候就會(huì)按照“之”換行。
何為“塊級(jí)元素”
“塊級(jí)元素”對(duì)應(yīng)的英文是 block-level element聪富，常見(jiàn)的塊級(jí)元素有<div>莺丑、<li>和<table>
等。需要注意是墩蔓，“塊級(jí)元素”和“display 為 block 的元素”不是一個(gè)概念梢莽。例如， <li>元
素默認(rèn)的 display 值是 list-item奸披， <table>元素默認(rèn)的 display 值是table昏名，但是它們均是“塊級(jí)元素”，因?yàn)樗鼈兌挤蠅K級(jí)元素的基本特征阵面，也就是一個(gè)水平流上只能單獨(dú)顯示一個(gè)元素轻局，多個(gè)塊級(jí)元素則換行顯示洪鸭。
正是由于“塊級(jí)元素”具有換行特性，因此理論上它都可以配合 clear 屬性來(lái)清除浮動(dòng)帶來(lái)的影響仑扑。例如：
.clear:after {
content: '';
display: block; // 也可以是 table览爵，或者是 list-item
clear: both;
}
在實(shí)際開(kāi)發(fā)當(dāng)中，常用的就是block與table镇饮，不會(huì)使用list-item蜓竹。
- list-item會(huì)出現(xiàn)項(xiàng)目符號(hào)，需要額外多寫一行代碼
list-style:none;聲明储藐。 - IE瀏覽器不支持俱济，兼容性不夠好。
"with:auto"
width 的默認(rèn)值是 auto钙勃。
（1） 充分利用可用空間蛛碌。比方說(shuō)， <div>肺缕、<p>這些元素的寬度默認(rèn)是 100%于父級(jí)容器的左医。
（2） 收縮與包裹。典型代表就是浮動(dòng)同木、絕對(duì)定位、 inline-block 元素或 table 元素跛十。
（3） 收縮到最小彤路。 這個(gè)最容易出現(xiàn)在 table-layout 為 auto 的表格中
如上：每一列的空間不夠，文字能斷就斷芥映，中文隨便斷洲尊，英文不能斷。
（4） 超出容器限制奈偏。除非有明確的 width 相關(guān)設(shè)置坞嘀，否則上面 3 種情況尺寸都不會(huì)主動(dòng)超過(guò)父級(jí)容器寬度的，但是存在一些特殊情況惊来。
外部尺寸
<div>默認(rèn)寬度 100%顯示丽涩，是“外部尺寸”，其余全部是“內(nèi)部尺寸”裁蚁。而這唯一的“外部尺寸”矢渊，是“流”的精髓所在。
外部尺寸和流體特性
一個(gè)垂直導(dǎo)航：
a {
display: block;
width: 100%;
}
<a>元素默認(rèn) diplay 是 inline枉证，所以矮男，設(shè)置 display:block 使其塊狀化絕對(duì)沒(méi)有問(wèn)題，但后面的 width:100%就沒(méi)有任何出現(xiàn)的必要了室谚。
寫CSS一定要按照“鑫三無(wú)準(zhǔn)則”毡鉴，即“無(wú)寬度崔泵，無(wú)圖片，無(wú)浮動(dòng)”猪瞬。為何要“無(wú)寬度”管削？
原因很簡(jiǎn)單，表現(xiàn)為“外部尺寸”的塊級(jí)元素一旦設(shè)置了寬度撑螺，流動(dòng)性就丟失了含思。
流動(dòng)性，并不是看上去的寬度 100%顯示這么簡(jiǎn)單甘晤，而是一種 margin/border/padding和 content 內(nèi)容區(qū)域自動(dòng)分配水平空間的機(jī)制含潘。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.width {
width: 100%;
}
.nav {
background-color: #cd0000;
}
.nav-a {
display: block;
margin: 0 10px;
padding: 9px 10px;
border-bottom: 1px solid #b70000;
border-top: 1px solid #de3636;
color: #fff;
}
.nav-a:first-child { border-top: 0; }
.nav-a + .nav-a + .nav-a { border-bottom: 0;}
</style>
<body>
<h4>無(wú)寬度，借助流動(dòng)性</h4>
<div class="nav">
<a href="" class="nav-a">導(dǎo)航1</a>
<a href="" class="nav-a">導(dǎo)航2</a>
<a href="" class="nav-a">導(dǎo)航3</a>
</div>
<h4>width:100%</h4>
<div class="nav">
<a href="" class="nav-a width">導(dǎo)航1</a>
<a href="" class="nav-a width">導(dǎo)航2</a>
<a href="" class="nav-a width">導(dǎo)航3</a>
</div>
</body>
</html>
這兩個(gè)唯一的區(qū)別就是前者沒(méi)有指定寬度线婚，后者指定了width:100% 結(jié)果就是后者的尺寸超過(guò)了外部的容器遏弱。即“流動(dòng)性丟失”。
借助流動(dòng)性塞弊，就算外部的容器尺寸變化漱逸，這個(gè)導(dǎo)航也可以自適應(yīng)。這就是利用瀏覽器原生流特性的好處游沿。
盒子
width作用在“內(nèi)在盒子”
內(nèi)在盒子分為四種不同的盒子饰抒，分別是 content box、 padding box诀黍、 border box和 margin box袋坑。
