《css世界》學習摘要

1.父級元素設置height：auto 會致使子級的元素設置的height：100%無效
2.若是塊級元素的width是個固定值，margin是auto，則margin會撐滿剩下的空間；若是margin是固定值，width是auto，則width會撐滿剩下的空間。這就是流體佈局的根本所在
3.誤解：css權重比較，當兩個權值進行比較的時候，是從高到低逐級將等級位上的權重值（如 權值 1,0,0,0、0,1,0,0、0,0,1,0、0,0,0,1 對應--> 第一等級權重值，第二等級權重值，第三等級權重值，第四等級權重值）來進行比較的，而不是簡單的 1000個數 + 100個數 + 10個數 + 1個數 的總和來進行比較的，換句話說，低等級的選擇器，個數再多（只要不超過256個，由於css權重256進制）也不會越等級超太高等級的選擇器的優先級的
4.!important的權重至關的高，假如寬高的設置是使用最高權限!important可是此元素又設置了max-width/min-width，那麼引擎會解析此元素的寬高爲設置的最大或者最小值，!important會失效
5.設置box-sizing: border-box；元素的寬度計算爲border+padding+content的寬度總和
6.替換元素：存在src=""屬性的<img> <audio> <video> <iframe>元素和能夠輸入文本的<input> <select> <textarea>元素等，其vertical-align屬性默認是bottom（非替換元素默認值是baseline）
7.border屬性中顏色是可選填的，經過結合transparent透明色的設置能夠製做成一些梯形，三角形等
8.line-height實現垂直居中的本質：行距；行距是指一行文本和相鄰文本之間的距離。行距 = line-height — font-size。行距具備上下等分的機制：意思是文字上下的行距是同樣的，各佔一半，這也是line-height能讓內聯元素垂直居中的緣由。下圖中字母x上下行距各佔一半，共同撐起了div。
9.幽靈空白節點應該是由font-size、line-height、vertical-align等相關的幾個屬性形成的，line boxes模型裏面的span也算內聯盒子，不過只是觸發幽靈空白節點的必要條件之一而已
10.不管內聯元素的line-height如何設置，最終父元素的高度都是數值大的那個line-height決定的
11.vertical-align屬性起做用的前提必須是做用在內聯元素上。 即display計算值爲inline inline-block inline-table table-cell的元素。因此若是元素設置了float: left或者position: absolute，則其vertical-align屬性不能生效，由於此時元素的display計算值爲block了