《CSS那些事兒》讀書筆記

時間 2019-11-20

標籤 CSS那些事兒讀書筆記欄目 CSS 简体版

原文原文鏈接

注：

此書出版於2009年，因此有些知識...你懂得。
有些我熟悉的知識點，就沒有記錄下來了，因此想了解更多的細節，仍是去看下此書吧。
暗灰色標記部分，是我本身的理解，有不對或要補充的地方，還請你們多多指教。
代碼演示我統一放到了jsfiddle上，國內訪問速度稍慢些，你們耐心點。或是你們知道國內有相似的在線調試網站，麻煩和我分享下，在此先謝了。
該筆記中只給出了部分代碼演示連接，若是想看該書的完整示例代碼，可到百度雲：http://pan.baidu.com/s/1o64sPR0 下載，我已經共享好了。
該筆記較長，你們耐心點哦。

耐心地學習CSS，掌握好CSS的本質原理後，你將會發現原來CSS真的很好玩。

學習CSS最好的方法就是不斷地作，不斷地想，不斷地實踐。

CSS特色：

修飾頁面文本、圖片等頁面元素，避免使用沒必要要的HTML元素。
更有效地控制頁面結構、頁面佈局。
提升開發和維護效率。

CSS的簡寫：

顏色的縮寫：#RRGGBB –– 縮寫成 #RGB。
單位值的省略：當數值爲0時，可省略單位。
內外邊距的簡寫：根據上右下左的順時針方向，有4種簡寫方式。
邊框的簡寫：border: -width || -style || -color。
背景的簡寫：background: -color || -image || -repeat || -attachment || -position
字體的簡寫：font: -style || -variant || -weight || -size || /line-height || -family
列表的簡寫：list-style: -image || -position || -type

CSS選擇符：

標籤選擇符：E(html標籤)
ID選擇符：#className
類選擇符：.className
通配符選擇符：*
包含選擇符：又稱派生或後代選擇符，做用於元素的後代元素。
子選擇符：又稱子對象選擇符，做用於元素的子元素，用「>」鏈接選擇符(IE7+)。
相鄰選擇符：做用於元素的相鄰的下一個元素(線性結構中的直接後驅)，用」+「鏈接選擇符(IE7+)。
屬性選擇符：E[attr]、E[attr=「value」]、E[attr~=「value」]、E[attr|=「value」]、E[attr^=「value」]
選擇符的組合關係：針對性使用類選擇符或ID選擇符、選擇符羣組、選擇符組合。

僞類：

用來指定一個或者多個與其相關的選擇符的狀態( IE6/7支持部分)。其形式爲：選擇符:僞類 {屬性:屬性值;}。

如：a:link{}、a:visited{}、a:hover{}、a:active{}。

僞類可以使頁面增長更多交互效果，而沒必要去使用過多的javascript來輔助實現。

僞對象：

指在html的文檔指定的信息以外，建立文檔的額外信息( IE6/7支持部分)。其形式：選擇符:僞對象 {屬性:屬性值;}。

如：p:before {content: 「4月1日」}。

CSS層疊樣式表的特點在於「層疊」，所謂層疊即表示CSS樣式表會根據選擇符的使用而將樣式相互疊加或者覆蓋。

網頁定義的4種樣式：

html：表示在html中是使用的樣式。
做者：表示CSS文件的編寫者。
用戶：指瀏覽器網頁的用戶所設置的樣式。
瀏覽器：指瀏覽器默認樣式。

CSS樣式採用的優先順序：

標有!important關鍵字聲明的屬性。
html中的CSS樣式屬性。
做者編輯的CSS文件樣式屬性。
用戶設置的樣式。
瀏覽器默認的樣式。

選擇符優先級積分：

標籤選擇符、僞類及僞對象：優先級積分爲1。
類選擇符、屬性選擇符：優先級積分爲10。
ID選擇符：優先級積分爲100。
style屬性：優先級積分爲1000。
其餘選擇符，如通配符選擇符等：優先級積分爲0。

對於 !important關鍵字的使用必定要謹慎，切勿隨便使用，避免產生沒必要要的問題。

內嵌樣式表，通常應用在訪問量比較大的頁面減小對服務器的http請求數而減小對服務器的負擔。

缺點是若是須要修改，那就只能對頁面進行修改，且沒法利用瀏覽器緩存特性。

因爲瀏覽器最後解析@import，這樣很容易致使IE6的閃屏或者在打開頁面的過程當中無樣式，直到頁面加載完畢後纔會加載樣式的現象出現，所以不建議使用@import。

<div class=「mainBox」>主要內容區域</div>

</div>

由於瀏覽器在解析html代碼時是由上而下的方式逐句分析的，所以將mainBox放在sideBox以前的主要做用是將內容區域提早展示在瀏覽器中。

在使用CSS樣式佈局頁面結構時，不使用浮動那麼就只能採用定位的方式進行頁面佈局。

兩列頁面佈局：

兩列定寬結構：
要點：float、width指定、 :after清除浮動。
效果：http://jsfiddle.net/XianfaLang/tWvph/
前提：兩列的盒模型寬度相加不能大於父元素的寬度，不然會出現錯位現象。
兩列自適應結構：
要點：float、width百分比、 :after清除浮動。
效果：http://jsfiddle.net/XianfaLang/MyfXs/
單列定寬-單列自適應結構：
要點：相對定位、負邊距效果：http://jsfiddle.net/XianfaLang/U3J3X/
問題：當sideBox的內容不少時，使用絕對定位致使沒法撐開父元素的高度，並且會覆蓋其餘元素的內容。解決方案是使用javascript從新判斷父元素的高度來解決，我的以爲應該有CSS方案來解決這個問題，而不是用javascript來解決。這不，第5章就給出了一種解決方案：http://jsfiddle.net/XianfaLang/5w8MD/
兩列等高：
4.1. 背景模擬：利用背景圖片的平鋪，在視覺效果上產生等高的感受。
4.2. 負邊距實現(推薦)：
   原理：利用左右兩個方向的外邊距彌補在頁面中佈局出現錯位的現象。
   要點：兩容器設置margin-bottom:-9999px; padding-bottom:9999px，父元素設置overflow:hidden;
   效果：http://jsfiddle.net/XianfaLang/Q5nph/
   問題：若是頁面使用<a>作頁面跳轉，將會隱藏部分文字信息。若是將背景圖片放到mainBox或者sideBox底部，將看不到背景圖片。
4.3. 邊框模擬：
要點：border-right:280px solid #AAAAAA; 絕對定位
效果：http://jsfiddle.net/XianfaLang/tLmTc/
4.4. JS方式：
要點：使用javascript設置兩列高度相同。
效果：http://jsfiddle.net/XianfaLang/C9XcZ/

三列或多列布局：

瞭解width:auto與float的關係：http://jsfiddle.net/XianfaLang/nMyh4/
兩列定寬中間自適應結構：
要點：浮動、負邊距、mainBox的width爲100%。
效果：http://jsfiddle.net/XianfaLang/dsfKU/
左側定寬-右側和中間自適應結構：
要點：浮動、margin百分比、負邊距。
效果：http://jsfiddle.net/XianfaLang/nB57t/
三列寬度自適應結構：同左側定寬-右側和中間自適應結構相似，把寬度改成百分比便可。
三列等高：
原理同兩列等高相似，也有4種實現方式。這裏只列舉兩種：
負邊距實現：http://jsfiddle.net/XianfaLang/hRq2q/
邊框模擬：http://jsfiddle.net/XianfaLang/EBww5/

文本相關

text-indent屬性可將文字往旁邊「推」，如：p { text-indent: 2em; } /* 設置段落縮進2em */ 聯想到負邊距有「吸」功效。
隱藏文字方法：
a. 使用text-indent／line-height 將文字「推」到容器以外。
b. visibility: hidden; 設置元素不可見，但佔空間位置。
c. display: none; 設置元素不可見，不佔空間位置。

圖片相關

PNG優勢：

是目前保證最不失真的格式，它汲取了GIF和JPG兩者的優勢，存儲形式豐富。
即能把圖像文件壓縮到極限以利於網絡傳輸，又能保留全部與圖像品質有關的信息。
顯示速度快。
支持透明圖像的製做。

PNG缺點：不支持動畫效果。

PNG-8比GIF要小一點，GIF可製做動畫而PNG-8沒法實現動畫效果。

PNG-24是色彩最豐富的圖片，且支持alpha通道的透明，不像PNG-8和GIF只能支持全透明的圖片。

支持alpha通道的透明，可讓圖片產生半透明的效果，使頁面更漂亮。

採用哪一種格式的圖片做爲背景圖的參考點：

圖片是否嚴重失真。
哪一種格式的圖片是最小的。
圖片是否有透明效果，若是有，那是否有alpha透明效果。

background-position注意點：

任何背景圖片都是先設置水平方向的定位，再設置垂直方向的定位。
只有一個數值時，該數值將做用於水平方向的定位，而垂直方向的定位將以默認的50%爲基準。
屬性值爲百分比時，將以圖片的中心點爲基準計算其相對位置，而使用px像素值時將以圖片的左上角爲基準。
可使用負值。

CSS Sprite經常使用來合併頻繁使用的圖形元素。

CSS Sprite注意點：

固定容器的寬度和高度。
超出容器的寬度和高度部分的背景圖片須要隱藏。
背景圖片在合併時，須要考慮每張圖片的用途。

圖文混排：給<img>設置float: left;

三種列表：

無序列表：<ul><li>...</li></ul>
有序列表：<ol><li>...</li><ol>
自定義列表：<dl> <dt>標題</dt> <dd>內容</dd> </dl>

行內元素不具有寬高屬性，只有將其轉化爲塊級元素後才具有寬高屬性。

CSS樣式中能將塊元素以橫向排列方式排列的只有定位( position)和浮動( float)兩種方式。

CSS實現表現效果，javascript實現行爲效果。

CSS樣式須要你們不斷去摸索，不斷嘗試新的內容纔會使每一個人自身對CSS樣式的理解及處理問題的能力獲得提高。

列表示例：

二級菜單導航(橫排)：
要點：總體寬度、一級列表寬高和浮動、二級列表絕對定位。
效果：http://jsfiddle.net/XianfaLang/4CPdG/
圖文列表信息：
要點：總體寬度、浮動。
效果：http://jsfiddle.net/XianfaLang/KM7Ua/

理解、分析、總結是必需要進行的幾個步驟：

理解每一個例子中所講解的步驟及實現的方法。
分析每一個方法的可用性及是否有其餘更好的實現方法。
總結在每次實踐中所獲得的經驗。

在IE瀏覽器中，按鈕與文字之間的垂直對齊關係如同複選框與文字之間的對齊關係，須要利用 vertical-align對其進行調整。

表格相關

border-collapse：檢索或設置表格的行和單元格的邊是否合併到一塊兒。默認值：separate。合併：collapse。

可以使用相鄰選擇符實現隔行換色。我的以爲此知識點，主要是瞭解相鄰選擇符的應用，實際應用性不大。

日曆表的製做： http://jsfiddle.net/XianfaLang/Z4wVQ/2/

將table標籤用於顯示數據結構，而不是用於頁面佈局。

float是將頁面中的元素在水平方向上並排顯示的，而 position倒是將頁面的元素以疊加的方式顯示的。

使用CSS濾鏡以前，須要思考的幾個問題：

頁面中使用CSS濾鏡的次數會不會過多。
使用CSS濾鏡是否是會佔用較多的CPU。
可否使用圖片直接代替由CSS濾鏡產生的效果。
使用CSS濾鏡後，會不會影響到頁面中的內容操做。

使用iframe實現的「選項卡」逐漸演變爲將頁面內容集於一體，經過JS切換顯示內容。

實現tab選項卡要把握html結構與css樣式之間的微妙關係。

負邊距與層疊效果的應用：怪異的導航菜單。

IE瀏覽器會在每一個列表li之間產生幾個像素的空間，可用float:left;使多餘的幾個像素「消失」。

分析實例最好的方法就是將其簡單化，從根本上去了解問題、分析問題。

清除浮動做用：

解決頁面錯位現象。
解決子元素浮動致使父元素沒法自適應子元素高度的問題。

清除浮動的經常使用方法：

1. clear屬性--經常使用clear: both;

2. 添加額外標籤: <div style="clear:both;"></div>

3. 使用 br標籤和其自身的 html屬性: <br clear="all">

4. 父元素設置: overflow: hidden; *zoom:1; (在IE6中還須要觸發 hasLayout ，例如 zoom：1)

5. 父元素設置: display: table;

6. 父元素設置 :after 僞類 (推薦)：

.clearFix:after {
    clear: both; /* 清除僞類層以上的浮動 */
    display: block;   /* 使生成的元素以塊級元素顯示,佔滿剩餘空間; */
    visibility: hidden; /* 設置僞類層內容爲塊級元素且不可見 */   
    height: 0;
    line-height: 0; /* 設置僞類層中的高度和行高爲0 */
    content: " "; /* 將僞類層中的內容清空 */
}
.clearFix {
    zoom: 1; /* 針對IE瀏覽器產生hasLayout效果清除浮動 */
}

/* 更簡潔的寫法 */
.clearFix:before,
.clearFix:after {
    content: "";
    display: table;
}

.clearFix:after {
    clear: both;
}
.clearFix{
    zoom:1;
}