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都將導致元素脫離文檔流
（針對13、14、15問題，可以參考教程http://www.imooc.com/learn/121和http://www.imooc.com/learn/192，講的很好，只是講師的聲音很有“磁性”，要忍耐住）
16. css清除浮動有三種方法，是否知道。你平時是怎么清除浮動的？業內最常用的經典清除浮動樣式是什么？?重要?
提示：搜索“clearfix”
17. 相對定位relative如何理解，它和絕對定位absolute的最根本區別是什么？
提示：一個在文檔流內，一個在文檔流外
18. “定位上下文”是否知道？?重要?
19. 經典的網頁三列布局如何實現？如果不考慮IE6、7，最好的實現多列布局的方式是什么？?重要?
提示：table-cell
20. 是否用過inline-block，IE6、7如何兼容？
提示：比較簡單，百度即可
3. 結束
當前就總結了這么多問題，大家可以對照著問題想想答案。如果你覺得還有寫比較重要的知識，可以給我留言，我將會考慮加入進來。
另外，接下來我將寫一個關于css重點知識的簡短的系列文章，以及結合我做過的wangEditor富文本框以及對bootstrap框架的了解，把本文這些問題介紹一下。近期工作很忙，更新起來可能會很慢，敬請期待吧！
---------------------------------------------------------------
?
1． 一個段子
開題不必太嚴肅，寫博客也不像寫書，像聊天似的寫東西是最好的表達方式。
?????? 記得之前看過一個段子，也可能是一件真事兒，這不重要。大體內容如下：一個香港的教授說：我們香港的大學和大陸的大學差的很遠啊，大陸的大學連看門保安都懂得哲學，因為當你想要進入校園時，保安都會問你一個很哲學的問題“你是誰，你從哪里來，你到哪里去？”。
?????? 看完段子的第一反映肯定是很自嘲的笑了，笑了之后就忘了，該干嘛干嘛去了。
?????? 但是我覺得這句話確實有那么一點高達上的意思，雖然我不知道什么是哲學。“你是誰，你從哪里來，你到哪里去”，如果映射到我們這次CSS教程上，可以提這么幾個問題：
?
看過我其他教程的朋友都知道我的原則：我要寫東西，必須又一個我覺得很特別而且很合理、高效的思路，如果沒有我寧可不寫。大部分寫CSS的人一上來可能寫選擇器，但是我不會那樣。
閑話不說。要想從根上了解這些問題，還是先從瀏覽器開始吧。
2． 瀏覽器是如何工作的
之前看過一篇文章，叫做《瀏覽器的工作原理：新式網絡瀏覽器幕后揭秘》。文章言簡意賅的介紹了瀏覽器的工作過程，web前端程序猿最好了解一下。在此另外推薦一本書《WebKit技術內幕》，筆者很早就關注這本書，已列入近期的讀書計劃。
?????? 文章中的內容暫且不詳細提，我們先“斷章取義”的只說CSS相關的部分。
?
?????? 上圖是webkit內核渲染html和css的流程圖。大家可以從圖中看到，html的解析是一條線，css的解析是一條線，兩者會在某一點結合，形成最終的視圖。
?????? 如果我們以CSS為重點看，從上圖中我們可以總結出學習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． 頁面呈現
頁面呈現可以分為兩類——文字，塊。
本系列會拿出很大的篇幅去講解其中的基礎知識，以及他們的一些重點應用。
6． 布局
布局是css的重頭戲，每個系統的布局都有其各自的特點。無好無壞，肯定是各有優缺點，不妨拿出幾個比較典型的例子來一起分析一下。例如：
?
上一節《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、h1、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，注意，IE6、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的三種形式，大家覺得哪種形式最好？區別是什么？
相信看到這里大家會發現，通過一個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是這樣設置的。
希望知道答案的朋友，不吝賜教，給我和大家分享一下，謝謝了。
11. 總結
大家看著是不是很過癮？反正我寫著是挺過癮的，雖然打字、寫代碼、畫圖很累，不過很有成就感——再有你們的鼓勵就更好啦！
首先，我覺得瀏覽器默認樣式非常重要，所有詳細解讀其中的重點，希望能給大家帶來一些啟發。沒有解讀到的就是一些比較容易理解的，或者不常用的（例如打印的樣式設置），可以直接去看看源碼。
其次，這里面也包含了我的一個疑問，很慚愧沒有看明白。即便是一時半會兒解決不了，給別人分享一下，讓你知道了一個疑問，對你來說，應該也是一個收獲。
---------------------------------------------------------------
?
1. 引言
從本節開始，就進入本系列的第二個部分——css和html的結合——說白了就是選擇器。
CSS中定義了樣式，如何將這些樣式設置到相應的html節點上？就不得不通過選擇器。讓瀏覽器知道css選擇了哪一個dom節點，瀏覽器就會乖乖的把相應的樣式渲染成視圖。
至于css能把頁面渲染成什么樣子，這是本系列的第三部分。
第一部分講css樣式的加載和層疊，第二部分講選擇器以及選擇器的等級，第三部分講呈現的各種樣式（背景、字體、定位、浮動等）。這樣一個思路，也正式瀏覽器使用css的流程，是最有效的學習思路。（第二節中講過，此處再回顧一遍）
2. 選擇器
說道css選擇器，大家都知道有許多種，但是真要你去掰著手指頭數一數的話，你可能需要數幾分鐘。其實這么多選擇器，完全可以分為兩類：
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上下文有關，它有以下集中分類
?
給大家列舉一個比較典型的應用，如下圖
上圖中的效果應該比較常見，在各個菜單之間加下劃線。我之前的實現是：每個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 屬性選擇器
屬性選擇器有兩種情況：
這兩個也是比較基礎的，再次也就不再詳細展開了，不了解的朋友可以去看看基礎教程補補課。
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”計算公式，
即，針對一個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中供大家參考，大家可根據實際情況來選擇。
先介紹兩個比較簡單，但是不常用的解決方法：
這兩個方法比較簡單，在這里也就不再演示了，大家有興趣的可以自己去試試。
第三種方法也不是很常用，但是大家要知道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是繼承父元素的樣式，不用多說，其他的幾個會在下文詳解。其他的都不常用，但是有一些還是需要點出來，其實這些已經在《瀏覽器默認樣式》一節講到了，這里簡單描述一下，詳細的可以參考瀏覽器默認樣式一節。
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>有什么變化。
上圖中，大家應該要識別出兩個信息（相信大部分人會忽略第二個信息）
因此，relative會導致自身位置的相對變化，而不會影響其他元素的位置、大小的變化。這是relative的要點之一。還有第二個要點，就是relative產生一個新的定位上下文，下文有關于定位上下文的詳細介紹，這里可以先通過一個例子來展示一下區別：
注意看這兩圖的區別，下文將有解釋。
3. absolute
說道absolute，推薦大家去看一個視頻教程，講師對absolute講的非常透徹，本文的一些內容也是參考了這篇教程，好東西大家一起分享嗎！
話歸正傳，咱們還是拿之前那個例子說事兒，先寫一個基本的頁面——4個<p>
然后，我們把第三個<p>改為absolute，看看會發生什么變化。
從上面的結果中，我們能看出幾點信息：
最后，通過給absolute元素設置top、left值，可自定義其內容，這個都是平時比較常用的了。這里需要注意的是，設置了top、left值時，元素是相對于最近的定位上下文來定位的，而不是相對于瀏覽器定位。下文馬上會講定位上下文。
但是有時候設置top、left值并不是定位的最佳解決方案。例如想要元素A緊跟在元素B的上方，可通過設置元素B為absolute，然后調整B的margin值來確定，這樣更有效率。如下圖：
以上提到的信息，如果展開來說，內容非常多，而且用文本也不好描述，還是推薦大家去看慕課網的那篇視頻教程，講的很有意思。
最后，再提幾個小知識點。
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的前端開發人員要抓緊惡補一下。
寫了這么多，感覺還是寫的不是很全面，或者不是很系統，很希望大家把自己的意見反饋給我。這個系列博客算是這個教程的第一版，我計劃后期抽時間會錄制一個視頻版，到時候希望會更加全面系統一些。
---------------------------------------------------------------
轉載于:https://www.cnblogs.com/haojiahong/p/4763036.html
總結
- 上一篇： (转)java.lang.Runtime
- 下一篇： 调用python 报R6034 错误