css參考手冊(cè)4.2.4

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

說(shuō)明：

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

本手冊(cè)的升級(jí)信息與版權(quán)聲明請(qǐng)參閱關(guān)于本手冊(cè)頁(yè)面。 

什么是層疊樣式表：

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

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

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

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

樣式語(yǔ)法：

Selector {property:value} 

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

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

版本信息 Version Information

CSS參考手冊(cè)v4.2.4

Update Time: 2017-03-10

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

移除了整個(gè) only-firefox 目錄下的屬性；

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

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

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

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

修復(fù)了導(dǎo)航欄出現(xiàn)橫向滾動(dòng)條的問(wèn)題；

將早期的歷史版本變更合并記錄，詳見(jiàn)更新歷史

CSS參考手冊(cè)v4.2.3

Update Time: 2016-09-01

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

修訂對(duì)vertical-align取值的描述；

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

CSS參考手冊(cè)v4.2.2

Update Time: 2016-01-21

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

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

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

修訂對(duì)background-position取值為3或4個(gè)值時(shí)的描述；

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

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

新增了unset取值；

CSS參考手冊(cè)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；

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

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

Bugs和解決方案

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

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

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

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

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

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

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

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

如何解決IE6無(wú)法識(shí)別偽對(duì)象:first-letter/:first-line的問(wèn)題？ 

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

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

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

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

如何解決IE7及更早瀏覽器下子元素相對(duì)定位時(shí)父元素overflow屬性的auto|hidden失效的問(wèn)題？ 

如何解決Chrome在應(yīng)用transition時(shí)頁(yè)面閃動(dòng)的問(wèn)題？ 

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

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

如何讓文本垂直對(duì)齊文本輸入框？ 

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

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

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

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

如何使文本溢出邊界顯示為省略號(hào)？ 

如何使連續(xù)的長(zhǎng)字符串自動(dòng)換行？ 

如何清除浮動(dòng)？ 

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

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

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

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

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

如何讓某個(gè)元素充滿整個(gè)頁(yè)面？ 

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

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

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

如何讓整個(gè)頁(yè)面水平居中？ 

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

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

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

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

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

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

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

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

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

如何解決偽對(duì)象:before和:after無(wú)法在Chrome,Safari,Opera上定義過(guò)渡和動(dòng)畫的問(wèn)題？