css參考手冊4.2.4

css參考手冊4.2.4由飄零霧雨編寫，前端開發(fā)人員必備手冊，西西曾經學習過一段時間，感覺忽而容易，忽而神奇，CSS參考手冊有關于CSS3.0參考手冊以及低版本兼容2.0版本，CSS參考手冊下載版權所有者為飄零霧雨。本手冊的部分內容參考了蘇沈小雨版的CSS2.0手冊及World Wide Web Consortium (W3C)公開的網(wǎng)絡文檔。

說明：

本手冊針對的是已有一定網(wǎng)頁設計制作經驗的讀者。其目的是提供最新的樣式表內容的快速索引及注釋。所以對于樣式表的基礎知識，在此僅簡單介紹，恕不贅述。 

本手冊的升級信息與版權聲明請參閱關于本手冊頁面。 

什么是層疊樣式表：

CSS是Cascading Style Sheet（層疊樣式表）的縮寫。是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內容分離的一種標記性語言。 

CSS不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語言)。 

CSS2.1是目前被使用最廣泛的版本，而目前還在開發(fā)中的CSS3具有更吸引人的特性。 

本手冊除了CSS2.1外，還涵蓋了大部分的CSS3內容。但由于CSS3尚未定稿，不可避免會出現(xiàn)一些變動。 

樣式語法：

Selector {property:value} 

如何將樣式表加入您的網(wǎng)頁：

你可以用以下三種方式將樣式表加入您的網(wǎng)頁。而最接近目標的樣式定義優(yōu)先權越高。高優(yōu)先權樣式將繼承低優(yōu)先權樣式的未重疊定義但覆蓋重疊的定義。例外請參閱!important聲明。

版本信息 Version Information

CSS參考手冊v4.2.4

Update Time: 2017-03-10

補充對兄弟選擇符、相鄰選擇符等的描述和示例；

移除了整個 only-firefox 目錄下的屬性；

新增了-webkit-overflow-scrolling屬性參考；

修復在MAC上chm亂碼的問題（感謝 @gucong3000 童鞋）；

修訂了熱心用戶所提的部分 Issues；

補充了calc()兼容性描述；

修復了導航欄出現(xiàn)橫向滾動條的問題；

將早期的歷史版本變更合并記錄，詳見更新歷史

CSS參考手冊v4.2.3

Update Time: 2016-09-01

修訂了熱心用戶所提的部分 Issues；

修訂對vertical-align取值的描述；

修訂對align-content兼容性表格中對 Firefox 的描述；

CSS參考手冊v4.2.2

Update Time: 2016-01-21

關于作者頁面新增了本手冊的微信交流群二維碼；

修復animation類別下部分頁面示例中的漸變語法問題；

增加早期Chrome和Safari不支持border-radius取值為<percentage>的描述；

修訂對background-position取值為3或4個值時的描述；

更新了Firefox對writing-mode的支持數(shù)據(jù)；

新增了@supports規(guī)則；

新增了unset取值；

CSS參考手冊v4.2.0

Update Time: 2015-08-14

新增了text-size-adjust,tap-highlight-color,user-drag參考；

修訂了 Transform 模塊，并新增了3D相關參考：transform-style,perspective, perspective-origin, backface-visibility；

閱讀指引中新增了 語法指引 用于幫助讀者輕松看懂語法；

修訂了大部分模塊的瀏覽器兼容性列表； 

Bugs和解決方案

如何在IE6及更早瀏覽器中定義小高度的容器？ 

如何解決IE6及更早瀏覽器浮動時產生雙倍邊距的BUG？ 

如何在IE6及更早瀏覽器下模擬min-height效果？ 

如何解決按鈕在IE7及更早瀏覽器下隨著value增多兩邊留白也隨著增加的問題？ 

如何解決IE7及更早瀏覽器下當li中出現(xiàn)2個或以上的浮動時，li之間產生的空白間隙的BUG？ 

如何解決IE6及更早瀏覽器下的3像素BUG？ 

如何解決IE6下的文本溢出BUG（江湖匪號：“諜影重重”或“一只豬的故事”）？ 

如何解決IE6使用濾鏡PNG圖片透明后，容器內鏈接失效的問題？ 

如何解決IE6無法識別偽對象:first-letter/:first-line的問題？ 

如何解決IE8會忽略偽對象:first-letter/:first-line里的!important規(guī)則的問題？ 

如何解決IE6會忽略同一條樣式體內的!important規(guī)則的問題？ 

如何解決IE6及更早瀏覽器下當li內部元素是定義了display:block的內聯(lián)元素時底部產生空白的問題？ 

如何解決IE6及更早瀏覽器下未定義寬度的浮動或絕對定位元素會被內部設置了zoom:1的塊元素撐開的問題？ 

如何解決IE7及更早瀏覽器下子元素相對定位時父元素overflow屬性的auto|hidden失效的問題？ 

如何解決Chrome在應用transition時頁面閃動的問題？ 

技巧和經驗

如何清除圖片下方出現(xiàn)幾像素的空白間隙？ 

如何讓文本垂直對齊文本輸入框？ 

如何讓單行文本在容器內垂直居中？ 

如何讓超鏈接訪問后和訪問前的顏色不同且訪問后仍保留hover和active效果？ 

為什么Standard mode下IE無法設置滾動條的顏色？ 

如何使文本溢出邊界不換行強制在一行內顯示？ 

如何使文本溢出邊界顯示為省略號？ 

如何使連續(xù)的長字符串自動換行？ 

如何清除浮動？ 

如何定義鼠標指針的光標形狀為手型并兼容所有瀏覽器？ 

如何讓已知高度的容器在頁面中水平垂直居中？ 

如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中？ 

如何設置span的寬度和高度（即如何設置內聯(lián)元素的寬高）？ 

如何給一個元素定義多個不同的css規(guī)則？ 

如何讓某個元素充滿整個頁面？ 

如何讓某個元素距離窗口上右下左4邊各10像素？ 

如何去掉超鏈接的虛線框？ 

如何容器透明，內容不透明？ 

如何讓整個頁面水平居中？ 

為什么容器的背景色沒顯示出來？為什么容器無法自適應內容高度？ 

如何做1像素細邊框的table？ 

如何使頁面文本行距始終保持為n倍字體大小的基調？ 

標準模式Standard mode和怪異模式Quirks mode下的盒模型區(qū)別？ 

以圖換字的幾種方法及優(yōu)劣分析 

為什么2個相鄰div的margin只有1個生效？ 

如何在文本框中禁用中文輸入法？ 

如何解決列表中l(wèi)ist-style-image不能精準定位的問題？ 

如何解決偽對象:before和:after在input標簽上的怪異表現(xiàn)的問題？ 

如何解決偽對象:before和:after無法在Chrome,Safari,Opera上定義過渡和動畫的問題？