css參考手冊4.2.4

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

說明：

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

本手冊的升級信息與版權(quán)聲明請參閱關(guān)于本手冊頁面。 

什么是層疊樣式表：

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

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

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

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

樣式語法：

Selector {property:value} 

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

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

版本信息 Version Information

CSS參考手冊v4.2.4

Update Time: 2017-03-10

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

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

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

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

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

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

修復(fù)了導(dǎo)航欄出現(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

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

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

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

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

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

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

新增了unset取值；

CSS參考手冊v4.2.0

Update Time: 2015-08-14

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

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

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

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

Bugs和解決方案

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

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

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

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

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

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

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

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

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

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

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

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

如何解決IE6及更早瀏覽器下未定義寬度的浮動或絕對定位元素會被內(nèi)部設(shè)置了zoom:1的塊元素?fù)伍_的問題？ 

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

如何解決Chrome在應(yīng)用transition時頁面閃動的問題？ 

技巧和經(jīng)驗(yàn)

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

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

如何讓單行文本在容器內(nèi)垂直居中？ 

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

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

如何使文本溢出邊界不換行強(qiáng)制在一行內(nèi)顯示？ 

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

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

如何清除浮動？ 

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

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

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

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

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

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

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

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

如何容器透明，內(nèi)容不透明？ 

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

為什么容器的背景色沒顯示出來？為什么容器無法自適應(yīng)內(nèi)容高度？ 

如何做1像素細(xì)邊框的table？ 

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

標(biāo)準(zhǔn)模式Standard mode和怪異模式Quirks mode下的盒模型區(qū)別？ 

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

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

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

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

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

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