《編寫高質量程式碼--web前端開發修煉之道》筆記-CSS

此篇為本筆記的第二篇

標準模式與怪異模式（模擬老式瀏覽器的行為）

如果漏寫了DTD宣告，Firefox仍然會按照標準模式來解析網頁，但在IE中（包括IE6，IE7，IE8）就會觸發怪異模式

IE盒模型的解析

標準模式：網頁元素的寬度有padding，border，width三者的寬度相加決定
怪異模式：width本身就包括了padding和border的寬度

組織CSS

base.css + common.css + page.css

base.css包括CSS reset、通用原子類

• CSS reset：標籤在瀏覽器裡有預設的樣式，不同瀏覽器的預設樣式會有差別。例如：ul預設帶有縮排的樣式，在IE下，它的縮排是通過margin實現的，而在Firefox下，它的縮排卻是由padding實現的。
• 通用原子類：一系列常用的基本類，包括：文字，定位，寬高，邊距
  文字：font-size，line-height，text-align
  定位：float，clear，position
  寬高：width，height
  邊距：margin，margin-top，margin-right，margin-bottom，margin-left，padding，padding-top，padding-right，padding-bottom，padding-left

CSS命名

• 推薦使用英語，不要使用漢語拼音
• 常見命名方法：駝峰命名、劃線命名（可以結合兩種方法，其中駝峰命名法用於區別不同單詞，劃線用於表明從屬關係）
• 不推薦輕易使用子選擇符，多人合作時會有衝突
• 為避免多人合作的衝突，可為page層的各工程師分配一個唯一的識別符號，作為字首

多用組合，少用繼承

掛多個class實現最終樣式

處理上下margin

• 相鄰的margin-left和margin-right是不會重合的
• 相鄰的margin-top和margin-bottom會產生重合
  所以上下相鄰的模組最好統一使用margin-top或者margin-bottom，不要混用

低權重原則——避免濫用子選擇器

• CSS選擇符權重的規則：
  標籤——1
  class——10
  id——100
• 如果CSS選擇器權重相同，那麼樣式會遵循就近原則，哪個選擇符最後定義（而不是class名字掛在最後），就採用哪個選擇符的樣式
  <span class="test test2">與<span class="test2 test">沒有區別
• 使用子選擇器，會增加CSS選擇符的權重，CSS選擇符的權重越高，樣式就越不容易被覆蓋，越容易對其他選擇符產生影響
• 為了保證樣式容易被覆蓋，提高可維護性，CSS選擇符要保證權重儘可能低

CSS sprite（圖片翻轉技術）

• 將網站的背景圖片合到一張大圖片上，減少網頁的HTTP請求數，減少伺服器壓力
• 合併的只能是用於背景的圖片，對於<img src="">設定的圖片不能合併
• 大圖中每個小圖的座標值都不可輕易改動

CSS hack

• IE條件註釋法
  <!--[if lte IE6]> <span></span> <![endif]-->
<!--[if lt IE6]> <span></span> <![endif]-->
<!--[if gte IE6]> <span></span> <![endif]-->
<!--[if gt IE6]> <span></span> <![endif]-->
<!--[if ! IE6]> <span></span> <![endif]-->
• 選擇符字首法
  *html .test{width:60px;}/*IE6*/
*+html .test{width:70px;}/*IE7*/
• 樣式屬性字首法
  .test{
width:80px;
*width:70px;/*IE6，IE7*/
_width:60px;/*IE6*/
}

a標籤的4種狀態排序

love hate原則：l（link）ov（visited）eh（hover）a（active）te

hasLayout

觸發hasLayout解決IE bug
zoom:1;
zoom無效時，可以設定position:relative;，但會有副作用

塊級元素和行內元素

塊級	行內
獨佔一行，預設情況下，其寬度自動填滿其父元素寬度，即使設定了寬度，仍然獨佔一行	不會獨佔一行，相鄰元素排列在同一行裡，直到一行排不下，才會換行，其寬度隨元素的內容而變化
可以正常設定margin和padding	水平方向的margin和padding會產生效果，豎直方向的margin和padding不產生邊距效果

display:inline-block和hasLayout

• 為了相容IE，display能用的型別只有inline，block，none。IE6和IE7不支援display:inline-block;
• inline-block：可以設定長寬，可以設定margin和padding值，但卻不是獨佔一行
• 如果對行內元素觸發hasLayout，就可以模擬display:inline-block的效果
  行內元素{display:inline-block;}即可觸發hasLayout
  只能對行內元素實現

img標籤和button標籤都具有display:inline-block;的特性，可以設定長寬但不獨佔一行

relative，absolute和float

這個我之前寫過一篇部落格，列了一個表格進行了對比，傳送門

補充一個position各個值的描述
position: static;

• position的預設值，元素將定位到它的正常位置，其實也就相當於沒有定位
• 元素在頁面中佔據位置
• 不能使用top，right，bottom，left移動元素位置

position: relative;

• 相對定位，相對於元素的正常位置來進行定位
• 元素在頁面中佔據位置
• 可以使用top，right，bottom，left移動元素位置

position: absolute;

• 絕對定位，相對於最近一級的、定位不是static的父元素來進行定位
• 元素在頁面中不佔據位置
• 可以使用top，right，bottom，left移動元素位置

position: fixed;

• 絕對定位，相對於瀏覽器視窗進行定位，其餘和absolute一樣，相當於一種特殊的absolute

position: inherit;

• 從父元素繼承position屬性的值

居中

水平居中

• 行內元素的水平居中
  給父元素設定text-align: center;
• 確定寬度的塊級元素的水平居中
  設定margin-left: auto;和margin-right: auto;
• 不確定寬度的塊級元素的水平居中
  
  1. 將元素包含在table標籤內，對table設定margin-left: auto;和margin-right: auto;
     增加了無語義標籤，加深了標籤的巢狀層數
     （table本身不是塊級元素，如果不設定其寬度，它的寬度由內部元素的寬度撐起）
  2. 改變塊級元素的display為inline型別，然後使用text-align: center;來實現居中。但存在副作用
  3. 給父元素設定float，然後父元素設定position: relative;和left: 50%;，子元素設定position: relative;和left: -50%;來實現水平居中。但存在副作用

豎直居中

• 父元素高度不確定的文字、圖片、塊級元素的豎直居中
  通過給父容器設定相同的上下內邊距實現（padding-top，padding-bottom）
• 父元素高度確定的單行文字的豎直居中
  通過給父元素設定line-height來實現，line-height值和父元素的高度值相同
• 父元素高度確定的多行文字、圖片、塊級元素的豎直居中
  
  1. vertical-align: middle;但只有當父元素為td和th時，才會生效
     在Firefox和IE8下，可以設定塊級元素的display型別為table-cell來啟用vertical-align
     IE6和IE7並不支援display: table-cell;
     所以可以直接使用table，td，預設情況下已經隱式的設定了vertical-align: middle;
  2. 使用hack
     在不支援display: table-cell;的IE6和IE7下，通過給父子兩層元素分別設定top: 50%;和top: -50%;來實現居中
     設定了position: relative;和position: absolute;，會有副作用

z-index

• 啟用z-index屬性後，如果不設定其值，那麼預設為0，但仍然浮於body之上
• 如果多個元素的z-index值相同，那麼HTML標籤中後出現的元素，會浮在先出現的元素之上

負邊距——並未啟用z-index，但仍然讓元素的位置發生了重疊

瀏覽器解析頁面時，會先判斷元素的型別，如果是視窗型別的，會優先於非視窗型別的元素，顯示在頁面的最頂端，如果同屬非視窗型別的，才會判斷z-index的大小（select元素在IE6下是以視窗形式顯示的）

IE6下png圖片透明的地方會顯示為淺藍色