塊級元素、內聯元素、內聯塊元素的width和height的設置問題
基礎知識點：
1. css文檔流概念：對於塊級元素，它獨占一行（讀張鑫旭的css世界，知道是“外在盒子”的緣故），自上而下的排列；對於內聯元素，它是自左向右排序，寬度不夠的時候換行。
2. 元素的外在盒子：個人理解，它決定元素在文檔中的位置，相當於一個人的體型，有的人是胖子，有的人是瘦子，胖子占的空間大，瘦子占的空間小；所以塊級元素就是超級大胖子，它要占一行，內聯元素就是瘦子，它可以幾個放在一行。
3. 元素的內在盒子：個人理解，它用來展現元素的內容，相當於一個人的內心世界，有的人內心世界很寬廣，有的人內心世界很狹小；對於元素來講，它的內在盒子包括哪些呢？其實很簡單，給元素添加 background-color 屬性就一目了然了（在CSS中，background-color起作用的部分：content，padding，border；有人會有疑問了，border怎么會包含其中？當你給border設置transparent之后你就知道了）。
4. 元素的width和height：這兩個屬性是元素的content的寬和高。
知道了上面幾點之后，下面就來討論3種類型元素的width和height的設置問題
一：塊級元素（內心世界 和 體型匹配，但是體型 卻盡可能地大的人）
width：
1. 可以自己設定具體的數值，但是要注意：設定了具體的height之后，使用 line-height 不能撐開盒子，可以改變文字的位置。
2. 不設置時，默認是auto，等於父級元素的寬度（就是自身的margin，border，padding，content都加起來之后等於父級元素的寬度）
3. 設定 width：100% ，此時是盒子content的寬度等於父級元素的寬度，所以如果設置了margin，border，padding的值的時候，盒子會凸出來的如下圖：
height：
1. 可以自己設定具體的數值
2. 不設置具體值的時候，默認值是0，靠內容撐開 （例如：設定line-height: 50px 來撐開盒子的 height ）
3. 由元素內部的文檔流的高度之和決定
二：內聯元素（體型 包不住 內心世界的人）
width：
1. 設定具體的數值是 不起作用的，由文字內容決定；
2. padding-left 和 padding-right 設定值，可以改變width大小；
3. margin-left 和 margin-right 設定值，改變不了width大小，但是可以改變元素的位置；
height：
1. padding-top和padding-bottom可以設定具體的值，但是已經超出了外在盒子，雖然可以通過background-color觀察到，但是卻無法撐開元素的位置；margin-top和margin-bottom直接沒有效果，所以不要使用
2. 可以通過font-size來改變其大小其高度的大小，這時就體現出來inline元素是靠內容撐開的特點了
3. 不能通過設置 line-height 的值來改變height的大小，一定要切記；雖然文字的位置可能改變了，也將父元素的邊框撐開了，但是通過background-color可以觀察出，其實元素的height沒有發生改變，如下圖所示，可以清楚的看到前后行高不同，但是height的值並沒有改變。
三：內聯塊元素（內心世界 和 體型匹配的人）
width：
1. 可以自己設定具體的數值
2. 不設置具體的數值的時候，靠內容撐開
height：
1. 可以自己設定具體的數值，但是要注意：設定了具體的height之后，使用 line-height 不能撐開盒子，可以改變文字的位置。
2. 不設置具體的數值的時候，靠內容撐開 （例如：設定line-height: 50px 來撐開盒子的 height ）