1.基本概念
(1)正常流：是指西方語言文本從左向右，從上向下顯示。如果要讓一個元素不在正常流中國，唯一的辦法
就是使之成為浮動或定位元素。
(2)非替換元素：如果元素的內容包含在文檔中，則稱之為非替換元素。
(3)替換元素：指用作為其他內容占位符的一個元素。例子：img中的圖像
(4)塊級元素：在正常流中，會在其框之前和之后生成“換行”
所以出於正常流中的塊級元素會垂直擺放。
(5)行內元素：不會再之前或之后生成行分隔符，它們是塊級元素的后台。
(6)根元素：位於文檔樹頂端的元素。在HTML中，就是元素HTML。
2.水平格式化
通常我們指的元素的寬度，指的是其內容的寬度，不包括內補，外補，邊。
傳送門：JavaScript權威設計--CSS(簡要學習筆記十六)
水平格式化的七大屬性：margin-left,border-left,padding-left,width,padding-right,border-right,margin-left
這七個水平屬性的總和要等於父元素的width。
這里面只有width,margin-left,margin-right這三個可以設置為：auto
其他都必須設為特定的值或者默認寬度為0.
下面就以這三個auto的組合來展現問題：auto會自動補齊寬度（屏幕總寬度1366）
設置margin-left為auto:
<p style="margin-left:auto;width:100px;margin-right: 100px">水平格式化</p>
設置margin-right為auto:
<p style="margin-left:100px;width:100px;margin-right: auto">水平格式化</p>
設置width為auto:
<p style="margin-left:100px;width:auto;margin-right: 100px">水平格式化</p>
設置margin-left和margin-right為auto:
<p style="margin-left:auto;width:100px;margin-right: auto">水平格式化</p>
設置margin-left和margin-right和width都為auto:
<p style="margin-left:auto;width:auto;margin-right: auto">水平格式化</p>
設置margin-left和margin-right和width都不為auto:
<p style="margin-left:100px;width:100px;margin-right: 100px">水平格式化</p>
下面會遇到一種復雜特殊奇怪的現象：那就是外邊距可以是負值
<div style="width:400px;border:2px solid red">
<p style="margin-left:10px;width: auto;margin-right: -50px;">zqzqzq</p>
</div>
可以看出來寬度是440（width;auto這里440是實時計算的值，而不是顯示的指定的值，
其實這里涉及到一個問題：有些是實時計算的值，有些DOM可以獲取實時計算的值。），比父400還要寬！說好的不能比父元素寬呢？
但是這個計算沒有錯誤：
10+0+0+440+0+0-50=400
最終還是等於400。
前面說的都是費替換元素的水平格式化，下面來說替換元素的水平格式化。（典型的替換元素就是img）
示例圖片：w:200px,h:300px.
當我們改變她的寬度的時候，高度也同比例改變。
200x300
300x450
3.垂直格式化
一個元素的默認高度由其內容決定。
高度還會受到內容寬度的影響。
段落越窄，相應的就會越高，以便容納其中所有的內聯內容。
對應於水平格式化，它也有7個屬性：
margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom.
同樣這七個值必須等於包含元素塊的高。
這七個值中只有三個值可以設為auto:height,margin-top,margin-bottom,其他四個必須設為特定的值或默認為0.
當高度小於顯示內容的高度：瀏覽器會處理為有個滾動條(overflow)，以容納下內聯元素。
垂直格式化的另一個重要的是合並垂直外邊距（重疊垂直外邊距）
<ul>
<li>大師兄</li>
<li>師傅</li>
<li>被妖怪</li>
<li>抓走啦</li>
<li>俺老孫來也</li>
</ul> li{ margin-top: 10px; margin-bottom: 15px;
相鄰列表之間的距離是15px,不是25px。
因為相鄰的外邊距沿着垂直方向合並了，大邊距覆蓋小邊距。