精通CSS：高級Web標準解決方式（第2版）

1. 層疊重要度：（也就是說。用戶!important能夠覆蓋inline style）
   1. !important、用戶>作者、最後是瀏覽器/用戶代理
2. 規則特殊性（次序）的計算：a,b,c,d 假設同樣。後定義的優先
   1. 假設是inline style，a=1
   2. b=ID選擇器（#id）的個數
   3. c=類、偽類、屬性選擇器的個數
   4. d=類型、偽元素選擇器的個數
3. => 大站點復雜內容情況下怎樣管理規則次序？？？
4. @import比link慢？
5. p41 （垂直）margin疊加（=max(upper‘s margin-bottom, down‘s margin-top)）
   1. 元素嵌套包括、空元素都會發生疊加
   2. only for 普通文檔流的block框。inline、float、position:absolute的不會疊加
6. inline：設置高度、寬度沒有作用，line-height
   1. => inline-block
7. 無法直接對{匿名block、文本line框}應用樣式
8. position:relative：能夠指定left、top“相對於”原來位置。元素仍然占領原來的空間
9. position:absolute：元素不占領文檔流空間（這相當於提升其z-index？）
   1. 相對於距離它近期的祖先元素定位（由此能夠看出CSS是先定位祖先元素。後子孫元素的？）
10. position:fixed：相對於viewport（一般用於用戶評論）
11. position:float：能夠（脫離文檔流）左右移動，直到碰到包括框（containing box）或還有一個浮動框
    1. 假設包括塊（containing block？）無法水平容納下全部元素，其它float元素將下移
    2. 文本元素會受float的影響，造成類似於WORD‘文字圍繞’的效果
       1. 要阻止之。對這些文本行clear float。
       2. 可使用一個空元素clear:both，使得父容器包括浮動元素。

          （也能夠直接float容器。但這會影響下一個元素）

          1. .clearFloat:after { content:"."; height:0; visibility:hidden; display:block; clear:both; }
             1. IE 6-中的‘Holly hack’
12. p56 利用背景圖象創建項目符號
13. p65 圓角框在CSS 3裏非常easy處理，在CSS 2.1時代的各種tricks略過
    1. 9切分的border-image: url(user-corner.gif) 25% 25% 25% 25% / 25px round round;
14. CSS投影：box-shadow
15. CSS視差：background-position: 20% 0;
16. 圖象替換（CSS 2.1）：
    1. FIR：文本的display:none造成不適合屏幕閱讀器
    2. Phark：使用text-indent:-5000px; 對於關閉圖象但打開CSS的情況無效
    3. sIFR（JS+Flash）
17. p87 CSS 3同意:target偽類？（恩，這麽做沒有信息泄露問題）
18. 外鏈樣式（常見於Wiki）
19. p92 文本在行框中總是垂直居中的（？？），設置line-height就可以，使用height會導致文本不是垂直居中，從而必須設置額外的padding
20. CSS Tooltip：不如最簡單的title屬性吧?
21. p105 在導航條中突出顯示當前頁面：使用2個ID，當中一個應用到body元素上，進行組合匹配（這樣，導航條的後臺不須要特殊處理。

    。

    。）酷！

22. p114 IE老版本號不支持在非錨元素上使用:hover。能夠用JS或.htc行為文件啟用這個功能
23. CSS圖象映射：用一個div包住img。設置其大小等於圖象並position:relative; 然後讓各個li元素相對於div定位。用:hover顯示border線。。

    。

24. p129 遠距離翻轉：實際上非常easy，讓錨元素包住一個div/span/li，然後用絕對定位把這些包括元素移動到頁面其它位置，設置錨元素的:hover就可以。
25. p136 table元素border的2種模型：collapse|separate
26. 表單元素
    1. fieldset：分塊標題（Group Panel/Box）
    2. label的2種使用方式：嵌套包括input；使用for屬性關聯input（id）
27. p153 ‘全部CSS布局的根本都是3個基本概念：定位、浮動、margin操縱。’
    1. IE 6-不支持margin:auto; 幸運的是，IE把text-align:center;誤解為讓全部東西居中，而不不過文本（。。。）
    2. p159 在符合標準的瀏覽器中，假設元素的內容太大。它只會超出box之外。可是，IE會擴展整個元素（。

       。

       。

       -_-）

    3. 3列布局：分解為2個嵌套的兩列布局？？？
    4. p164 流式布局：+ min-width！

       （哈哈。我認為能夠出一個在線的CSS考試系統了，題目就是精確到px的布局，要JS進行檢驗效果對不正確。

       。。

       哈）

    5. p166 彈性布局：相對於字號（em單位）布局（對支持頁面縮放的瀏覽器而言沒有必要）
       1. body{font-size:62.5%;} 僅僅以em為單位設置容器的寬度。內部寬度仍然使用%
    6. p170 faux列（略）
28. bug與修復bug
    1. IE的‘擁有布局’（hasLayout）
       1. 設置下面屬性會使元素擁有布局：float、display:inline-block;、width/height、zoom、writing-mode:tb-rl;

          IE7中添加了：overflow、min-width:不論什麽值、max-width:除none外不論什麽值

       2. 比如：IE中文本段落擁有布局。不會出現圍繞float元素的效果
       3. 又如：IE 6-中，擁有布局的元素會錯誤地擴展以適應內容尺寸 ...
    2. hack和過濾器（略）
    3. IE 6-上的常見bug：
       1. 不論什麽浮動元素的margin加倍？？？改為display:inline;
       2. 3px文本偏移
       3. 一系列浮動元素的最後元素的最後幾個字符反復：刪除凝視（。

          。

          。！）

       4. *IE6的‘peek-a-boo’bug
       5. *相對容器中的絕對定位（o, i c，shit）：.rel-container{height:1%;}
29. 案例研究
    1. Roma Italia
       1. Cufon？[email protected]t-face（？？？）：所選字體的EULA必須同意在Web上進行字體嵌入
    2. Climb the Mountains
       1. :first-child
       2. 組合class

精通CSS：高級Web標準解決方式（第2版）