在剛接觸CSS的時候，每次給元素添加樣式，都習慣性的寫上寬是多少，高是多少，為自己挖坑無數，還暗自抱怨說CSS好煩，不過它真的是好煩，脾氣很怪。
好，言歸正傳。在討論元素的寬高是如何確定的之前，我們先明確一下文檔流的概念：對於內聯元素，是從左到右排列的，當寬度不夠時換行；對於塊級元素，是從上到下排列的，每一個元素都另起一行。
一、內聯元素寬高的確定
寬度：不受width的限制，有文字內容決定的，padding 和 margin 可以改變寬度。
高度：不受height的限制，padding 和margin 也不能改變。可以通過line-height 和 font-size來改變。
二、塊級元素寬高的確定
寬度：1、可以自行設置width的值；2、不設置寬度時的值為auto，默認寬度是父元素的寬度-自身的border-自身的margin。3、需要注意的是如果寬度寫了100%，應該是元素內容的寬度（content）等於父元素的寬度，元素的寬度應該等於這個寬度加自身的border，會凸出來一部分。
高度：1、可以自行設置height的值；2、默認值為0；3、由元素內部的文檔流中的元素的高度的總和決定的（里面元素的height+padding+margin有合並的可能），當元素脫離文檔流時，不能用於父元素高度的計算；4、當塊級元素里面是文字時，文字只有一行，高度由line-height決定，文字有多行，會自動換行，但是碰到長度很長的單詞時需要手動添加連字符（-）換行，有一個屬性與之相關，word-breaking: break all; 超出寬度，不管單詞是否結束都換行。
三、inline-block元素寬高的確定
寬度：1、設置width的值，超出寬度部分的處理方式和div一樣，多個inline-block元素處於一行中時和inline元素的效果一樣，可以用white-space控制是否換行；2、內容決定寬度。