《Web前端開發修煉之道》-讀書筆記CSS部分

如何組織CSS-分層

應用 css 的能力分兩部分：一部分是css的API，重點是如何用css控制頁面內元素的樣式；另外一部分是css框架，重點是如何對 css 進行組織。如何組織 css 能夠有多種角度，例如按功能劃分，或者按區塊劃分。這裏講一下 base.css + common.css + page.css 的組織方法。將網站內的全部樣式，按照職能分紅三大類：base、common、page，這三者是層疊結構。

一、base 層-精簡通用

位於三者的最底層，提供 css reset 功能和粒度最小的通用類——原子類。這一層會被全部頁面引用，是頁面樣式所需依賴的最底層，不一樣風格的網站可使用同一個 base 層，因此，應具備高度可移植性，力求精簡和通用。該層相對穩定，基本不須要維護，能夠簡單地放在一個文件裏，如 base.css。

css reset 即一開始就將瀏覽器的默認樣式所有去掉，就是經過從新定義標籤的樣式，「覆蓋」掉瀏覽器提供的默認樣式。能夠將經常使用的標籤顯式地羅列出來，避免使用「*」，如來自於 YUI 的部分 css reset 的代碼：

/*CSS reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:」;} abbr,acronym{border:0;}

通用原子類是一系列經常使用的基本類，包括：文字、定位、長度和邊距，因爲其原子性，除少數特殊類，大部分都只包含一句 css，如：.f12{font-size:12px;}，因爲其通用性，在保證命名有語義前提下，命名應儘可能簡短，如 paddingtop20 能夠寫成 pt20。通用原子類裏有幾個類較特殊，特別說明一下：

1).fl 類和.fr 類：除了設置 float：left 和 float：right 以外，還應設置 display：inline，能夠解決 IE6 的雙外邊距 Bug。 .fl{float:left;display:inline;} .fr{float:right;display:inline;} 2).bc 類：爲使塊級元素居中，還要設定寬度，能夠把它和 .w100 等類同時使用，如： .bc{margin-left:auto;margin-right:auto;} .w100{width:100;} 3).clearfix 類：用於在父容器直接清除子元素浮動。 4).zoom 類：設置樣式是 zoom:1，它是 IE 的專有屬性，用以觸發 hasLayout。

二、common 層-組件級，模塊化，重用

位於中間，提供組件級的 css 類。能夠將頁面內的元素拆分紅一小塊功能和樣式相對獨立的小「模塊」，將大量重複地「模塊」視爲一個組件，放在 common 層裏（「模塊化」能夠從樣式和行爲兩個層面來考慮，與 common 層相關的是樣式的模塊化）。common 層至關於 MVC 模式中的 M（Model，模型），需儘量將內部實現封裝。 
（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

common 層是網站級的，不一樣的網站有不一樣的 common 層，同一個網站只有一個 common 層，能夠放在一個文件裏，也可按功能劃分放在多個文件裏。在團隊合做中，common 層最好由一我的負責，統一管理。

三、page 層 
網站中非高度重用的模塊，能夠放在 page 層裏。page 層位於最高層，提供頁面級的樣式。若是網站規模不過於龐大，能夠將全部 page 層放在一個文件裏，根據頁面配上註釋，分塊書寫，便於維護。page 層 css 文件應越簡越好，能用 base 層和 common 層的 css 解決的，儘可能不要用到 page 層。

避免濫用子標籤

低權重原則。

能用組合，不用繼承。

駝峯命名用於區別不一樣單詞，劃線用於代表從屬關係。

CSS sprite

1. 技術是針對做爲背景的圖片，對與html文檔設置的圖片，不能合併到CSS Sprite大圖，不然圖片會影響頁面可讀性。

2. 對於橫向和縱向都平鋪的圖片，也不能使用CSS sprite；若是是橫向平鋪的，只能將全部橫向平鋪的圖合併成一張大圖，只能豎直排列，不能水平排列；若是是縱向平鋪的，只能將全部縱向平鋪的圖合併成一張大圖，只能水平排列，不能豎直排列。

3. CSS sprite的圖片定位可使用bg2css小工具快速定位background-positon座標，有利於提升開發速度。

4. 好處是減小HTTP請求數減輕服務器壓力，缺點是下降開發效率、增長維護難度。CSS Sprite大圖中每一個圖片的維護改動都要謹慎，防止影響周圍的圖片。

網站是否使用CSS Sprite技術，主要取決於網站流量。

流量大的網站好處明顯：減小HTTP請求數量，減輕服務器壓力；（電商，微博，輕博，社區）

流量不大的網站代價很大：下降開發效率，增大維護難度（後臺管理系統通常不適合使用）

CSS hack

1.IE條件註釋法

該方法安全性、兼容行好，也是微軟推薦的hack方法，可是不利於開發維護，須要維護多份css文件。好比涉及到針對不一樣版本IE的css。

<!--[if IE]><![endif]--> 只在IE下有效 <!--[if IE 6]><![endif]--> 只在IE6有效 <!--[if gt IE 6]><![endif]--> 只在IE6以上版本有效 注意：結合lte(小於等於)、lt(小於)、gte(大於等於)、gt(大於)、!(非)關鍵字使用。

2.選擇符前綴法

「*html」 前綴只對IE6生效 "*+html"前綴只對IE7生效 .test{width:80px;} /*IE 6 7 8*/ *html .test{width:70px;} /*IE6*/ *+html .test{width:60px;} /*IE7*/ 缺點：不能保證IE9，10不識別*html,*+html，有向後兼容風險。 

3.樣式屬性前綴法：

如「_」只在IE6下生效，「*」在IE6和IE7下生效。一樣有向後兼容隱患。

.test{width:80px;*width:70px;_width:60px;}

可用於內聯樣式：<div style="width:80px;*width:70px;_width:60px;"></div> 因爲IE條件註釋法不利於開發維護，實際中經常使用的hack方法經常是後二者。 

display:inline-block 和 hasLayout

塊級元素、行內元素

塊級元素會獨佔一行，默認寬度自動填滿其父元素寬度，能夠設置width、height、margin、padding屬性；

行內元素一行排滿纔會換行，寬度隨元素內容多少變化，設置width、height屬性無效，只有水平方向的margin、padding邊距有效果。

常見的塊級元素有div、p、table、fieldset、form、ul、ol、dl、h1~h六、hr、pre、address、blockquote、center、dir、menu、noframes、noscript。

常見內聯元素有input span strong em a abbr acronym br img select textarea等等。

能夠經過修改display屬性值轉行塊元素和行內元素。

display的值除了block和inline，還有其餘值，例如list-item、teble-cell等，但由於IE6和IE7瀏覽器支持的display類型不多，因此爲兼容IE，真正能用的display類型只有block、inline和none三種。

IE六、IE7支持但不徹底支持display:inline-block屬性,但IE8+和FF等標準瀏覽器支持。

display:inline-block，行內的塊級元素，它擁有塊級元素的特色，能夠設置長寬，能夠設置margin和padding值，但它卻不是獨佔一行，它的寬度並不佔滿父元素，而是和行內元素同樣，能夠和其餘行內元素排在同一裏。它集塊級元素和行內元素的特色於一身，是個很是有用的display類型（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

讓IE六、IE7支持display:inline-block

利用hasLayout能夠再不支持display：inline-blcok的IE6和IE7下模擬出display：inline-block的效果，實現IE六、IE七、IE8+和Firefox都兼容的display：inline-block的應用。可是也有一些問題須要特別注意：

• 在IE六、IE7中不識別display:inline-block屬性，但使用inline-block屬性在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表症。
• 在IE5.5中開始支持 inline-block 。你可使用 inline-block 使對象得到佈局而無需指定確切的高( height )和寬( width )。
• IE6/IE7的inline-block屬性只對原生默認的內聯元素(span, a, em……)有效，對於塊級元素(div,p,ul……)無效。 In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn’t apply the value inline-block for the CSS display property on HTML elements that default to block level.
• 兩個結論： 一、IE6/7不識別inline-block，只是觸發了layout，表現跟inline-block塊元素表現同樣。二、IE6/7不徹底支持inline-block，只對內聯元素有效。
• 看官方的說法，確證對inline-block的認識。The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout. 
  下表列出一些CSS屬性及其值，如下屬性一旦設置，將觸發元素的layout：

CSS propertyValue

display inline-block height any value float left or right position absolute width any value -ms-writing-modetb-rl zoom any value

• 延伸問題：IE下塊元素如何實現 display:inline-block 的效果？ 
  有兩種方法：

一、先使用 display:inline-block 屬性觸發塊元素，而後再定義 display:inline，讓塊元素呈遞爲內聯對象（兩個display 要前後放在兩個 CSS 聲明中才有效果，這是 IE 的一個經典 bug ，若是先定義了 display:inline-block，而後再將 display 設回 inline 或 block，layout 不會消失）。代碼以下：

div {display:inline-block;} div {display:inline;}

說明：在IE下，display: inline-block只是觸發了元素的layout。好比將display: inline-block給到div上，只能保證這個div擁有塊元素的特徵（能夠設置寬度，高度等），可是仍是行佈局（產生換行）。接下來要設置display: inline，更改這個div的佈局爲內聯佈局（不產生換行）。

二、直接讓塊元素設置爲內聯對象呈遞（設置屬性 display:inline），而後觸發塊元素的 layout（可以使用zoom:1 等）。代碼以下：

div {display:inline; zoom:1;}

hasLayout

hasLayout設計的初衷是用於輔助塊級元素的盒子模型的，它是用於塊級元素的。若是用於行內元素，會引起一些特殊效果。（結合上面紅色字體理解）

設置寬高屬性width、height值均可以觸發hasLayout，可是有時候帶來反作用，如今經常使用zoom:1;來觸發，極少數很是複雜的css設置狀況zoom無效的時候，須要藉助更爲強大的「position:relative」來觸發hasLayout。

haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要麼本身對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。爲了調節這兩個不一樣的概念，渲染引擎採用了 hasLayout 的屬性，屬性值能夠爲true或false。當一個元素的 hasLayout屬性值爲true時，咱們說這個元素有一個佈局（layout）。