再次閱讀《精通CSS-高級Web標準解決方案（第二版）》

昨天（2015年11月21日） 在咱們學校舉行了大型招聘會。我面試了三家企業。有一家企業是先作筆試題的，作完後發現本身仍是不少細節處理得不夠。不管還有沒有二面，我仍是要從新把《精通CSS》和《JavaScript高級程序設計》這兩本書從新看一遍。

《精通CSS》

第一章：

語義化的好處：①本身更易處理（搜索和避免沒必要要的代碼膨脹） ②利用SEO ③屏幕閱讀的用戶能夠依靠標題進行頁面導航

div（division，部分）對塊級元素進行分組，span對行內元素進行分組或標識。

XHTML 1.0和 HTML 4.01之間主要差別是它遵照XML編碼約定：全部XHTML屬性必須包含引號，全部元素必須是封閉的。

DTD（文檔類型定義）是一組機器可讀的規則，它們定義XML或HTML的特定版本中容許有什麼，不容許有什麼。在解析網頁時，瀏覽器將使用這些規則檢查頁面的有效性而且採起相應的措施，瀏覽器經過分析頁面的 DOCTYPE 聲明來了解要使用哪一個DTD。

DOCTYPE當前有兩種風格：嚴格(strict) 和過渡 (transitional)。後者的目的是幫助開發人員從老版本遷移到新版本。所以，HTML 4.01和XHTML 1.0過渡版本仍然容許使用已廢棄的元素（如font），但這些語言的嚴格版本禁止使用廢棄的元素。

瀏覽器模式：標準模式和混雜模式

 

第二章：

選擇器：

經常使用選擇器：

　　類型選擇器（元素選擇器）、後代選擇器

僞類：

　　連接僞類 :link和:visited，只能用於錨元素

　　動態僞類 :hover、:active和:focus。理論上可應用於任何元素。IE6 只能對 錨連接 應用:active 和:hover選擇器，徹底忽略:focus （已驗證）。 IE 7在任何元素上都支持:hover，但忽略:active和:focus（書上原話），但在IE11選擇IE7文檔模式或IETester時，a標籤是支持:active。

　　最後，能夠把僞類組合使用，以致可建立更復雜的行爲，如 a:visited:hover{} 讓已訪問與未訪問連接實現不一樣的鼠標懸停效果。

通用選擇器：*

高級選擇器（ CSS 2.1和CSS3選擇器）：

　　大多數現代瀏覽器（IE7及以上）支持這些高級選擇器，但IE6和更低版本不支持。

　　子選擇器>（IE7及以上），但在IE7中有個小Bug，若是父元素和子元素之間有HTML註釋，就會出問題（測試時，發現並無問題）。固然，對於IE6，能夠利用通用選擇器*模擬這個效果，div p{/*設置效果*/} div p *{/*還原原來的值*/}

　　相鄰同胞選擇器+，一樣，在IE7，與自選擇有一樣的BUG，致使失效（已驗證）。

　　後面兄弟選擇器~（書上沒有），經測試，IE7支持。

　　屬性選擇器：a[title]、a[rel="nofollow"] 等所有屬性選擇器IE7都支持

 

層疊和特殊性

特殊性

　　!important > 行內樣式 > ID > 類、僞類和屬性選擇器 > 類型選擇器（元素選擇器）和僞元素選擇器

層疊：當兩個規則具備相同的特殊性時，後定義的規則優先

繼承

　　直接應用於元素的任何樣式總會覆蓋繼承而來的樣式。這是由於繼承而來的樣式的特殊性爲空。 這就解釋了「爲何a標籤和標題標籤要單獨指定的樣式」這個問題。以下圖，chrome瀏覽器下。a標籤和h2標籤的默認樣式。

 

第三章 可視化格式模型

盒模型

頁面上每一個元素都被看做一個矩形框，該框由元素的內容、內邊距、邊框和外邊距（透明的）組成。

CSS2.1的outline屬性，輪廓繪製在元素框（我的認爲：即不包括外邊距的矩形框）上，因此不影響元素的大小或定位（這裏，對我產生一個誤區，即定位是按元素框定位（即不包括外邊距），其實定位是包括外邊距的，即矩形框）。支持IE8及以上。

IE6的混雜模式下，擁有相似box-sizing:border-box的特性，即指定的寬度是內容、內邊距和邊框的寬度總和。

外邊距疊加：即當兩個或更多垂直外邊距相遇時，它們將造成一個外邊距（高度爲較大者）。狀況有以下幾種：

①兩個同級上下元素   ②祖先元素與內嵌元素（沒有內邊距或邊框隔開,就祖先元素overflow:hidden/auto/scroll可有隔開的做用，避免疊加）   ③自己是空元素時,自身上下外邊距也會重合（沒有邊框或內邊距隔開） ，固然前面幾種狀況能夠結合發生。

只有普通文檔流中，塊框的垂直外邊距纔回發生疊加。行內框、浮動框或絕對（我的認爲包括絕對定位和固定定位）定位框之間的外邊距不會發生疊加。

 

可視化格式模型

CSS中有3種基本的定位機制：普通流、浮動和絕對定位。

行內框：垂直內邊距、邊框和外邊距不影響行內框的高度。一樣，顯式設置高度或寬度也沒有影響。修改行內框尺寸的惟一方法是修改行高或水平內邊距、邊框、外邊距。

行框：由一行造成的水平框稱爲行框。行框的高度老是足以容納它包含的全部行內框。

display:inline-block; 讓元素像行內元素同樣水平依次排列，但框的內容仍然符合塊級框的行爲。支持IE8及以上。

絕對定位：絕對定位的元素的位置是相對於最近的已定位祖先元素，如無，則根據用戶代理的不一樣，初始包含塊多是畫布（是iframe嗎？）或HTML元素。

在IE6中有個BUG：相對於相對定位的框的右邊或頂部設置絕對定位的框的位置，那麼須要確保相對定位的框已設定了尺寸（測試時發現，塊級元素只需設置高度）。不然，絕對定位元素會錯誤地相對於畫布定位這個框（已驗證）

固定定位：IE6不支持，IE7部分支持，可是實現中有許多bug。

 

浮動：浮動的框可左右移動，直到它的外邊緣（包括外邊距）碰到包含框或另一個浮動框的邊緣。由於浮動框不在文檔的普通流，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

若是包含塊太窄，以至不能同時水平排列3個浮動元素，且浮動元素的高度不一樣，那麼當它們向下移動時，可能被其它浮動元素卡主。

前面說到浮動會讓元素脫離文檔流，再也不影響不浮動的元素。實際上，框的文本內容（不止文本）會受到浮動元素的影響，會移動以留出空間，用技術術語來講，浮動元素旁邊的行框被縮短，從而給浮動元素留出空間，所以行框圍繞浮動框。

 

要想阻止行框圍繞在浮動框的外邊，須要對包行這些行框的元素應用clear屬性。清除浮動時，瀏覽器給元素頂上添加足夠的外邊距，使元素的頂邊緣降低到浮動框下面。

子元素浮動後，脫離文檔流，不能撐起父元素高度，要撐起父元素高度的方法有：

①overflow：hidden/auto

②父元素也浮動

③.clearfix:after{content:" ";height:0;visibility:hidden;display:block;clear:both} 或.clearfix:after{content:" ";display:table;clear:both}。因爲IE6/7不支持:after僞元素，因此要使用如下hack: .clearfix{zoom:1; //trigger IE haslayout}

④增長額外標籤，而後clear

 

第四章 背景圖像效果

CSS規範不容許混合使用多種單位。實際上，瀏覽器是支持的。

opacity：IE8及如下不支持，可是能夠用  filter:alpha(opacity=80) 指定透明度。opacity 是繼承的，它的後臺元素都會受影響。另外也是能夠疊加的，父元素0.8，子元素0.8，那麼子元素是0.64。

rgba：IE8及如下不支持，是針對opacity而生的，不影響後代元素。

IE7 支持 min-height、max-height

許多流行的屏幕閱讀器會忽略那些display值爲none或visibility爲hidden的元素。因此這會形成嚴重的可訪問性問題。  

解決辦法是：經過設置很是大的負值文本縮進：text-indent:-5000em;（text-indent適用於塊級元素）

 

IE6不直接支持PNG透明度的，對於IE6，書上列出兩種方法（網上更多）：

①在針對IE6的CSS文件裏：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/my-image.png', sizingMethod='crop');/* 網上說，路徑是相對於html的，而不是CSS的。*/ 
background:none;/* 取消原來的背景圖，防止遮住該過濾器。*/

　　

②IE PNG fix技術。利用Microsoft專有的CSS擴展——行爲（behavior）。下載合適的.htc文件，並在IE6專用的樣式表引用。

img, div{

　　behavior:url(iepngfix.htc)

}

　　

備註：屏幕閱讀器是指將屏幕顯示內容轉爲聲音或布萊葉盲文顯示，以幫助視力障礙者使用電腦的軟件。

 

第五章 對連接應用樣式

爲提升頁面的可訪問性，在定義鼠標懸停狀態時，最好在連接上添加:focus僞類。在經過鍵盤移動到連接時，也可讓連接顯示的樣式與鼠標懸停時相同。

a:hover, ac:foucs{} /* 這也是bootstrap用到的 */

正確寫法：

a:link, a:visited{text-decoration: none;}

a:hover, a:focus, a:active{text-decoration:underline}

若是次序反過來，則下劃線效果就不起做用（由於層疊形成的，當兩個規則具備相同的特殊性時，後定義的規則優先）：

對於a標籤，最好按如下順序： a:link, a:visited, a:hover, a:focus, a:active (LVHFA)

對於不支持背景圖動畫的，常會顯示第一幀，以確保平穩退化。（連IE5都支持 --！）

 

第六章 對列表應用樣式和建立導航條

初始化 ul{margin:0;padding:0;list-style-type:none;}

不對應用列表項應用樣式，而是對其中包含的錨連接應用樣式，由此提供更好的瀏覽器兼容性。

 

第七章 對錶單和數據表格應用樣式

表格：

表格特有的元素：capiton用於指定表格的標題；summary屬性用於描述表格內容。 

<table summary="I am a Description">
    <caption>表格標題</caption>
</table>

　一個table裏，tbody 、tfooter只能使用一個，而tbody能夠將複雜的表格劃分爲多個部分。

CSS的border-spacing屬性能夠控制單元格之間的距離。但IE7及如下不支持。所以須要老式但可靠的cellspacing屬性（支持IE6和IE7）。嚴格來講，該屬性是表現性的。

表單：

對於表單，對於必填域和提示，最適合用em或strong元素。

OS X等許多系統爲了保持一致，禁止修改input按鈕樣式，但button不受限制。

對於須要隱藏的label，將display設置爲none會住址許多屏幕閱讀器訪問它們。其中有兩種方法：

①設置較大的負文本縮進將標籤訂位到屏幕外（書上的）

②Bootstrap的.sr-only

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin: -1px;
    overflow:hidden;
    clip:react(0,0,0,0);
    border:0;  
}

　

第八章 佈局

IE6 不支持margin:auto居中（在IETester是支持的），解決辦法是：body{text-align:center}　.wrapper{text-align:left} /* 由於IE將text-align誤解爲讓全部東西居中，而不僅是文本 */

IE6 由於是考慮元素內容的尺寸，而不是元素自己尺寸。在符合標準的瀏覽器中，若是元素的內容太大，它只會超出框以外。可是在IE6中，若是元素內容太大，則整個元素就會擴展(包括寬和高)。即設定的width表現得像 min-width

流式佈局：百分比

彈性佈局：字號em

建立高度相等的列：關鍵點是給每一個框設置大的padding-bottom，而後用數值相近的負margin-bottom抵消這個高度。而後在#wrapper設置 overflow:hidden。

從這個案例能夠看出：加入把框看做是一個垂直於屏幕的立體，那麼margin是最底層的，而元素之間的間距是靠margin隔開的。又由於padding-bottom在margin之上，因此處於外層padding讓咱們看到背景色，而負值margin則讓旁邊的元素處於其padding下方。

（Firefox 3D佈局）

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

// 假設.box由於內容不同而高度不一樣

#wrapper{
  overflow:hidden;
}
.box{
  width:   30%;
  float:left;
  padding-bottom:520px;
  margin-bottom: -500px;
}

　

第九章 bug和修復bug

　擁有佈局：IE6的bug最多，IE6與其它瀏覽器表現不一樣的緣由之一是，顯示引擎使用一個稱爲佈局（layout）的內部概念。佈局問題是許多IE/WIN顯示BUG的根源。

   什麼是佈局？ Window上的IE使用佈局概念來控制元素的尺寸和定位。那些「擁有佈局（haslayout）」的元素負責自己及其子元素的尺寸設置和定位。若是一個元素「沒有擁有佈局」，那麼它的尺寸和位置由最近的擁有佈局的祖先元素控制。

　　IE顯示引擎利用佈局概念減小它的處理開銷。在理想的狀況下，全部元素都控制本身的尺寸和定位。可是，這會在IE中致使很大的性能問題。由於，IE開發團隊決定只將佈局應用於實際須要它的那些元素，這樣就能夠充分地減小性能開銷。

在默認狀況下擁有佈局的元素包括：body、html（標準模式中）、table、tr、td、img、hr、input、select、textarea、button、iframe、embed、object、applet、marquee。

佈局概念是Window上的IE特有的，並且它不是CSS屬性。儘管設置某些CSS屬性會使元素擁有佈局，可是在CSS中沒法顯示地設置佈局。可使用JavaScript函數hasLayout查看一個元素是否擁有佈局。若是元素擁有佈局，這個返回true，反之，返回false。hasLayout是一個只讀屬性，因此沒法使用JavaScript進行設置。

設置如下CSS屬性會自動地使元素擁有佈局：①float:left或right ②display:inline-block ③width:任何值  ④height:任何值  ⑤zoom:任何值  ⑥writing-mode:tb-rl

在IE7中，如下屬性也成了佈局觸發器：①overflow:hidden、scroll或auto ②min-width:任何值  ③max-width:除了none以外的值。

 

佈局的效果

佈局是許多IE顯示BUG的根源。

①一個文本段落靠着一個浮動元素，那麼咱們指望文本圍繞這個元素。可是在Window上的IE6，若是段落擁有佈局（如設置高度），那麼它就被限制爲矩形，所以阻止文本圍繞浮動元素。

②在IE6中，擁有佈局的元素會錯誤地擴展以便適應內容的尺寸。width和height更像是min-width和min-height。

③其餘問題：一、擁有佈局的元素不會收縮（什麼意思？） 二、佈局元素對浮動元素自動清理（因此.clearfix{zoom:1}） 三、相對定位的元素沒有佈局 四、在擁有佈局的元素之間外邊距不疊加  五、在沒有佈局的塊級連接上，單機區域只覆蓋文本 六、在滾動時，列表項上的背景圖像間歇性地顯示和消失。

因此，若是遇到一個IE BUG，首先應該作的一件事情是嘗試經過應用規則迫使元素擁有佈局。

在IE7中，已經修復大多數與佈局相關的問題。可是該團隊的解決方法是找到常見的顯示BUG，而後經過在代碼中建立列外來處理它們，而不是解決頂層問題。所以，可能有一些不顯著的佈局bug尚未被發現。 

IE8使用全新的顯示引擎，據稱不使用hasLayout屬性，所以解決了這些問題的根源。

 

IE條件註釋， 在IE5首次出現。

<!--[if IE]><![endif]-->

CSS被設計成具備很強的向前兼容性。若是瀏覽器不理解某個選擇器，則會忽略整個規則。若是不理解某個屬性或值，則會忽略整個聲明（某個CSS聲明）。

應用星號HTML hack。針對IE6。由於IE6有一個匿名的根元素，它包圍着HTML元素。因此針對IE6 能夠這樣應用規則：  * html #content{}

 

常見bug及其修復方法

雙外邊距浮動BUG（IE6）：使任何浮動元素上的外邊距（左右兩側外邊距）加倍。    解決方法： display:inline

3像素文本偏移BUG（IE6）：當文本與一個浮動元素相鄰時，這個bug就會表現出來，例如，假設將一個元素向左浮動，而且不但願相鄰段落中文本圍繞浮動元素。你可能會在段落上應用一個左外邊距，其寬度等於浮動元素的寬度：

.myFloat{float:left;width:200px}

p{margin-left:200px}

若是這麼作，在文本和浮動元素之間就會出現一個莫名其妙的3像素間隙。

修復這個Bug須要左右開弓。

首先，針對IE6 爲文本框設置height:1%(IE6會把height當成min-height)，這樣文本框就會擁有佈局，由前面可知，擁有佈局的元素被限制爲矩形。而且出如今浮動元素的旁邊而不是它們的下面。添加200px的外邊距實際上會在IE6中在浮動元素和段落之間產生200像素的間隙（在IETester並無）。爲了不這個間隙，須要爲IE6專門設置margin-left爲0(仍是要設置爲0的，不然取消不了這3px)。這樣文本偏移被修復了，可是如今另一個3px間隙出現了，這一次是在浮動元素上。爲了去掉這個間隙，須要在浮動元素上設置一個負的3px右外邊距 .myFloat{margin-right:3px}

 IE6的重複字符bug

在某些狀況下，一系列浮動元素的最後一個元素中的最後幾個字符會在浮動元素下面重複出現。當在一系列浮動元素的第一個和最後一個元素之間有多個註釋時，就會出現這個BUG。前兩個註釋沒有影響，可是後續的每一個註釋會致使兩個字符重複出現。因此3個註釋會致使兩個重複字符，4個註釋會致使4個重複字符，5個註釋會致使6個重複字符。

這個BUG彷佛與前面的3px文本偏移bug相關。爲了修復這個bug，能夠經過設置負的右外邊距從最後一個浮動元素上去掉3px，或者使容器擴大3px。可是，這兩種方法可能在IE7中形成問題最好的方法是刪除註釋。

 

IE6的「藏貓貓」bug

由於在某些條件下問來看起來消失了，只有在從新加載頁面時纔再度出現。

出現這個bug的條件事：一個浮動元素後面跟着一些非浮動元素，而後是一個清理元素，全部這些元素都包含在一個設置了背景顏色或圖像的父元素中。若是清理元素碰到了浮動元素，那麼中間的非浮動元素看起來消失了，隱藏到了父元素的背景顏色或圖像後面，只有在刷新頁面時才從新出現。

解決辦法：①去掉父元素上的背景顏色或圖像。可是這經常不可行。②避免清理元素與浮動元素接觸 ③容器應用了特定的尺寸，那麼這個BUG視乎就不會出現 ④給容器指定行高 ⑤將浮動元素和容器元素的position屬性設置爲relative也會減輕這個問題。

 

相對容器中的絕對定位（IE6BUG前面有提過）

這bug的緣由在於相對定位的元素沒有得到IE/win的內容layout屬性。所以它不建立新的定位上下文，全部絕對定位元素相對於視口進行定位。

解決辦法：讓相對容器擁有佈局，height:1%。

 

第10章 研究案例

Reset CSS ：http://meyerweb.com/eric/tools/css/reset/