記錄一些平時不怎麼關注、但卻能夠造成不小影響的細節，
內容來源於網際網路技術部落格（大部分來自於 張鑫旭部落格）或者個人平時的總結。
持續更新

font-family

1. 在中文頁面中，如果在頁面CSS中如果設定了中文字型，那麼瀏覽器預設字型將不起作用
2. 使用 font-family羅列需要使用的字型，sans-serif 字型必須放在所有字型的最後面，如果存在其他字型被放在了sans-serif 字型後面，則其他字型將不起作用。
   例如html{font-family:Arial,Helvetica,sans-serif,"宋體";}中的“宋體”壓根就是多餘的，永遠也不會起作用，因為“宋體”被放在了 sans-serif
   字型的後面，被終結掉了，只會加大CSS檔案尺寸的冗餘程式碼。如果將“宋體”調至”sans-serif”的前面，那麼情況就會大不一樣

新版本Chrome無法顯示border-image問題

div {
    border-image:url(border.png) 20;
}

如果發現類似於上面寫法的樣式不起作用，也就是 border-image 沒有顯示，那麼可以嘗試換成以下寫法：

div {
    border:20px solid; // 加了這一句
    border-image:url(border.png) 20;
}

相比於第一種寫法，第二種寫法在 border-image

的上面加了一句 border的樣式，需要注意的是，border 樣式必須寫在border-image的上面，並且必須寫明邊框寬度和邊框樣式，邊框樣式也可以是 double dashed 等，但總之必須寫明。

width 與 padding或是border 分離，提高程式碼重用性

下面程式碼比較精簡，但重用性與自適應性不太好：

HTML:
<div class="box">
    <strong>標題</strong><br />
    內容內容內容內容內容內容
</div>

CSS:
.box{width:430px;
 
 padding:20px; border:1px solid #ddd;}

下面這種形式，實現的效果與上述相同，但HTML的元素不如上面的一段精簡，不過將width 與padding和 border 分離，父元素控制寬度，子元素控制padding 與 border，父元素寬度不受padding與 border 的影響，提高子元素重用性。避免不必要的bug

HTML:
<div class="box">
   <div class="box_in">
        <strong>標題</strong><br />
        內容內容內容內容內容內容
    </div>
</div>

CSS:
.box{width:430px;}
.box_in{padding:20px; border:1px solid #ddd;}

CSS 渲染方向

CSS 與 JavaScript 選擇器元素的方式不同，後者是從左往右，但 CSS選擇器則相反，例如以下 CSS 選擇器：

#test div{...}

CSS 對於這種的處理方法為，先選取頁面上所有的 div，然後再找id 為test 的元素。
可以預見，這種選擇的速度是很慢的，所以最好避免。

• CSS選擇器中，通配選擇符* 和多 class 選擇器(例如 .foo.bar.baz)效能消耗較大

CSS的分離與合併

• 分離的 CSS命名原則，最好是 面向屬性的命名，命名中不含對元素位置、內容的描述，只關乎屬性，可以參考BootStrap

例如

.side-item-header{padding:0 0 8px; text-align:right;}

就是面對位置的描述，束縛了CSS的重用性，最好像是這樣 :

.tr{text-align:right;}
.pb8{padding-bottom:8px;}

其中，tr 和 pb8 的命名都是面向屬性的，提高了程式碼的重用性。

• 模組化元素不分離

千萬不要對網站通用的元素進行分離，例如網站通用按鈕，通用選項卡，通用小圖示，或是頁面的一些固定框架結構等，都不適合進行 樣式分離

• 對於網站非通用元素，如果樣式簡單(1~2個屬性)，對其分離並使用面向屬性的命名方法。

• 精簡高效CSS命名之“三無原則

  1. 無ID : #test{border:1px solid;}
  2. 無層級 : .test span{border:1px solid;}
  3. 無標籤 : li.test{border:1px solid;}

• background 預設值

background屬性允許我們使用一條規則設定所有單獨的背景屬性，而其餘的我們沒有設定的屬性，瀏覽器都會根據屬性的預設值來解析

p{
    background:
        [background-color][background-image][background-repeat][background-attachment][background-position]
        // 以下三條是CSS 3中的新屬性
        [background-origin][background-clip][background-size]       
}

例如，當我們寫下如下的CSS時：

p{
    background:yellow;
}

瀏覽器實際上會預設解析成：

p{
// 大括號[]中的就是瀏覽器預設新增的屬性，雖然我們在控制檯看不到
    background:[none] [0% 0%]/[auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;
}

所以有時候當我們對同一個元素應用兩個background規則的時候會發現有一個是不起作用的。

例如我們設定以下 CSS 規則：

p{background:url(/img.png)}
p{background:yellow;}

實際上，瀏覽器會按照以下進行解析：

p{
    background:url(/img.png) [0% 0%]/[auto auto] [repeat repeat] [scroll] [padding-box] [border-box] [transparent];
}
p{
    background:[none] [0% 0%]/[auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;
}

可見，後面的預設設定 [none] 覆蓋了前面的 url(/img.png)

空格

型別	描述
&nbsp	為按下space鍵產生的空格，此空格佔據的寬度不定，與字型有關
&ensp	佔據的寬度正好是1/2箇中文寬度，而且基本上不受字型影響
&emsp	佔據的寬度正好是1箇中文寬度，而且基本上不受字型影響。

可以使用這些空格來實現一些文字對齊，例如讓登錄檔單輸入框之前的“姓名”、“手機號”等字數不同的文字輕鬆實現兩端對齊。

需要注意的是，要想用空格實現完全相等的寬度，必須使用偶數畫素的字型大小，例如12px, 14px, 16px。否則由於畫素沒有半畫素這個概念，“手機號”文字與上下文字的寬度會有1畫素的偏差

CSS3 scale 實現映象翻轉

CSS3 的 transform 屬性中，scale() 屬性一般用來定義縮放大小，而除此之外，如果設定的值是負數，那麼可以實現元素的翻轉。

// 水平和垂直方向上皆翻轉，縮放倍數為1
tranform: scale(-1);
// 只在水平方向上翻轉，縮放倍數為1
tranform: scaleX(-1);
// 只在垂直方向上翻轉，縮放倍數為2
tranform: scaleY(-2);

避免 ajax 同步請求

同步的 ajax 請求在技術上是可能的，但是最好避免這麼做，因為它將鎖定瀏覽器的UI（按鈕，選單，滾動條，等等）而且阻止使用者與任何東西互動。

Media Queries 中的 only 關鍵字

摘自 葵中劍

Media Queries是CSS對於Media Type的一個擴充套件，所以不支援Media Queries的瀏覽器，應該仍然要識別Media Type，但是IE只是簡單的忽略了樣式。only關鍵字可能顯得有些多餘，對支援Media Queries的瀏覽器來說確實是這樣，因為加不加 only 沒有影響。only的作用，很多時候是用來對那些不支援Media Queries但是卻讀取Media Type的裝置隱藏樣式表的。比如：

<link rel="stylesheet" type="text/css" href="example.css"  media="only screen and (color)">

• 支援Media Queries的裝置，正確應用樣式，就彷彿only不存在
• 不支援Media Queries但正確讀取Media Type的裝置，由於先讀取到only而不是screen，將忽略這個樣式
• 不支援Media Queries的IE不論是否有only，都忽略樣式

visibility:hidden; 與 display:none; 的不同之處

1. 空間佔據
   visibility:hidden;元素隱藏不可見，但仍舊佔據控制元件，display:none; 元素隱藏不可見，並且不佔據空間。
2. 迴流(reflow)與重繪(repaint)
   前者不會引起頁面的迴流與重繪，不影響效能，後者則會。
3. 株連性
   一旦父節點元素應用了display:none，父節點及其子孫節點元素全部不可見，而且無論其子孫元素如何不屈地掙扎都無濟於事(全部隱藏無法顯示)；
   但是如果父元素隱藏應用的是 visibility:hidden;，子元素在不做其他設定的情況下同樣隱藏不可見，但是如果子元素設定了 visibility:visible;，則子元素可以照樣顯示可見。

background-position 的定位

@keyframes move {
  from {background-position: 0 0}
  to {background-position: 100% 0}
}

對應上面動畫的效果：

可見，background-position的定位於 left的定位是有差異的，background-position的座標可用下式計算：

positionX = (容器的寬度-圖片的寬度) * percentX;
positionY = (容器的高度-圖片的高度) * percentY;

根據上式，如果容器的寬(高)度小於圖片的寬(高)度，同時background-position 又設定了負值(例如 background-position: -50% -50;)，則負負得正，最終的座標就變成正的了。

CSS3 transform對普通元素的渲染影響

• transform限制position:fixed的跟隨效果

position:fixed可以讓元素不跟隨瀏覽器的滾動條滾動，然而如果設定了position:fixed屬性的元素的父元素設定了 transform屬性，例如transform:scale(1)，那麼此元素將會表現出和設定了position:absolute;一般的表現，而非始終定位。

// 雖然 img元素設定了 position:fixed 屬性，但是因為其父元素 p 設定了
// transform 屬性，所以導致 img 跟隨瀏覽器滾動
<body style='height:1000px;'>
<strong>有transform限制的</strong>
<p style='transform: scale(1);'>
    <img style='position: fixed;' src="http://dummyimage.com/100x100/ff3ff3)">
</p>
</body>

• 設定了 position:absolute;屬性的元素的寬度為100%, 則都會參照第一個非static值的position祖先元素計算其真正寬度，實際上，如果這個元素如果存在設定了 transform 屬性的父元素，則同樣也要算進去。