摘要：最近有時(shí)間，想把醞釀的幾篇博客都寫出來，今天前端小學(xué)生帶著10個(gè)問題，跟大家分享一下學(xué)習(xí)CSS的一些體會，我覺得想學(xué)好CSS，必須保持一顆好奇心和刨根問底的勁頭，而不是復(fù)制粘貼，得過且過。本人能力有限，這篇文章從構(gòu)思加完成用了四五天，如果你和我一樣是前端小白，不妨仔細(xì)斟酌體會，以期領(lǐng)悟到一些東西；如果你是業(yè)界大牛，也請你駐足隨意瞄上兩眼，把言辭內(nèi)容不妥的地方指出來，我們共同討論。
最近有時(shí)間，想把醞釀的幾篇博客都寫出來，今天前端小學(xué)生帶著10個(gè)問題，跟大家分享一下學(xué)習(xí)CSS的一些體會，我覺得想學(xué)好CSS，必須保持一顆好奇心和刨根問底的勁頭，而不是復(fù)制粘貼，得過且過。本人能力有限，這篇文章從構(gòu)思加完成用了四五天，如果你和我一樣是前端小白，不妨仔細(xì)斟酌體會，以期領(lǐng)悟到一些東西；如果你是業(yè)界大牛，也請你駐足隨意瞄上兩眼，把言辭內(nèi)容不妥的地方指出來，我們共同討論。
時(shí)刻保持好奇心
第一問：當(dāng)?shù)闹禐榘俜直刃问綍r(shí)，為什么瀏覽器會根據(jù)父容器寬度得出計(jì)算值？
在我之前一篇博客檢驗(yàn)?zāi)愕那岸嘶A(chǔ)——Sit the test中，聊到了值為時(shí)的計(jì)算方法。假如有一個(gè)父容器寬度400px，高度600px，其子元素設(shè)置:20% 20%后的計(jì)算值應(yīng)該為“:120px 80px”還是“:80px 80px”呢？按照那篇博客中的理論，第二個(gè)是正確答案。但是在今天這篇文章中，我給出的答案是第一個(gè)肯定錯(cuò)，第二個(gè)也不一定對。一個(gè)符合W3C標(biāo)準(zhǔn)的瀏覽器會根據(jù)父容器的寬度進(jìn)行計(jì)算，但是這個(gè)僅限于書寫模式為橫向的時(shí)候。因?yàn)樵跈M向排版時(shí)，寬度“有跡可循”，可以把瀏覽器寬度作為參考，但是高度是不固定的，所以百分比值在計(jì)算時(shí)會參考父容器的寬度。當(dāng)書寫模式改為縱向，其計(jì)算參考便會變?yōu)楦溉萜鞯母叨攘恕４廖也榭碊EMO(請?jiān)趦?nèi)核或IE下查看)。
/*修改書寫模式*/
.demo{---mode:-rl;/*for of */-mode:tb-rl;/*for ie*/
}
第二問：：auto為什么只能實(shí)現(xiàn)水平居中，不能垂直居中？
當(dāng)一個(gè)常規(guī)流中塊級元素的屬性左右值設(shè)為關(guān)鍵字auto，且它擁有固定寬度時(shí)，它便會平分剩余的水平空間，居中顯示。然而如果設(shè)置上下值為auto，瀏覽器得到的計(jì)算值為0，并不起任何的效果。那么問題來了，為什么垂直方向的auto不生效？
與上一問類似，這與布局相關(guān)。網(wǎng)頁排版時(shí)，常規(guī)流的塊級元素水平方向總是鋪滿瀏覽器窗口，垂直方向各塊級元素按照先后順序從上往下排列，當(dāng)頁面內(nèi)容過多時(shí)網(wǎng)頁會出現(xiàn)縱向滾動條，因此原理上縱向是可以無限擴(kuò)展的，計(jì)算時(shí)找不到一個(gè)固定的參考值，所以縱向的auto無法生效。
同樣，:auto會受書寫模式的影響。當(dāng)書寫模式為縱向時(shí)，：auto垂直方向是可以居中的，水平方向仍然可以居中。不信？請自己寫個(gè)demo試試吧。其實(shí)受到書寫模式影響的屬性除了這些外，還有折疊、百分比值的計(jì)算等。
第三問：可以讓一個(gè):fixed的元素相對于一個(gè)容器定位而非瀏覽器視口嗎？
提到:fixed，很多人都會說這是一個(gè)定位屬性，與的區(qū)別是它針對瀏覽器視口定位。我的博客導(dǎo)航欄就是利用“:fixed”屬性，讓其始終保持在窗口的最上方。不過還是不要忘記“世事無絕對”，CSS實(shí)現(xiàn)了一個(gè):fixed的元素相對于一個(gè)容器定位，請?jiān)谙虏榭创薉EMO。
當(dāng)一個(gè)元素應(yīng)用了CSS3的屬性后，它的后代元素的fixed都將失效。。因此可以利用這個(gè)Bug模擬出一個(gè)相對于某個(gè)包含塊fixed的效果。
關(guān)于更多的影響可以在張鑫旭的博客中看到：CSS3 對普通元素的N多渲染影響。
第四問：可以用CSS實(shí)現(xiàn)面板的隱藏和顯示嗎？
現(xiàn)在要實(shí)現(xiàn)這樣一個(gè)功能，通過CSS切換某個(gè)面板的顯示或隱藏。當(dāng)提到CSS，我們自然而然想到了控制某個(gè)單一元素的樣式，一旦涉及到多個(gè)元素交互，我們往往使用操作Dom。事實(shí)上這個(gè)需求不但可以用CSS來實(shí)現(xiàn)，甚至實(shí)現(xiàn)方式不止一種，請狂戳DEMO：三種CSS方式實(shí)現(xiàn)面板隱藏和顯示。
第一種利用了label和，使控制方和被控制方不需要有特定的HTML結(jié)構(gòu)關(guān)系，但是需要額外的HTML標(biāo)簽來支持。第二種方式利用了hover和子元素選擇器，第三種方式利用了focus和兄弟元素選擇器，后兩種都受限于特定的HTML結(jié)構(gòu)。三種方法都只使用CSS實(shí)現(xiàn)了面板的隱藏顯示。
第五問：可以用CSS做出一個(gè)圖標(biāo)嗎？比如一個(gè)三角形？一個(gè)小房子？
一個(gè)標(biāo)簽，放在HTML中，只能代表一種語義。然而一個(gè)標(biāo)簽加CSScss三種樣式中的優(yōu)先級順序css三種樣式中的優(yōu)先級順序，則可以創(chuàng)造出無限的可能。請看DEMO：CSS實(shí)現(xiàn)三角形，小房子圖案。
利用互相覆蓋呈現(xiàn)出的斜線，可以模擬出多種多樣的幾何狀。在CSS3中，每個(gè)元素都有::和::after兩個(gè)偽元素，對同一個(gè)標(biāo)簽，由CSS可以操控的單位由一個(gè)變?yōu)槿齻€(gè)，再加上絕對定位的輔佐，各種各樣的形狀被創(chuàng)造了出來。
你能想象嗎？這些圖標(biāo)都是用CSS畫出來的。要想了解更多的CSS3圖標(biāo)，可以訪問這個(gè)網(wǎng)站：
第六問：我想寫針對IE6，7的hack，該怎么寫呢？
你可能會這么回答：使用 “>”，“_”，“*”等各種各樣的符號來寫hack。是的，這樣做沒錯(cuò)，但是需要記住每個(gè)符號分別被哪些瀏覽器識別，并且如果寫的太亂將造成代碼 閱讀起來十分困難。學(xué)習(xí)CSS必須抱有一種質(zhì)疑精神，有沒有一種hack方法可以不寫這些亂七八糟的符號，并且代碼易維護(hù)易讀呢？我們可以看看好搜首頁是怎么做的：在頁面頂端有這樣一句話：
在頁面的CSS中，會看到這樣的規(guī)則：
.ie7 #:, .ie8 #: {:none}.ie6 . # li, .ie7 . # li, .ie8 . # li {-right-color:#}.ie6 . # a, .ie7 . # a, .ie8 . # a {color:#}……
這樣做的優(yōu)點(diǎn)就是克服了使用特殊符號hack的那些缺點(diǎn)，缺點(diǎn)是需要寫更多的代碼，使頁面增大。
一個(gè)前端er對上面這些問題知道與否，并不影響他是否可以完成一個(gè)項(xiàng)目，建設(shè)一個(gè)網(wǎng)站。但是如果沒有好奇心，不想追究內(nèi)在原因，僅抱著“我不想知道這么多東西，反正我會用就行”這樣一種態(tài)度，那么他充其量算是一個(gè)“程序員”，而非一位“工程師”。
就是要刨根問底！
第七問：行內(nèi)級元素可以設(shè)置寬高嗎？
不會為自身內(nèi)容形成新的塊，而讓內(nèi)容分布在多行中的元素叫做行內(nèi)級元素。此類元素可以與其它行內(nèi)級元素在同一行中顯示而不會另起一行，例如span，。在面試時(shí)，當(dāng)被問到行內(nèi)級元素可否設(shè)置寬高時(shí)，根據(jù)我們的經(jīng)驗(yàn)往往會回答不能。但是這樣往往著了面試官的道，因?yàn)橛幸恍┨厥獾男袃?nèi)元素，比如img，input，等等，是可以被設(shè)置寬高的。一個(gè)內(nèi)容不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對此內(nèi)容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。比如img是一個(gè)置換元素，當(dāng)不對它設(shè)置寬高時(shí)，它會按照本身的寬高進(jìn)行顯示。所以這個(gè)問題的正確答案應(yīng)該是置換元素可以，非置換元素不可以。
第八問：CSS規(guī)則根據(jù)優(yōu)先級生效，低優(yōu)先級的規(guī)則會被瀏覽器忽略還是覆蓋？
在我的之前一篇博客中，提到了瀏覽器中CSS優(yōu)先級的使用規(guī)則：多個(gè)優(yōu)先級的樣式都會被渲染，只不過高優(yōu)先級會覆蓋住低優(yōu)先級，元素呈現(xiàn)為高優(yōu)先級的樣式。現(xiàn)在請考慮這樣一個(gè)問題，在一個(gè)div應(yīng)用了兩條-image規(guī)則，照之前的理論來看，兩條規(guī)則都會渲染，那么請問瀏覽器會請求被覆蓋規(guī)則的背景圖片嗎？
真實(shí)情況是瀏覽器會聰明到只請求當(dāng)前應(yīng)用的背景圖片。簡單理解的話，瀏覽器只會為生效的CSS規(guī)則中的圖片資源發(fā)出http請求。如果深究的話，就必須談?wù)劄g覽器的工作原理了。本人目前水平不夠，以下紅色字體為個(gè)人理解，請選擇性閱讀。
在現(xiàn)代瀏覽器中，一個(gè)頁面從請求到呈現(xiàn)，大致需要經(jīng)過解析-構(gòu)建DOM樹-構(gòu)建呈現(xiàn)樹（框架樹）-布局（重排）-繪制等幾個(gè)步驟。一個(gè)頁面的展現(xiàn)并不是一蹴而就的，而是分步驟有條不紊的進(jìn)行。眾所周知的樣式表層疊順序和發(fā)生在構(gòu)造呈現(xiàn)樹的過程中，就是為了解決規(guī)則不止一個(gè)時(shí)的問題。以上面提到的背景圖案為例，瀏覽器計(jì)算完優(yōu)先級后，只有后定義的背景圖案規(guī)則被構(gòu)建到呈現(xiàn)樹上。接下來瀏覽器會進(jìn)行重排和繪制，瀏覽器在繪制時(shí)才會請求背景圖片規(guī)則用到的圖片文件。這就是為什么只發(fā)出一個(gè)HTTP請求的原因。
了解瀏覽器的工作原理不僅可以認(rèn)清CSS解析和渲染過程，還可以體會到重排和重繪發(fā)生的時(shí)機(jī)，這對我們寫出高效的CSS規(guī)則和 Dom操作有著非常深刻的指導(dǎo)意義。這個(gè)話題太大，目前我的水平也不足以涉獵到此，等學(xué)有所成后我會再發(fā)一篇文章詳細(xì)談?wù)劇＿@里有一篇經(jīng)典的文章，感興趣的可以看看：瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘。如果無法訪問，查看此國內(nèi)地址：：瀏覽器的工作原理。
第九問：使用可以做出圓角按鈕的原理是什么？
當(dāng)不能使用-時(shí)，如何制造一個(gè)圓角按鈕？現(xiàn)在有一個(gè)制造1px圓角的小技巧：中嵌套span，設(shè)置span的為：“:1px -1px”。戳我查看DEMO。
知道這個(gè)小tip的人不在少數(shù)，那么是什么原理導(dǎo)致這種現(xiàn)象呢？學(xué)習(xí)CSS就需要刨根問底，一張圖可以把這個(gè)問題說明白。
圖中紅色框?yàn)閟pan標(biāo)簽，藍(lán)色框?yàn)閍標(biāo)簽。當(dāng)設(shè)置span的左右為-1px時(shí)，其便會在左右各突出1px，造成一種1px圓角的視覺效果。同樣的道理，在實(shí)現(xiàn)一些古老瀏覽器下的圓角與底色漸變的按鈕時(shí)，通常也會利用到多層元素層疊制造視覺誤差的原理。
第十問：清除浮動有N種方式，他們間有什么共同點(diǎn)嗎？
所謂清除浮動，一般是為了解決子元素浮動導(dǎo)致父容器高度坍塌。目前有多種方式來解決這個(gè)問題，最常見的有after偽元素，父元素設(shè)置“:”等等，請看DEMO：七種清除浮動的方法。
其實(shí)按照原理，這幾種方法可以歸納為兩種：clear:both法和構(gòu)造BFC法。
方法分類
浮動末尾添加新標(biāo)簽，設(shè)置樣式為clear::both
浮動末尾添加
標(biāo)簽clear:both
使用::after偽元素clear:both
父元素設(shè)置:table構(gòu)造BFC
父元素設(shè)置:auto構(gòu)造BFC
父元素設(shè)置:構(gòu)造BFC
讓父元素也浮動構(gòu)造BFC
使用“clear:both”來清除浮動自然不必多說，那么什么是構(gòu)造BFC法呢？
Block (BFC)，塊級格式化上下文是在CSS2.1中提出的一個(gè)概念，在布局中，BFC自成體系，對自己內(nèi)部的元素負(fù)責(zé)，不會與浮動元素重疊，相鄰BFC上下也不會重疊。所以我們會通過構(gòu)造一個(gè)BFC來防止重疊，清除浮動或者實(shí)現(xiàn)一個(gè)雙欄布局。
那么如何構(gòu)造一個(gè)BFC呢？1.float設(shè)置為非none值；2.設(shè)置為非；3.設(shè)置為table-cell，table-，-block；4.設(shè)置為或fixed。這些方法剛好與上面提到構(gòu)造BFC來清除浮動的方法相呼應(yīng)。
需要特別注意的是，在IE6，7下沒有BFC這個(gè)概念，但是有一個(gè)與BFC性質(zhì)相似的概念：。在IE6，7中遇到的很多bug都可以通過讓元素has 來解決，比如浮動雙邊距，躲貓貓，3像素間距等等。
有些元素例如table，input本身就has ，那么如何讓一個(gè)普通元素呢？包括但不限于以下幾種方法：1.:；2.float不為none；3.:-block；4.：除auto外任意值；5.width：除auto外任意值；6.zoom：除外任意值；7.非(僅限IE7)。
這也是為什么我們會在中經(jīng)常看到“:1%”、“zoom:1”、“:-block”、“:”這些字眼的主要原因，其實(shí)就是為了讓元素has 嘛！
所以在IE6-7下，清除浮動除了可以使用clear:both外（::after偽元素?zé)o法使用），另一種方法就是讓父元素has 。
關(guān)于清除浮動更多的探討可以在一絲冰涼的博客中看到：那些年我們一起清除過的浮動。
總結(jié)
學(xué)習(xí)任何一門語言，或者一個(gè)事物都不能得過且過，抱著前人播種后人收的思想。縱然站在巨人的肩膀上可以少走很多彎路，但是個(gè)人仍然要保持好奇心和刨根問底、質(zhì)疑的精神。多想一下“為什么”，少記一些“該這樣做”，這在CSS的學(xué)習(xí)中尤其重要。
CSS很簡單，她的出現(xiàn)僅僅是為了排版。CSS很復(fù)雜，一個(gè)簡單的排版往往有N種解決方案。