1、高和行高也可以撐開盒子，背景圖不行。

2、文字若不設置行高，是包含文字的盒子的行高。

4、如果給了定位，但是沒有給left，top等值，默認會騰出行內元素、padding的位置，有的時候我們可以使用這些特性，有的時候我們不熟悉的話可能產生bug。

5、較少功能使用較少代碼（a代替ui>li>a）

6、如果盒子都是左對齊的話，最後一個盒子在右邊的位置不夠的話，會掉下來，如果第一個盒子A比第二個盒子B高，那麽最後一個盒子C掉下來後跟第二個盒子B左對齊，而不是跟第一個盒子A左對齊。如果最後一個盒子C後面還有一個盒子D的話，D盒子的頂端跟C對齊。（下圖 JD logo 是 A 盒子， 搜索框是 B 盒子， 周傑倫的歌是 C 盒子，我的購物車是 D 盒子。）

7、標準流中的文字不會被浮動的盒子蓋住。所以一個大盒子中的小盒子要麽都浮動要麽都不浮動。

8、父盒子高度為0 ，子盒子如果是浮動的話不占位置，下面的標準流盒子將會跑到子盒子下面。

或者使用了定位，父盒子高度為0，然後子絕父相，下面的標準流盒子依然會跑到子盒子下面。

（這個可以做類似京東的側邊欄，如果側邊欄擋住了跑上來的標準流盒子，那麽把包含標準流的整個大盒子定位：position: relative ，因為定位的層級高，所以就可以顯示標準流的所有內容了。）

9、想要盒子隨著界面變大變小，而盒子隨著界面的中線能夠移動的時候（類似定位/脫標的盒子居中對齊），不要加版心（margin: 0 auto;）

10、父盒子有高度，但是子盒子太高，父盒子會被撐破；如果父盒子沒有高度，那麽父盒子會被撐開，是所有子盒子最高的高度。撐開的盒子可能會產生影響。（不要讓浮動的盒子超出父盒子）

11、浮動盒子的相互影響，不管是否在一個大盒子裏面（藍盒子是包含在粉紅盒子裏面的，紫盒子和粉紅盒子是並列的）。

12、谷歌瀏覽器不支持12號以下字體大小。

13、子盒子不占位置，父盒子高度為0，會導致下面的盒子頂上來了。（清除浮動）

14、 curser: pointer; 模擬鼠標小手樣式。

15、 <a href=""></a>

如果 href 值為空，刷新頁面

如果 href 值為#，跳轉到頁面頂端，不刷新頁面。

如果 href 值為 javascript:; 或者 javascript:void(0) ，不刷新頁面，也不跳轉。

16、定位的時候，left 的權限比 right 權限高，top 比 bottom 高，提高權限也沒用。

17、圖片半透明

opacity：0.4； 優點方便。缺點：裏面的內容也會半透明。

CSS3的技術來解決半透明：

background: rgba(0,0,0,0.3);

background: rgba(0,0,0, .3);

18、行高可以繼承。

19、如果一個大盒子裝的是li標簽，而且li標簽是浮動的，如果li裏面的內容超過了大盒子的話，會有li標簽掉下來，如何使得所有的li標簽在一行顯示呢？用一個輔助盒子裝下所有的li標簽，然後大盒子只裝輔助盒子，這樣對於大盒子來說，所有的li標簽都會在一行顯示，即使大盒子很小。而輔助盒子可以使用ul來代替，給ui一個所有li加起來的寬度即可。

20、行內元素給了定位，不需要轉block，唯有static, relative不行。

21、盒子的border有重疊怎麽辦，可以往左上移動border的margin來覆蓋。

22、background: url("spirit.png") -135px 0;

關於背景の問題：

有時候我發現background後面兩個px可以調節位置，有的時候又必須使用left，top等調位置。其實後面的兩個px本來就是調位置的，而且調的是整個背景的位置，當需要整張圖片的時候，調節這兩個px就可以了，但是精靈圖因為需要的只是某一個區域的圖，調節這兩個px只是將選中的區域移動到原點，這樣方便使用left，top等來調到具體的位置。

CSS相關知識點