css摘抄

如下內容轉載於：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

 

1. 引言

　　各位前端或者僞前端（好比做者本人）的同志們，css對大家來講不是很陌生。好比我，在幾年以前上大學的時候，給外面作網站就用css，並且必須用css。這樣算下來也得六年多了，有些功能可能輕車熟路，有些功能可能須要上網查查，看似能應付得了工做的事情——我以前也是（如今工做上不作開發了，只是業餘還寫代碼）。

　　世界上沒有絕對簡單的東西，只是咱們認爲它是簡單的。就像咱們公司如今的開發狀況，開發的大環境剛剛轉入B/S，開發領導之前都是用.net作C/S的，在我看來，他們就以爲js、css就是那麼回事兒，沒多高深。可是我仍是抱着敬畏的態度，買了一本《CSS設計指南（第三版）》，無論本身會的，仍是不會的，我都通通看一遍。書郵回來以後，我花了三個晚上看完了。我有個習慣，就是作一件事情必定要又一個結果，不能以爲本身腦子裏明白了就算了，必定要寫出來，甚至作出例子來纔算完。因而乎，就寫幾篇博客唄。利己利人。

　　下面我把在看書過程當中遇到的本身認爲比較重要的（掌握不牢固）或者以前不懂的，都先列出來，出幾個題目，各位看官能夠試着想一想。若是您都會了，那您基礎很牢固，沒得說；若是你有些不會的，着急你就趕忙本身查查答案，不着急你就等着我後面的博客介紹。

　　閒話說了不少，如今開始！

2. 問題

　　01. 有些瀏覽器不徹底支持css3，如今能夠用哪一個工具去檢測瀏覽器是否支持，以及支持哪些項？

　　提示：Mo****zr

　　02. 經常使用的html標籤，它們的display屬性通常默認爲block和inline。有哪些經常使用標籤的display不是block和inline，這些標籤顯示的時候和block/inline有何區別？

　　提示：table，input, textarea

　　03. 是否用過@import？

　　（比較簡單）

　　04. 一個表格的第一行顯示紅色背景，最後一行顯示藍色背景，中間行使用灰色/白色間隔的背景，如何寫？

　　提示：結構化僞類（比較簡單）

　　05. 僞元素 ::before、::after 是否用過？都是在哪些地方用的？

　　提示：清除浮動、爲一個div增長一個「三角」  重要 

　　06. css——層疊樣式表，其中的「層疊」該如何理解？  重要 

　　提示：層疊，即一層一層疊加起來，關鍵是知道一共有幾層，每一層都是什麼

　　07. 對「特指度（specificity）」瞭解多少，知道「I-C-E」的計算規則嗎？  重要 

　　提示：參考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

　　08. 特指度理解不是很麻煩，關鍵是分析多個css選擇符和計算麻煩。有一個簡單的解決方案，四句口訣，叫作「查理版簡單層疊要點」，是否瞭解？  重要 

　　提示：例如，「包含ID的選擇符要賽過包含類的選擇符...」

　　09. 搜索「瀏覽器默認樣式」，找到它，打開看看，裏面是瀏覽器默認的全部樣式，你是否都能看得懂。 重要 

　　提示：例如 display:table 和 display:block 有何區別？

　　10. 在你開發的系統的第一個css文件的第一行，就要寫上 * {margin:0; padding:0} ，這是爲什麼？

　　提示：瀏覽器兼容性（比較簡單）

　　11. 樣式 p{margin-top:50px; margin-bottom:30px;} 將會致使p之間的垂直距離是多少？

　　提示：垂直外邊距……水平外邊距……——比較簡單的基礎知識

　　12. 「盒子模型」你們都瞭解了（不知道趕忙去惡補！！），盒子模型的width實際上是指內容的寬度，不包括padding、border、margin。其實這樣對咱們作css佈局是很不利的，有什麼方法可讓width是所有的寬度？  重要 

　　提示：box-sizing（注意IE低版本的兼容性）

　　13. float的一些影響會讓咱們常常啼笑皆非（特別是初學者），其實瞭解了float的設計初衷，也許你就會理解這些東西。float的設計初衷是什麼？

　　提示：就簡單的一句話……

　　14. float具備「包裹性」——例如：<p>abc</p> 和 <p style='float:left'>abc</p> 二者的寬度是不同的，不信能夠爲 p 加上背景色試試。是否理解這種「包裹性」？試着想一想，還有哪些元素（或css屬性）也有這種「包裹性」？  重要 

　　提示：和第13問題有密切關係

　　15. float還有一個表象是「破壞性」，它會致使父元素高度塌陷，這個你們應該都知道吧？那麼這是爲什麼呢？另外，還有哪一個css屬性，也致使這種「破壞性」   重要 

　　提示：float和absolute都將致使元素脫離文檔流

　　（針對1三、1四、15問題，能夠參考教程http://www.imooc.com/learn/121和http://www.imooc.com/learn/192，講的很好，只是講師的聲音頗有「磁性」，要忍耐住）

　　16. css清除浮動有三種方法，是否知道。你平時是怎麼清除浮動的？業內最經常使用的經典清除浮動樣式是什麼？ 重要 

　　提示：搜索「clearfix」

　　17. 相對定位relative如何理解，它和絕對定位absolute的最根本區別是什麼？

　　提示：一個在文檔流內，一個在文檔流外

　　18. 「定位上下文」是否知道？ 重要 

　　19. 經典的網頁三列布局如何實現？若是不考慮IE六、7，最好的實現多列布局的方式是什麼？ 重要 

　　提示：table-cell

　　20. 是否用過inline-block，IE六、7如何兼容？

　　提示：比較簡單，百度便可

3. 結束

　　當前就總結了這麼多問題，你們能夠對照着問題想一想答案。若是你以爲還有寫比較重要的知識，能夠給我留言，我將會考慮加入進來。

　　另外，接下來我將寫一個關於css重點知識的簡短的系列文章，以及結合我作過的wangEditor富文本框以及對bootstrap框架的瞭解，把本文這些問題介紹一下。近期工做很忙，更新起來可能會很慢，敬請期待吧！

---------------------------------------------------------------

 

1． 一個段子

　　開題沒必要太嚴肅，寫博客也不像寫書，像聊天似的寫東西是最好的表達方式。

       記得以前看過一個段子，也多是一件真事兒，這不重要。大致內容以下：一個香港的教授說：咱們香港的大學和大陸的大學差的很遠啊，大陸的大學連看門保安都懂得哲學，由於當你想要進入校園時，保安都會問你一個很哲學的問題「你是誰，你從哪裏來，你到哪裏去？」。

       看完段子的第一反映確定是很自嘲的笑了，笑了以後就忘了，該幹嗎幹嗎去了。

       可是我以爲這句話確實有那麼一點高達上的意思，雖然我不知道什麼是哲學。「你是誰，你從哪裏來，你到哪裏去」，若是映射到咱們此次CSS教程上，能夠提這麼幾個問題：

1. CSS是什麼，如何深刻理解，它和html是個怎樣的關係；
2. CSS有幾種來源（5種來源）；
3. CSS要幹什麼事情，如何結合html實現的；

 

　　看過我其餘教程的朋友都知道個人原則：我要寫東西，必須又一個我以爲很特別並且很合理、高效的思路，若是沒有我寧肯不寫。大部分寫CSS的人一上來可能寫選擇器，可是我不會那樣。

　　閒話不說。要想從根上了解這些問題，仍是先從瀏覽器開始吧。

2． 瀏覽器是如何工做的

　　以前看過一篇文章，叫作《瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕》。文章言簡意賅的介紹了瀏覽器的工做過程，web前端程序猿最好了解一下。在此另外推薦一本書《WebKit技術內幕》，筆者很早就關注這本書，已列入近期的讀書計劃。

       文章中的內容暫且不詳細提，咱們先「斷章取義」的只說CSS相關的部分。

 

       上圖是webkit內核渲染html和css的流程圖。你們能夠從圖中看到，html的解析是一條線，css的解析是一條線，二者會在某一點結合，造成最終的視圖。

       若是咱們以CSS爲重點看，從上圖中咱們能夠總結出學習CSS的三個突破點。

1. 瀏覽器如何加載和解析CSS——CSS的5個來源；
2. CSS和html如何結合起來——選擇器；
3. CSS能控制那些顯示方式——盒子模式、浮動、定位、背景、字體等；

　　看到這裏，不知道有沒有朋友以爲很興奮？由於咱們在學習CSS以前，首先是分析瀏覽器如何加載、處理、使用CSS的，咱們按照這個思路去寫CSS的教程。而不是一上來就照本宣科的從id選擇器開始。

我這段時間爲什麼一直沒有寫博客，實際上是在左思右想一個更加合理、高效的思路和框架。我若是寫出來的東西和別人的同樣，那我本身也以爲沒意思。

       本系列文章也是按照這個思路和框架，一步一步展開的。

3． CSS的加載過程

       CSS——Cascading Style Sheets——層疊樣式表。「樣式表」你們比較好理解，那何爲「層疊」呢？從字面意思來看，層疊確定是須要多層疊加起來。而這個「多層CSS」到底有幾層，每一層是什麼，咱們程序猿用到的將是哪些層？這幾個問題將是咱們討論的重點。

       另外，這麼多層次疊加，若是出現衝突怎麼處理，以哪一個爲準？這也是咱們討論的重點。

       最後，在這些層次中有一個「瀏覽器默認樣式」層，即瀏覽器默認的各個html元素的樣式。此次咱們像瀏覽器這位「機器人」學習一下，看看它寫出來的css能給咱們什麼幫助。

4． CSS和HTML的結合

　　CSS如何與html結合呢——固然是經過選擇器。CSS提供了多種多樣的選擇器類型，並且每一個級別都在不斷的增長新的選擇器類型，使得選擇器更加靈活易用。本系列將拿出一篇文章專門講解選擇器。

　　聰明的人類也經過css提供的選擇器在其餘臨近的方面開疆拓土，例如jquery，zen-coding。

　　對css選擇器來講，有一個很重要的話題——級別。在大部分web前端面試題中，你都會看到css選擇器級別的判斷問題。《css設計指南》書中給出了一個概念——特指度，並且給出了計算公式和計算規則，還給出了一個簡單的背誦口訣。想的真周到。

       最後，與選擇器關聯密切的還有僞類和僞元素，咱們也將拿出一篇文章專門講解僞類和僞元素，以及它們最典型的用法。

5． 頁面呈現

　　頁面呈現能夠分爲兩類——文字，塊。

1. 針對文字來講，咱們能夠設置字體、字號、加粗、斜體、背景色等等；
2. 對於塊來講狀況比較多，有盒子模型、浮動、定位、display、背景等；

　　本系列會拿出很大的篇幅去講解其中的基礎知識，以及他們的一些重點應用。

6． 佈局

　　佈局是css的重頭戲，每一個系統的佈局都有其各自的特色。無好無壞，確定是各有優缺點，不妨拿出幾個比較典型的例子來一塊兒分析一下。例如：

1.  經典三列布局
2. Bootstrap柵格佈局
3. 百度首頁佈局
4. 微博佈局
5. 人人網布局
6. 瀑布流佈局
7.  ……

 

上一節《css知多少（2）——學習css的思路》有幾我的留言表示思路很好、繼續期待，並且收到了9個贊，我仍是比較欣慰的。沒看過的朋友建議先去看看上一節。

　　這一節就開始實踐上一節的思路！

1. 「層疊」的概念

　　CSS——層疊樣式表，其中的「層疊」是什麼意思呢？層疊就是瀏覽器對多個樣式來源進行疊加，最終肯定結果的過程。舉一個簡單的例子：

 　　

       上圖中有兩個樣式來源，第一個是引用的css1.css，第二個是本身在style中編寫的樣式。「層疊」是個疊加的過程，可經過下圖表示：

 　　

      

       上面用一個簡單的例子來講明瞭層疊的過程，形象的體驗一下。

       層疊是CSS的核心機制，理解了它才能以最經濟的方式寫出最容易改動的CSS，讓文檔外觀在達到設計要求的同時，也給用戶留下一些空間，讓他們根據須要更改文檔的顯示效果，例如調整字號。——摘自《CSS設計指南》

2．樣式來源

       上文中提到，css之因此有「層疊」的概念，是由於有多個樣式來源。其實css的樣式來源有5個，開發人員只能接觸到後面3個。

　　

       第一，瀏覽器默認樣式表

       當你不爲html設置任何樣式時，顯示在瀏覽器上，b標籤會顯示粗體、p有縱向margin、h1字號比p大一倍……這是爲何呢？

       由於瀏覽器自帶一個默認的樣式，若是html中沒有爲標籤設置樣式，則瀏覽器會按照本身的樣式來顯示。可是瀏覽器默認樣式的級別是最低的，一旦有其餘地方設置了標籤樣式，瀏覽器默認樣式就會被沖掉。

       注意，不一樣瀏覽器的默認樣式有些地方是不同的。例如，咱們在寫css時，都會首先設置 * {margin:0; padding:0;}，這是爲什麼？就是由於有瀏覽器兼容性問題。乾脆，所有弄成0，這樣各個瀏覽器就都統一了。

       此處先把默認樣式的代碼貼出來 ，咱們下一節專門解說默認樣式，有不少值得玩味的地方。

  瀏覽器默認樣式

        第二，用戶樣式表

       在一些新聞網站中，常常看到能夠設置字體大小的快捷菜單，例以下圖就是搜狐新聞中的設置。

 　　

       這些是給一些有視覺障礙的人看的，反正我是沒用過，我也有視覺障礙，不過我是經過近視鏡來解決的。

       其實瀏覽器也有這樣的設置，例如chrome瀏覽器中，咱們就能夠設置字號和字體。

      

       用戶在這裏設置了字體和字號以後，它們會覆蓋掉瀏覽器默認的樣式。

       第三，<link>引用的css文件

       引用css文件，你們應該都比較熟悉了。

       第四，<style>中編寫的樣式代碼

       <style>中編寫樣式也都比較熟悉。

       第五，<a style=’ ’>中編寫的樣式代碼

       標籤style屬性中編寫樣式，也都用過吧。

      

       後面這三種是我們程序開發中比較經常使用的，這裏就很少說了，不瞭解的朋友須要去補一補基礎知識了。

3．層疊的規則

　　因爲樣式的來源不一樣，瀏覽器在加載樣式時，須要計算出最終的樣式值，這樣才能顯示出正確的界面效果——瀏覽器會經過疊加和覆蓋這兩種方式來生成最終的樣式值。

       下面是舉例說明：

 　　

       如上圖，不一樣來源的兩個樣式，第一個樣式設置了font-weight，第二個沒有，瀏覽器會把它疊加在一塊兒，即瀏覽器會把各個零散的整合成一個總體。第一個樣式color:red，第二個樣式color:blue，瀏覽器會讓後者覆蓋前者，最終結果仍是color:blue。

       覆蓋的默認規則是後者覆蓋前者，可是又一個特殊狀況——!important。

 　　

       如上圖。雖然color:blue是後來者，可是它沒有居上，由於前者color:red跟着!important。這就像獲得一個尚方寶劍，有最高執行權，其餘人通通讓路，不然佛擋殺佛。

4．總結

　　本文主要講解了css的5個來源，以及瀏覽器疊加樣式的過程和方法，這是學習css最基礎的知識。下一節將帶領你們一塊兒看看瀏覽器默認樣式究竟是什麼樣子的，咱們又能從其中學到些什麼東西？其中有不少好玩的東東，敬請期待！

---------------------------------------------------------------

本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

 

 

　上一節《css知多少（3）——樣式來源與層疊規則》介紹了樣式的五種來源，我們再經過一張圖回顧一下。

　　

　　對於上面的三層，我們大概都比較熟悉了。下面的兩層中，用戶自定義樣式通常也就是改一改字號大小和字體樣式，也沒甚好說的。而最有的說的就是瀏覽器的默認樣式。

　　不一樣瀏覽器的默認樣式多少有些區別，特別是老版本的瀏覽器之間，如今高級瀏覽器愈來愈向統一的標準靠攏，對前端程序猿來講是一件好事情。雖然有些許差別，可是絕大部分仍是相同的，我先把代碼粘貼出來 ，具體的解讀我們慢慢道來（只說重點，比較容易的或者不經常使用的就不說了）。

  瀏覽器默認樣式

1．理念上的轉變

　　在解讀代碼以前，我先把我看瀏覽器默認樣式最大的體會給你們說一下，這個是很是重要的。就是要先從理念上從新認識html和css。

　　之前我都是認爲瀏覽器自身原本就認識各類html標籤，而且會根據規則設置標籤的樣子，例如p是block顯示，ul有margin-left，h1粗體顯示……之前覺得這些標籤默認的顯示方式和css無關，是瀏覽器本身乾的，css設置網頁樣式是加載以後又渲染的。

　　如今知道這種想法是錯誤的。其實瀏覽器加載了html以後只爲一件東西——dom樹，瀏覽器把html變爲dom樹結構，就完成了對html的結構化。至於後來對視圖的渲染，p是block、br換行，那是整合了css以後的事情。而瀏覽器整合css又是另外一個路線，和解析html是分開的。這裏的「css」就包含了瀏覽器默認樣式。

　　能夠結合下圖理解（第二節的圖）：

      

　　一句話，瀏覽器將載入的html變爲dom樹，可是此時沒有任何顯示樣式。因此顯示的樣式，都是css定義的，瀏覽器只會經過css來渲染視圖樣式。

　　——多好的設計：指責單一，開放封閉！

2．block元素

　　

　　爲什麼默認狀況下p、h一、ul、div都是block顯示，就是這裏定義的。因此，不要再說div天生就是block——這句話應該換成：瀏覽器默認樣式天生規定了div是block——因此才致使了div是block！是默認樣式規定的，不是瀏覽器的內核規定的。

　　沒有設置block的元素，默認爲inline顯示。

3. display: list-item

　　

　　咱們在使用display時，經常使用的值通常是：inline/block/inline-block，用不到list-item。那這裏的list-item到底有什麼做用？咱們不妨親自試一試：

      

　　看到沒有，出現了ul-li中的效果了吧，若是再加一個margin-left是否是就跟ul-li同樣了？

　　因此，ul-li爲何會默認顯示成那種樣子？——list-item纔是「罪魁禍首」。

4. diplay:table

　　

       先給出一個快速思考題：<table>和<div>在容器尺寸上最大區別是什麼（只是容器尺寸，不考慮內容區別）？請在兩秒鐘內說出答案。

       答案是——div寬度和父容器相同，table寬度根據內容而定——即table具備「包裹性」。

       舉一個例子：

 　　

       上圖中，第一個div默認是block，寬度撐滿整個頁面。第二個div設置了display:table，寬度根據內容而定。這就是「包裹性」。而提到「包裹性」，又不得不讓我想到float和absolute。具體怎樣這裏沒法細說，後面的文章會詳細講到，有興趣的能夠先查着。

       各位思考一下，大家作的項目中，哪些地方想要這種「包裹性」，而不是寫死寬度或者用js計算寬度？若是想不到，我給你們截個圖提醒一下。以下圖：

      

5. display: table-cell

　　

　　上面的截圖中，咱們看到了眼花繚亂的好多display，並且都是和table相關的。從字面意思上咱們能看出，這是瀏覽器爲了渲染一個完整的表格，而須要的許多顯示方式（PS：看似一個簡單的表格，渲染規則就這麼多，這就提醒咱們思考問題的嚴謹性和邏輯性）。

　　這裏的大部分都是咱們一直都不會用到的，用不到的瞭解便可，不必深究。可是這個table-cell咱們卻能用獲得，並且是用它來幹一件很重要的事情——多列布局。

　　多列布局在css中有多重要就不用我說了吧，傳統模式下你們都使用float來解決這一問題，可是float寫出來的東西代碼複雜，寬度調整不靈活，瀏覽器兼容性有問題。因此纔有了新方案——table-cell，注意，IE六、7不行！

　　簡單舉個例子：

      

　　記得我剛學html時候，不會用div + css作多列布局，我就用table作多列布局。而今，你能夠用table-cell，像用table同樣作多列布局，作出來的效果和table作出來的效果是如出一轍的。

6. body樣式

　　

　　在body中，定義了兩個樣式，如上圖。

　　第一，在默認狀況下，頁面中的文字不會直接頂到瀏覽器的邊框，這就是由於默認樣式爲body設置了margin的緣故。這裏須要注意個問題，不一樣瀏覽器爲body設置的margin值可能不同，所以你們都知道在css中用 *{margin:0} 來解決這一兼容性問題。

　　以前已經提到過，*選擇器的級別要低於body標籤選擇器，可是*{margin:0}依然有效的緣由，就是瀏覽器偷偷的作了優先級的手腳。若是在正常狀況下，*選擇器在遇到標籤選擇器時，是不會起做用的，及時它是「後加載」的。例如：

      

　　第二，瀏覽器默認樣式還爲body設置了line-height，line-height這個值1.12是對英文比較友好，中文狀態下就顯得有點擁擠。Line-height是具備繼承性的，在body中設置了，body下面全部的文字都會繼承生效。

　　另外注意，這裏的line-height: 1.12是一個相對值，便是文字高度的1.12倍。看到這裏，咱們在寫line-height的時候，也必定要注意使用相對值，不要使用絕對值。以下：

      

　　上圖是編寫line-height的三種形式，你們以爲哪一種形式最好？區別是什麼？

1. 狀況1：永遠按照文字的1.4倍計算，無論文字的高度如何，可適應任何變化；
2. 狀況2：永遠按照1.4em計算，隨着em的值改變，無論文字高度如何（此時文字高度可能已經經過絕對的px值該表了大小，而不是隨em改變的）；
3. 狀況3：就是25px，絕對的。

　　相信看到這裏你們會發現，經過一個line-height我能能窺探到的道道有不少。若是你們看懂了這三種狀況，從軟件設計和系統擴展的角度說，固然咱們都會選擇第一種。

7. em和px

　　你們在設置文字高度或者與文字有關的距離，如p的margin、line-heigt（上文剛講完，再也不贅述），會用em仍是用px？——反正我以前不熟悉css時候，都是用px。由於px是固定大小，一目瞭然。——固然，它也不利於擴展。

　　所以，咱們推薦你們用em。並且瀏覽器的默認樣式也建議咱們這樣書寫：

　　

　　如上圖，它設置了h1字體大小2em、縱向margin是0.67em，h2字體大小1.5em、縱向大小0.75em……p的縱向margin是1.12em，字體大小1em（上圖中沒有，但在整個文件中有）

　　em是什麼？——em是一個瀏覽器識別的長度單位，可是它不是絕對的、固定的，而是相對的。你們都知道px是一個絕對的長度單位制，它永遠不會改變。瀏覽器默認狀況下令1em === 16px。如今你知道爲什麼p默認是16px了吧。並且你還知道了h1是p高度的兩倍，h2是p高度的1.5倍……（你知道的愈來愈多了。。。）

　　固然，咱們能夠經過css修改1em的值。

　　

　　因爲font-size和margin都是經過em來定義的，當em被修改時，無論字體大小修改，margin值也會跟着修改。這就是em好用之處！

　　從如今開始，與字體大小有關的css，所有都用em！

8. 粗體和斜體

　　

　　上圖中，標註了在整個html中，哪些元素設置了粗體/斜體。重點仍是一個思惟轉換的問題：h1不是天生的粗體，而是設置了font-weight:bolder的樣式而已……

　　這裏須要提一句題外話：<b>和<strong>有啥區別？<i>和<em>有啥區別？——不知道的話本身去查查吧，看到許多面試題考這個。

9. inline-block

　　

　　我相信最初學習使用inline-block的朋友都有一個困惑：inline-block究竟是個啥？這時候若是你很是勤奮好學的話，你就去網上查資料，而後作各類實驗。——精神可嘉，行爲不可取。

　　學習仍是有捷徑的。看看瀏覽器默認樣式告訴你的捷徑：button、input就是inline-block！這樣以點播你就會一會兒明白，最起碼能給你一個很好的形象的概念。看看button和input的表現，你就知道inline-block是什麼樣子了：

　　能被父容器居中、能設置高度寬度和margin、不會像table或div那樣佔一正行……——這就是inline-block——記得這是瀏覽器默認樣式告訴你的。

10. <br>樣式的疑問？？

　　

　　這裏我提出本身的一個疑問。如上圖，瀏覽器默認樣式中，對br是這樣設置的。

1. 這裏的br:before{content:」A」}，」 A」並無顯示出來啊？
2. <br>的換行究竟是誰致使的，是css仍是瀏覽器？

　　但願知道答案的朋友，不吝賜教，給我和你們分享一下，謝謝了。

11. 總結

　　你們看着是否是很過癮？反正我寫着是挺過癮的，雖然打字、寫代碼、畫圖很累，不過頗有成就感——再有大家的鼓勵就更好啦！

　　

　　首先，我以爲瀏覽器默認樣式很是重要，全部詳細解讀其中的重點，但願能給你們帶來一些啓發。沒有解讀到的就是一些比較容易理解的，或者不經常使用的（例如打印的樣式設置），能夠直接去看看源碼。

　　其次，這裏面也包含了個人一個疑問，很慚愧沒有看明白。即使是一時半會兒解決不了，給別人分享一下，讓你知道了一個疑問，對你來講，應該也是一個收穫。

---------------------------------------------------------------

 

1. 引言

　　從本節開始，就進入本系列的第二個部分——css和html的結合——說白了就是選擇器。

　　CSS中定義了樣式，如何將這些樣式設置到相應的html節點上？就不得不經過選擇器。讓瀏覽器知道css選擇了哪個dom節點，瀏覽器就會乖乖的把相應的樣式渲染成視圖。

　　至於css能把頁面渲染成什麼樣子，這是本系列的第三部分。

　　第一部分講css樣式的加載和層疊，第二部分講選擇器以及選擇器的等級，第三部分講呈現的各類樣式（背景、字體、定位、浮動等）。這樣一個思路，也正式瀏覽器使用css的流程，是最有效的學習思路。（第二節中講過，此處再回顧一遍）

2. 選擇器

說道css選擇器，你們都知道有許多種，可是真要你去掰着手指頭數一數的話，你可能須要數幾分鐘。其實這麼多選擇器，徹底能夠分爲兩類：

1. 標籤選擇器（*是特殊狀況），可但標籤，也可上下文多標籤；
2. 屬性選擇器（id和class都是屬性，特殊的屬性）；

2.1.    標籤選擇器

2.1.1 通用選擇 *

　　通用選擇器 * 你們應該都比較熟悉了，最經常使用的就是 *{margin:0; box-sizing:border-box;}。mragin:0我們在上一節已經說過，box-sizing:border-box將在後面的盒子模型那塊再詳細描述。

　　例如，咱們在檢測bootstrap3的樣式時，也能夠看到它用到了 * 選擇器：

　　

2.1.2 單標籤

　　單標籤選擇器是最基礎的css知識了，在上一節的瀏覽器默認樣式中，處處都用了單標籤選擇。這裏再也不贅述，css基礎薄弱的朋友，能夠先去補補課。

2.1.3 多標籤

　　多標籤選擇器通常和html上下文有關，它有如下集中分類

1. 選擇一個祖先的全部子孫節點，例如 div p{…}
2. 選擇一個父元素的全部直屬節點，例如 div > p{…}
3. 選擇某一個元素緊挨着的兄弟節點，例如 li + li{…}
4. 選擇某一個元素的全部同胞節點，例如 span ~ a{…}
5. 以上各類狀況的組合應用（不要組合過於複雜，編碼講求可讀性第一）

 

　　給你們列舉一個比較典型的應用，以下圖

　　

　　上圖中的效果應該比較常見，在各個菜單之間加下劃線。我以前的實現是：每一個li都加一個border-bottom，在把最後一個li的border-bottom去掉。

　　其實徹底不必這樣麻煩，下面一個樣式設置便可解決：

　　

　　有點意思吧？

2.2.    屬性選擇器

2.2.1 特殊1：id選擇器

　　基礎知識，再也不贅述。

　　按照許多css教程上講的，id選擇器和屬性選擇器是不一樣的兩個類別，爲何要把id選擇器放在屬性選擇器下面的呢？由於css選擇器是根據html節點的特性來設置的，id也是一個屬性，只是它是一個比較特殊的屬性，每一個html節點的id不能重複。

　　因爲特殊，並且比較經常使用，因此就單獨給id選擇器一個「#」，本質上就是一個屬性選擇器。下面兩行代碼的執行效果徹底相同：

　　

2.2.2 特殊2：class選擇器

　　基礎知識，再也不贅述。

　　class也是一個特殊的屬性，之因此把它放在屬性選擇器下，和上文將的id同樣。

2.2.3 屬性選擇器

　　屬性選擇器有兩種狀況：

1. 只經過屬性名選擇：img[title]{…      }
2. 經過屬性名和屬性值選擇：input[type=’text’]{…}

　　這兩個也是比較基礎的，再次也就再也不詳細展開了，不瞭解的朋友能夠去看看基礎教程補補課。

3. 僞類和僞元素

　　上文提到了若干種選擇器類型，僞類和僞元素可針對任何一種選擇器使用。

3.1.    僞類

　　僞類分爲UI僞類和結構化僞類。

3.1.1 UI僞類

　　UI僞類都比較簡單經常使用，我下面簡單寫幾句代碼，就再也不詳細說了。

　　

3.1.2 結構化僞類（IE低版本不行）

　　先問你們一個問題：如何實現一個表格間隔顯示背景顏色，如圖：

　　

　　最簡單的方式莫過於使用結構化僞類，一句樣式設置便可實現。

　　

 

　　結構化僞類有以下書寫選項，至於什麼意思，從字面意思便可理解：

　　

3.2.    僞元素

　　記住，僞元素是一個很是重要的概念！其中，:before和:after 很是經常使用。

　　首先，我們先看看:before和:after是怎麼回事兒。

　　

　　上圖中，咱們能夠看到，能夠爲元素先後添加內容。這裏的「內容」還能夠寫成unicode編碼的方式，以下圖：

      

　　另外，除了能夠添加內容外，你還能夠自定義執行內容的樣式，以下圖：

　　

　　

　　以上大致瞭解了二者的基本用法，下面給家介紹兩個典型的應用場景：

　　第一，你們都知道fontAwesome吧，web最流行的icon字體庫。這些小圖標的應用就是經過僞元素來實現的，以下圖：

　　

　　（不知道fontAwesome也不要緊，咱們在講到css字體時，會詳細介紹）

　　第二，清除浮動的樣式你們都知道吧？這就是一個很典型的僞元素應用場景：

　　

　　（在講到css浮動時，會專門講解clearfix）

4. 選擇器的擴展

　　選擇器原本是css的一種規則，用於爲css選擇html節點的。可是聰明的人類仍是經過選擇器創造出了其餘領域很是偉大的做品。

• jQuery

       jQuery被推廣流行的根本緣由就是它的「Query」——基於css選擇器的「Query」。如今的瀏覽器都支持querySelectAll()方法了，其實這就是W3C「抄襲」的jQuery的設計。

       相信各位web前端人員對jquery都比較熟悉了，這裏點一下便可。

• zen-Coding

　　jquery能夠經過一段css選擇器表達式從既有的html結構中選擇符合表達式的dom組，可是zen-coding反其道而行之——能夠根據css選擇器表達式創造出html節點。不得不佩服這幫人的創造力。

　　

　　若是你還沒用過zen-coding，不管你之後用不用，建議你也必定要去體驗一下！

5. 總結

　　本節總結了css的選擇器知識，知道了選擇器有若干種類型。可是類型多了不必定是個好事兒，下一節就給你們說說類型太多帶來的一個問題，以及解決方案。

---------------------------------------------------------------

 

 

1. 引言

　　上一節《css知多少（5）——選擇器》最後提到，選擇器類型過多將致使一些問題，是什麼問題呢？我們直接舉例子說明。

　　

　　上圖中，css中的兩個選擇器都是針對<span>的，並且兩個設置的顏色不同，這裏的<span>到底遵從誰的命令？

　　上面仍是比較簡單的，下面在來一個複雜的：

　　

　　上圖中的<li>該顯示成什麼顏色呢？

2. 特指度

　　要解決以上問題，咱們須要引入一個概念——特指度（specificity）。特指度表示一個css選擇器表達式的重要程度，能夠經過一個公式來計算出一個數值，數越大，越重要。

　　這個計算叫作「I-C-E」計算公式，

1. I——Id；
2. C——Class；
3. E——Element；

　　即，針對一個css選擇器表達式，遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1。

　　下面舉幾個css表達式的特指度計算結果，你們也本身算一算，是否是對：

CSS選擇器表達式	特指度計算結果
p	1
p.large	11
P#large	101
div p#large	102
div p#large ul.list	113
div p#large ul.list li	114

　　還有一個重點要注意：!important優先級最高，高於上面一切。* 選擇器最低，低於一切。

　　好了，你如今能夠返回文章一開始提出的兩個問題，根據特指度計算公式計算，哪一個的計算結果大，瀏覽器就會以哪一個爲優先。

3. 簡版規則

　　若是你嫌上面的計算過於複雜，有一個簡版規則。它只有三個規則，這三個規則能覆蓋大多數狀況，並且比較好記。

　　規則一，包含ID的選擇器賽過包含Class的選擇器，包含Class的選擇器賽過包含元素的選擇器；例以下圖，第一個特指度更高：

　　

　　規則二，不一樣選擇器的特指度比較時，不區分加載的順序（相同選擇器在層疊時，後加載的覆蓋前加載的），例以下圖，雖而後加載，可是特指度低：

　　

　　規則三，設置的樣式高於繼承的樣式，不用考慮特指度。例如：

      

      

　　其實，大部分狀況下，你經過這個簡版的規則，便可判斷選擇器的優先級。

4. 親身經歷

　　wangEditor是我本身作的一個富文本編輯器，當我最開始在博客園上配置demo頁面的時候，就遇到了css選擇器優先級的問題，如今已經解決。Demo地址：http://www.cnblogs.com/wangfupeng1988/p/4198428.html

　　對於下來菜單，例如選擇字體、字號等，我當時在wangEditor的css中是用Class來設置的，誰知道博客園頁面中有一個既有的樣式，優先級高於個人：

　　

　　致使了我配置的demo中，ul的margin-left仍是45px，而我寫的css明明已經設置成了0px。緣由就是博客園這個css選擇器優先級要高於我寫的優先級。

　　固然，後來我改爲了id選擇器，就改過了這個問題。

5. 總結

　　本節的內容是一個重點，我在許多的面試題中看到過考css優先級的問題。css優先級並不麻煩，只要你掌握了合適的方法來學習，一夜就入門個差很少，祝君好運。

---------------------------------------------------------------

 

 

1. 引言

　　從這一節開始，咱們就進入本系列的第三部分——css呈現。本部分將描述css在頁面的幾種佈局和呈現的特性。包括兩類：文字、塊。

　　第一類——文字。這部分相對比較簡單一些，例如設置字號、字體、顏色、背景色、是否加粗等。重點的地方在於設置字體、設置行高、文字相關的距離都用相對值，這些東西在《css知多少（4）——解讀瀏覽器默認樣式》那一節已經說過了。另外還有一個重點，就是web端最流行的字體庫fontAwesome，關於它我以前有一篇文章專門講過，請參見《請用fontAwesome代替網頁icon小圖標》，這裏就再也不重複去講了。

       第二類——塊。這部分的知識點很是多，重要的有：盒子模型，float，position，display。本文章講盒子模型，後面的文章會依次介紹其餘的內容。

2. 什麼是「盒子」

　　說道「盒子」我還記得好幾年以前，我還在上大學的時候，被人問道過「盒子模型」，我當時都不知道什麼意思。回到宿舍急忙上網去查，原來就是我早就知道的margin，padding和border，可是我居然不知道「盒子」這個詞。——因此，不要只知足於網上查來的代碼段、小技巧，要全面的瞭解一些知識體系。固然，後來我又知道，盒子模型不只僅是margin，padding和border，還有其餘的知識。

　　在此插一句題外話，也是我這幾天思考的一點東西。我在思考：web前端的這麼知識應該是怎樣的一個知識體系架構？以前我覺得能夠以W3C爲綱要，把W3C的東西學會了就夠了。後來發現我錯了，W3C還不全面。

　　真正全面的覆蓋了web前端知識體系的東西是——瀏覽器內核——這並非說讓你去詳細瞭解瀏覽器內核、作出一個瀏覽器。瀏覽器是web前端代碼運行的一個平臺，瀏覽器內核裏有哪些模塊，咱們就須要去學習哪些東西。詳細的先不說，之後有機會再分享。

　　這裏照顧一下初學者。初學css的朋友，一開始學css基礎知識的時候必定學過padding，border和margin，即內邊距、邊框、外邊距。他們三者就構成了一個「盒子」。就像咱們收到的快遞，原本買了一個小小的iphone，收到的確實那麼大一個盒子。由於iphone白色的包裝盒和iphone機器之間有間隔層（內邊距），iphone白色盒子有厚度，雖然很薄（邊框），盒子和快遞箱子之間還有一層泡沫板（外邊距）。這就是一個典型的盒子。

　　

　　如上圖，真正的內容就是這些文字，文字外圍有10px的內邊距，5px的border，10px的外邊距。看到盒子了吧？

3. 盒子的寬度

3.1.    設置了固定寬度的狀況下

　　遇到這種問題，我建議在查詢各類資料以前，不如先本身動手作一個實驗：

　　

　　如上圖，獲得網頁效果以後，咱們能夠用截圖工具來量一下文字內容的寬度。發現，文字內容的寬度恰好是300px，就是咱們設置的寬度。

　　所以，在盒子模型中，咱們設置的寬度都是內容寬度，不是整個盒子的寬度。而整個盒子的寬度是：（內容寬度 + border寬度 + padding寬度 + margin寬度）之和。這樣咱們改四個中的其中一個，都會致使盒子寬度的改變。這對咱們來講不友好。

　　不要緊，這個東西不友好早就有人發現了，並且已經解決，下文再說。

3.2.    充滿父容器的狀況下

　　默認狀況下，div的display:block，寬度會充滿整個父容器。以下圖：

　　

　　可是別忘記，這個div是個盒子模型，它的整個寬度包括（內容寬度 + border寬度 + padding寬度 + margin寬度），整個的寬度充滿父容器。

　　問題就在這裏。若是父容器寬度不變，咱們手動增大margin、border或padding其中一項的寬度值，都會致使內容寬度的減小。極端狀況下，若是內容的寬度壓縮到不能再壓縮了（例如一個字的寬度），那麼瀏覽器會強迫增長父容器的寬度。這可不是咱們想要看到的。

3.3.    包裹內容的狀況下

　　這種狀況下比較簡單，內容的寬度按照內容計算，盒子的寬度將在內容寬度的基礎上再增長（padding寬度 + border寬度 + margin寬度）之和。

　　

4. 再看盒子的寬度

　　前面提到，爲盒子模型設置寬度，結果只是設置了內容的寬度，這個不合理。如何解決這一問題？答案就是：box-sizing:border-box

　　

　　如上圖，div設置了box-sizing:border-box以後，300px的寬度是內容 + border + 邊框的寬度（不包括margin），這樣就比較符合咱們的實際要求了。

　　建議你們在爲系統寫css時候，第一個樣式是：

      

　　大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 選擇器中，咱們爲何不這樣作呢？

5. 縱向margin的重疊

　　這裏提到margin，不得不提一下margin的這一特性——縱向重疊。以下圖，<p>的縱向margin是16px，那麼兩個<p>之間縱向的距離是多少？

　　按常理來講應該是 16 + 16 = 32px，可是答案仍然是 16px。由於縱向的margin是會重疊的，大的會把小的「吃掉」（能夠本身去實驗）。

      

6. 用div畫「三角」

　　「三角」在平常的網頁中是很常見的，例如百度首頁：

　　

　　以及個人開源項目wangEditor（http://www.cnblogs.com/wangfupeng1988/p/4198428.html）中的頁面效果：

　　

　　你固然能夠使用背景圖片、fontAwesome來實現這一效果，可是你也能夠用div來實現這一效果，很簡單，並且能夠封裝通用：

      

7. 總結

　　這一節咱們用不小的篇幅講解了盒子模型的相關知識，比較適合初學者，可是更加適合那些沒有系統學習過css的有經驗的開發人員，仍是那句話：建議你們系統的學習知識體系。

　　下面咱們將繼續這一部分，再說一說float。

---------------------------------------------------------------

 

 

1. 引言

　　對於咱們全部的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻成天承受着它所帶給你的各類痛苦，你覺得它很簡單就那麼一點知識，但卻駕馭不了它各類奇怪的現象。

　　這就是咱們又愛又恨的——float。因此，系統的學一學float是很是很是重要的。除了看書和看博客文章以外，我推薦你們去看一個奇葩（聲音頗有磁性，你懂得）錄製的教程《CSS深刻理解之float浮動》，講的很好很透徹。

2. 從新認識float

2.1.    誤解和「誤用」

　　既然提到「誤用」，各位看官就此想一想，本身平日是怎麼使用float的？另外，既然「誤用」加了引號，就說明這樣的使用並非真正的誤用，而是誤打誤撞使用以後，帶來了真正的效果。

　　這樣一問你們，我想絕大多數用float都是爲了——橫向排版、或者多列布局。這樣的使用是正確的，大部分人都這樣使用，bootstrap的柵格系統也是使用了float來實現的，而且在css3被普及以前，多列布局的最佳解決方案也是使用float——要否則你就用table。

　　可是，這樣使用確實是對float的一種誤解和「誤用」，由於float被設計出來的初衷是用於——文字環繞效果。即，一個圖片一段文字，圖片float:left以後，文字會環繞圖片。

　　

　　可是，當時的多列布局和橫向排版主要是依靠table實現，後來人們見見的發現，使用table將致使代碼量大、混亂、不利於SEO，而後發現float+div是一個很不錯的排版解決方案，因而乎——過去幾年「css+div」頁面排版一直是一個熱門話題，也是各類高大上的面試題必考的一項。

　　初學float的同窗，你若是沒有從最基礎的知識入手，而是從網絡的零散以後或者同事同窗的零散代碼學起的話，你可能只知道float是用來排版的，可是你殊不知道float的許多個特性，這就致使了你在使用float時的許多問題。不信請看下文。

2.2.    破壞性

　　首先你們來看兩個demo，以下圖。第一個demo是一個簡單不過的例子，顯示效果也很正常。第二個demo，惟一的區別就在於<img>加了float:left，上層的<div>卻出現了「坍塌」現象。

　　

　　不過，這就是float的「破壞性」——float破壞了父標籤的本來結構，使得父標籤出現了坍塌現象。致使這一現象的最根本緣由在於：被設置了float的元素會脫離文檔流。

　　初次接觸「脫離文檔流」的朋友能夠這樣理解：div是父親，img是它的兒子，本來好好的父子關係，本來爺倆能夠體面的展現一個包含關係的效果。直到有一天，img被設置了float。老天爺（瀏覽器）規定，任何float元素都不容許再呆在本身的家族中，因而img被逐出家門，斷絕和div父子關係。因而乎，div沒有了img兒子，也就不能再展現這種父子的包含關係，因而二者就各過各的，互不相干。——這樣一說，容易理解了吧？

　　可是，永遠都不要忘記float被設計的初衷——實現文字環繞效果。當div中有文字時，文字仍是會環繞在img周圍的。以下圖：

　　

      

　　好了，你們如今已經知道了float具備破壞性，可能也有不少朋友以前就知道這一特性，可是你有沒有思考一下：float爲何會被設計成具備破壞性，爲何會脫離文檔流？這一點很是重要！其實緣由很是簡單——爲了要實現文字的環繞效果？

　　有人可能會問：啊？你剛纔不是說了float的初衷就是實現文字環繞效果嗎？和破壞性有啥關係？

　　這時我會反問你：若是float不讓父元素坍塌，能實現文字環繞效果嗎？給你兩個圖看看你就知道了。看不明白的能夠給我留言討論。

　　

2.3.    包裹性

　　「包裹性」也是float的一個很是重要的特性，你們用float時必定要熟知這一特性。我們仍是先從一個小例子看起：

　　

　　如上圖，普通的div若是沒有設置寬度，它會撐滿整個屏幕，在以前的盒子模式那一節也講到過。而若是給div增長float:left以後，它忽然變得緊湊了，寬度發生了變化，把內容「王福朋」三個字包裹了——這就是包裹性。div設置了float以後，其寬度會自動調整爲包裹住內容寬度，而不是撐滿整個父容器。

　　注意，此時div雖然體現了包裹性，可是它的display樣式是沒有變化的，仍是block。

　　

　　說道這裏我們回顧一下，在以前的博客中，也提到了「包裹性」，是哪些樣式？你能夠在此思考一下，我會在博客的評論中給出答案 。

　　

　　知道了包裹性以後，咱們仍是繼續思考：float爲何要具備包裹性？其實答案還得從float的設計初衷來尋找，float是被設計用於實現文字環繞效果的。文字環繞圖片比較好理解，可是若是想要讓文字環繞一個div呢？此時div不被「包裹」起來，那麼如何去實現環繞效果？

　　道理很簡單，你也多是那種一點即通的聰明人，可是關鍵在於思考。

2.4.    清空格

　　float還有一個你們可能不是很熟悉的特性——清空格。按照管理，咱仍是先舉例子說明。

　　

　　上圖中。第一個例子，正常的img中間是會有空格的，由於多個<img>標籤會有換行，而瀏覽器識別換行爲空格，這也是很正常的。第二個例子中，img增長了float:left的樣式，這就使得img之間沒有了空格，四個img牢牢挨着。

　　若是你們以前沒注意，如今想一想以前寫過的程序，是否是有這個特性。爲何float適合用於網頁排版（俗稱「砌磚頭」）？就是由於float排版出來的網頁嚴絲合縫，中間連個蒼蠅都飛不進去。

　　「清空格」這一特性的根本緣由是因爲float會致使節點脫離文檔流結構。它都不屬於文檔流結構了，那麼它身邊的什麼換行、空格就都和它不要緊的，它就儘可能的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質。

　　

　　（float內容比較多，我們分上、下兩篇來介紹，這是上篇。下篇將立刻發出，敬請期待）

---------------------------------------------------------------

 

　float內容比較多，我們分上、下兩篇來介紹，上篇已經寫完，這是下篇。建議你們先把上篇看了，再來看下文，精彩內容不要掠過啊。

1. 清除float

　　《上篇》中咱們提到，float具備「破壞性」，它會致使父元素「坍塌」，這將不是所要看到的。如何去避免float帶來的這種影響呢（也就是咱們常說的「清除浮動」） ？方法有不少種，我在這裏介紹4中供你們參考，你們可根據實際狀況來選擇。

　　先介紹兩個比較簡單，可是不經常使用的解決方法：

1. 爲父元素添加overflow:hidden
2. 浮動父元素

　　這兩個方法比較簡單，在這裏也就再也不演示了，你們有興趣的能夠本身去試試。

　　第三種方法也不是很經常使用，可是你們要知道clear:both這個東西。經過在全部浮動元素下方添加一個clear:both的元素，能夠消除float的破壞性。

　　

      

　　接下來的第四種方法是你們最須要掌握的，也是我推薦的，也是bootstrap正在用的——clearfix——不知道的同窗必定要去搜一下，要否則就太low了！

　　

　　上圖中，咱們定義一個.clearfix類，而後對float元素的父元素應用這同樣式便可，很是簡單吧？注意，你可能會搜出不一樣版本的clearfix，有的代碼比上圖中的代碼多，你不用理會它，就按照個人貼圖的代碼寫就行。

　　究其原理，其實就是經過僞元素選擇器，在div後面增長了一個clear:both的元素，跟第三種方法是一個道理。

2. 合理的使用float佈局網頁

　　《上篇》中提到，咱們使用float作網頁佈局，是一種誤解和「誤用」。估計大多數人誤解了float的本來設計初衷，可是這裏的「誤用」是要加引號的，由於這是一種無意插柳的應用。即，用float作網頁佈局是很合情合理的，鼓勵同志們繼續使用。

　　可是用float作網頁佈局也是有許多技巧的，準確的應用會提升網頁的靈活性。下面我列舉兩個經常使用的網頁佈局案例，僅供你們參考，不喜勿噴，善意留言！

　　

　　第一，三列布局

　　博客園的主頁就是經典的三列布局，很明顯的左、中、右。

　　

　　對於這種佈局，我給出的佈局方案是：

　　

 

　　第二，兩列布局

　　以博客園一篇文章的連接爲例，它分爲左、右結構

　　

　　對於這種佈局的格式，個人設計方案是：

　　

3. BootStrap的柵格系統

　　若是您熟悉並使用bootstrap，那麼您將沒必要本身去操心網頁佈局，由於bootstrap已經把網頁分紅了12列，您能夠隨意設置多列布局，很是方便。這就是bootstrap的柵格系統。此處不會詳解柵格系統，就是簡單看看柵格系統的實現，它是用float實現的。

　　

　　經過瀏覽器監控每一個單元格的css樣式，能夠發現，單元格經過百分比設置了寬度，經過float:left設置了浮動。

　　

　　對於父元素的清除浮動，bootstrap使用的就是《上篇》中說的clearfix，你們能夠自行檢測一下試試。

　　多看看經典軟件的源碼是學習的一個捷徑，學習css能夠看看bootstrap，學習js能夠看看jquery……

4. 總結

　　float內容很是多，有的css書籍中，也很難全面的講解float這一知識點的所有內容。這就須要本身去多多看書，多多實踐，多多看經典系統的源碼，才能作到融會貫通，舉一反十。

　　你們共勉吧。

---------------------------------------------------------------

 

1. 引言

　　網頁的全部元素，除了「塊」就是「流」，並且「流」都是包含在「塊」裏面的（最外層的body就是一個「塊」）。在本系列一開始講《瀏覽器默認樣式》的時候，你們也都看到了瀏覽器默認樣式中規定了html元素哪些屬於「塊」（剩下的就是「流」）。這部分知識很是重要也很是基礎，所以在全部的前端面試題中，都會問道哪些元素是「塊」哪些元素是「流」。

　　

　　其實，這部分知識都囊括在display這個樣式設置中。在網上查找出display全部的屬性，你會發現它有不少，可是不是每一個都經常使用，甚至大部分你都沒有用過。這個不要緊，學以至用，用不到的就能夠先不學，知道就行，何時用，何時再去詳細學——前提是你知道有這麼個東西，不然無從下手。

　　

　　看上圖。經常使用的屬性有：none、block、inline、inline-block、inherit，其中inherit是繼承父元素的樣式，不用多說，其餘的幾個會在下文詳解。其餘的都不經常使用，可是有一些仍是須要點出來，其實這些已經在《瀏覽器默認樣式》一節講到了，這裏簡單描述一下，詳細的能夠參考瀏覽器默認樣式一節。

1. list-item：經過它能夠模擬li列表樣式；
2. table：也是一個「塊」，但和block相比，table具備包裹性；
3. table-cell：最新的多列布局解決方案；

2. inline

　　經常使用的inline就是文字和圖片，其實inline真沒什麼好說的，你們能夠把它想象成一個杯子裏的水，它是「流」，是沒有大小和形狀的，它的寬度取決於父容器的寬度。

　　所以，針對inline的標籤，你設置寬度和高度是無效的，經過監控能夠知道，該元素實際的寬度和高度都是auto，並非咱們設定的值。

　　

      

　　一個很基礎的問題：如何把inline元素轉換成「塊」元素？相信絕大部分人的回答是display:block，可是你應該知道這不是一個惟一的答案。至少我設置display:table也是能夠的吧？

       還有兩種狀況你應該去了解（若是你不知道的話）：

       第一，對inline元素設置float

       仍是剛纔那個例子，咱們對span元素添加一個float:left，運行看看效果，你就會大吃一驚。從顯示的效果和監控的結果上看來，span元素已經「塊」化。注意，上一節剛剛講完float，不要忘記float的「破壞性」、「包裹性」，在這裏一樣適用。

　　

       第二，對inline元素設置position:absolute/fixed

       仍是有同一個例子作演示，此次在span元素上加上absolute/fixed，效果你們應該能猜到，和加上float的效果相同。至於absolute/fixed有什麼特性，會在下一節介紹position時提到。

　　

3. block

　　本系列有一節重點講解了《盒子模型》，不知道你們看沒看過，或者說你已經很瞭解盒子模型了。

　　其實對於block，我以爲就是「盒子模型」。一個元素設置了block，它就必須遵循盒子模型的規則。所以，這裏也再也不去詳細寫它了，你們能夠去盒子模型那一節好好看看，就那麼點內容。

4. inline-block

　　這個話題還得從《瀏覽器默認樣式》這一節開始。瀏覽器默認樣式中規定了幾個html元素爲display:inline-block，回顧一下。

　　

　　初學者對於inline-block可能比較陌生，不要緊，一步一步來。首先，你應該知道inline是什麼樣子的，就是通常的文字、圖片；其次，你應該知道block是什麼樣子的，通常的div就是；最後，inline-block顧名思義，它既有inline的特性，又有block的特性，你們能夠想一想通常的button、input是什麼樣子的。

　　那button舉例子。咱們在頁面中輸入若干個<button>，發現它們是「流」式排列的（能夠對比一下若干個<div>的排列方式）。可是針對一個button，咱們還能夠自定義修改它的形狀，這樣就有「塊」的特徵。

      

　　所以，inline-block的特色能夠總結爲：外部看來是「流」，可是自身確實一個「塊」。不知道你們理解也無？

5. 總結

　　我看《css設計指南》書中關於display的內容就寫了不到一頁，側面反映出display的內容不是不少，可是也看你怎麼去理解和應用，若是詳細品味起來，仍是頗有意思的。你們有意見的能夠留言交流。

---------------------------------------------------------------

 

1. 引言

　　本文將用一篇文章介紹position（定位），在學習position以前，咱們應該去思考一個問題：什麼狀況下咱們須要定位？若是沒有定位將沒法知足咱們怎樣的需求？咱們要知道，被人類創造出來的每個知識，都有它的用途，都要解決一些以前遇到的問題。

　　若是沒有定位，咱們作出來的網頁將會是循序漸進的自上而下、自左而右的平鋪在瀏覽器上，外加經過margin和padding調整一下間距，還有就是經過float來浮動某些元素。作一些簡單的網頁這樣就夠了，例如N年以前的yahoo，雖然如今看來很low。

　　

　　可是有些狀況下，這種循序漸進的網頁排版知足不了咱們的要求，咱們須要某些元素跑出來，懸浮在網頁上面，並且須要給它指定一個位置。這時候咱們就須要用到了position，並且是非用不可。以下圖：

　　

2. relative

　　查資料可知道，position一共有四個可選屬性：static/relative/absolute/fixed。其中static（靜態定位）是默認值，即全部的元素若是不設置其餘的position值，它的position值就是static，有它跟沒有它同樣。就很少介紹了。

　　相對定位relative能夠用一個例子很輕鬆的演示出來。例如咱們寫4個<p>，出來的樣子你們不用看也能知道。

      

　　而後咱們在第三個<p>上面，加上position:relative而且設置left和top值，看這個<p>有什麼變化。

　　

　　上圖中，你們應該要識別出兩個信息（相信大部分人會忽略第二個信息）

1. 第三個<p>發生了位置變化，分別向右向下移動了10px；
2. 其餘的三個<p>位置沒有發生變化，這一點也很重要。

　　所以，relative會致使自身位置的相對變化，而不會影響其餘元素的位置、大小的變化。這是relative的要點之一。還有第二個要點，就是relative產生一個新的定位上下文，下文有關於定位上下文的詳細介紹，這裏能夠先經過一個例子來展現一下區別：

　　

　　注意看這兩圖的區別，下文將有解釋。

3. absolute

　　說道absolute，推薦你們去看一個視頻教程，講師對absolute講的很是透徹，本文的一些內容也是參考了這篇教程，好東西你們一塊兒分享嗎！

　　話歸正傳，我們仍是拿以前那個例子說事兒，先寫一個基本的頁面——4個<p>

　　

　　而後，咱們把第三個<p>改成absolute，看看會發生什麼變化。

　　

　　從上面的結果中，咱們能看出幾點信息：

1. absolute元素脫離了文檔結構。和relative不一樣，其餘三個元素的位置從新排列了。只要元素會脫離文檔結構，它就會產生破壞性，致使父元素坍塌。（此時你應該能馬上想起來，float元素也會脫離文檔結構）
2. absolute元素具備「包裹性」。以前<p>的寬度是撐滿整個屏幕的，而此時<p>的寬度恰好是內容的寬度。
3. absolute元素具備「跟隨性」。雖然absolute元素脫離了文檔結構，可是它的位置並無發生變化，仍是老老實實的呆在它本來的位置，由於咱們此時沒有設置top、left的值。
4. absolute元素會懸浮在頁面上方，會遮擋住下方的頁面內容。

　　最後，經過給absolute元素設置top、left值，可自定義其內容，這個都是平時比較經常使用的了。這裏須要注意的是，設置了top、left值時，元素是相對於最近的定位上下文來定位的，而不是相對於瀏覽器定位。下文立刻會講定位上下文。

　　可是有時候設置top、left值並非定位的最佳解決方案。例如想要元素A緊跟在元素B的上方，可經過設置元素B爲absolute，而後調整B的margin值來肯定，這樣更有效率。以下圖：

　　

　　以上提到的信息，若是展開來講，內容很是多，並且用文本也很差描述，仍是推薦你們去看慕課網的那篇視頻教程，講的頗有意思。

　　

　　最後，再提幾個小知識點。

1. 設置absolute會使得inline元素被「塊」化，這在上一節將display時已經說過；
2. 設置absolute會使得元素已有的float失效。不過float和absolute同時使用的狀況很少；
3. 上文提到了absolute會使元素懸浮在頁面之上，若是有多個懸浮元素，層級如何肯定？答案是「後來者居上」

4. fixed

　　其實fixed和absolute是同樣的，惟一的區別在於：absolute元素是根據最近的定位上下文肯定位置，而fixed永遠根據瀏覽器肯定位置。

　　上文不少次提到了「定位上下文」，那麼它究竟是一個什麼東東？答案立刻揭曉。

5. 定位上下文

　　5.1 relative的定位

　　relative元素的定位永遠是相對於元素自身位置的，和其餘元素不要緊，也不會影響其餘元素。

　　

　　5.2 fixed的定位

　　fixed元素的定位永遠是相對於瀏覽器邊界的，和其餘元素沒有關係。可是它具備破壞性，會致使其餘元素位置的變化。

　　

　　5.3 absolute的定位

　　absolute的定位相對於前二者要複雜許多。若是爲absolute設置了top、left，瀏覽器會根據什麼去肯定它的縱向和橫向的偏移量呢？答案是瀏覽器會遞歸查找該元素的全部父元素，若是找到一個設置了position:relative/absolute/fixed的元素，就以該元素爲基準定位，若是沒找到，就以瀏覽器邊界定位。以下兩個圖所示：

　　

　　

　　上圖中的「某一層祖先元素」就是該absolute元素的定位上下文。講到這裏，咱們上文中的那個圖，你們能看明白了吧？還有不明白的能夠留言給我。

　　

 

6. 總結

　　我感受position這篇文章是這一系列中最難寫的文章，它的知識點比較多，並且很是難理解，所以position也是css的一個重點知識，不懂position的前端開發人員要抓緊惡補一下。

　　寫了這麼多，感受仍是寫的不是很全面，或者不是很系統，很但願你們把本身的意見反饋給我。這個系列博客算是這個教程的初版，我計劃後期抽時間會錄製一個視頻版，到時候但願會更加全面系統一些。

---------------------------------------------------------------