第1章 HTML標記與文檔結構

關于<title>標簽：搜索引擎會給<title>標簽中的文字內容賦予很高的權重。而且這些文字也會作為網頁標題出現在搜索結果列表中。

無論你想了解哪個HTML元素，第一個要問的問題都應該是：它是塊元素，還是行內元素？

Firefox Web Developer組件。

通過HTML標記來構建DOM，然后在頁面初次加載和用戶與頁面交互時，使用CSS來修改DOM。

?

第2章 CSS工作原理

CSS注釋使用/* */，HTML注釋使用<!--? -->

為文檔添加樣式的三種方法：有三種方法可以把CSS添加到網頁中，分別是寫在元素標簽里(也叫行內樣式)、寫在<style>標簽里(也叫嵌入樣式)和寫在單獨的CSS樣式表中(也叫鏈接樣式)。

行內樣式的作用范圍非常有限。行內樣式只能影響它所在的標簽，而且總會覆蓋嵌入樣式和鏈接樣式。

嵌入樣式的作用范圍只限于當前頁面。頁面樣式會覆蓋外部樣式表中的樣式，但會被行內樣式覆蓋。

ID可以用來在頁內導航鏈接。如果鏈接的href屬性里只有一個#，那么點擊鏈接會返回頁面頂部。

不要亂用類，嘗試使用繼承和上下文選擇符~

一個冒號(:)表示偽類，兩個冒號(::)表示CSS3新增的偽元素.

2.6 偽類

偽類分為兩種：

• UI偽類會在HTML元素處于某個狀態時，為該元素應用CSS樣式。
• 結構化偽類會在標記中存在某種結構上的關系時，為相應元素應用CSS樣式。

UI偽類：:link :visited :hover :active :focus :target

結構化偽類: :first-child :last-child :nth-child

:first-child 代表一組同胞元素中的第一個元素，而:last-child則代表最后一個；

2.7 偽元素

::first-letter? ::first-line? ::before? ::after

?

css提供了三種機制：繼承、層疊和特指，來確定哪條規則"勝出"并最終被應用。

2.8 繼承

css中很多屬性是可以繼承的，其中相當一部分都跟文本有關，比如顏色、字體、字號。然而，也有很多CSS屬性不能繼承，因為繼承這些屬性沒有意義。這些不能繼承的屬性主要涉及元素盒子的定位和顯示方式，比如邊框、外邊距、內邊距。

?

第3章 定位元素

所謂盒模型，就是瀏覽器為頁面中的每個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型(visual formatting model)在頁面上排布。可見的頁面版式主要由三個屬性控制: position屬性、display屬性和float屬性。其中，position屬性控制頁面子元素間的位置關系，display屬性控制元素是堆疊、并排，還是根本不在頁面上出現，float屬性提供控制的方式，以便把元素組成多欄布局。

3.1 盒模型

上右下左（順時針）。

如果那個值沒有寫，那就使用對邊的值。

邊框(border)有3個相關屬性。寬度(border-width)、樣式(border-style)和顏色(border-color).

中和外邊距和內邊距：推薦大家把下面這條規則作為樣式表的第一條規則：* { margin:0, padding: 0; }，不同瀏覽器默認地內邊距和外邊距不一樣，特別是對表單和列表等復合元素。在這種情況下，用前面那條規則"中和"默認值，然后在根據需要添加，則會在各瀏覽器上獲得一致的效果。

reset.css [http://meyerweb.com/eric/tools/css/reset/]

?3.1.5 外邊距的單位

根據經驗，為文本元素設置外邊距時通常需要混合使用不同的單位。比如說，一個段落的左右外邊距可以使用像素，以便該段文本始終與包含元素邊界保持固定的間距，不受字號變大或變小的影響。而對于上下外邊距，以em為單位則可以讓段間距隨字號變化而相應增大或減小。比如：

p { font-size:1em; margin:.75em 30px; }

?

3.2 盒子有多大

如果不設置塊級元素的width屬性，那么這個屬性的默認值是auto，結果會讓元素的寬度擴展到與父元素同寬。

盒模型結論一：沒有（就是沒有設置width）寬度的元素始終會擴展到填滿其父元素的寬度為止。添加水平邊框、內邊距和外邊距，會導致內容寬度減少，減少量等于水平邊框、內邊距和外邊距之和。

盒模型結論二：為設定了寬度的盒子添加邊框、內邊距和外邊距，會導致盒子擴展得更寬。實際上，盒子的width屬性設定的只是盒子內容區的寬度，而非盒子要占據的水平寬度。

總之，你要記住一點：設定了元素的width屬性后，再給元素添加邊框、內邊距和外邊距。

?

3.3.1 浮動

float屬性是創建多欄布局的最佳途徑。

在你浮動一張圖片或其他元素時，你是在要求瀏覽器把它往上方推，直到它碰到父元素的內邊界。

浮動非圖片元素時，必須給他設定寬度，否則后果難以預料。圖片無所謂，因為它本身有默認的寬度。

包含浮動元素的方法：

1. 為父元素添加overflow:hidden，以強制它包圍浮動元素。

實際上，overflow:hidden聲明的真正用途是防止包含元素被超大內容撐大。應用overflow:hidden之后，包含元素依然保持其設定的寬度，而超大的子內容則會被內容剪切掉。除此之外，overflow:hidden還有一個作用，即它能可靠地迫使父元素包含其浮動的子元素。

overflow元素定義在包含的內容對于指定的尺寸太大的情況下元素應該怎么樣。在默認情況下，內容會溢出到框外，進入相鄰的空間。應用值為hidden或auto的overflow屬性有一個有用的副作用，這會自動地清理包含的任何浮動元素。因此這是一種有用的元素清理方法，不需要添加額外的標記。這個方法并不適合所有情況，因為設置框的overflow屬性會影響它的表現。更具體地說，這種方法在某種情況下會產生滾動條或截斷內容。 ————《精通CSS: 高級Web標準解決方案(第二版)》

2. 同時浮動父元素。

浮動父元素后，不管其子元素是否浮動，他都會緊緊地包圍住他的子元素。

3. 添加非浮動的清理元素

第三種強制父元素包含其浮動子元素的辦法，就是給父元素的最后添加一個非浮動的子元素，然后清除該子元素。（clearfix規則）

?

3.4.5 定位上下文

只有將元素的position屬性設置為relative、absolute或fixed，這個元素的top

、right、bottom和left屬性才會起作用。

事實上，只要把元素的外邊距和內邊距設定好，多數情況下只用靜態定位就足以實現頁面布局了。很多剛開始接觸CSS的初學者都會錯誤地設定position屬性，最終才發現從文檔流中挪出來的這些元素一點也不好控制。因此，除非真需要那么做，否則不要輕易修改元素默認地position屬性。

絕對定位的元素要有一個相對定位的父元素。

把元素的display設置為none，該元素及所有包含在其中的元素，都不會在頁面中顯示。他們原先占據的所有空間也都會被“回收”，就好像相關標記根本不存在一樣。與此相對的是visibility屬性，把元素的visibility設定為hidden，元素會隱藏，但它占據的頁面空間仍然“虛位以待”。

?

3.6 背景

CSS中，每個元素盒子都可以想象成由兩個圖層組成。元素的前景層包含內容(如文本或圖片)和邊框，元素的背景層包含背景圖片和背景顏色，背景圖片疊加在背景顏色之上。

對塊元素設置width，并設置margin-top: auto; ?margin-bottom: auto; ? ? ?可以使塊元素居中對齊。?

3.6.5 背景位置

默認情況下，背景圖片會以元素左上角為起點，沿水平和垂直方向重復出現，最終填滿整個背景區域。正是因為以元素左上角為原點，所以元素盒子底部和右側的圖案都只顯示了一部分。

設定背景位置時可以使用三種值：關鍵字、百分比、絕對或相對單位的數值。

關鍵字指的順序不重要，left bottom 和 bottom left 意思相同。為了設定的值在所有瀏覽器中都有效，最好不要混用關鍵字值和數字值。

使用數值(比如 40% 30%)時，第一個值表示水平位置，第二個值表示垂直位置。要是只設定一個值，則將其用來設定水平位置，而垂直位置會被設為center。

?

4.2 文本屬性

以下是幾個最有用的CSS文本屬性:

• text-indent
• letter-spacing
• word-spacing
• text-decoration
• text-align
• line-height
• text-transform
• vertical-align

?

5.1 布局高度與布局寬度

1. 布局高度

多數情況下，布局中任何元素的高度都是不必設定的。

為什么正常情況下都應該保持元素height屬性的默認值auto不變呢？ 很簡單，只有這樣元素才能隨自己包含內容的增加而在垂直方向上擴展。這樣擴展的元素會把下方的元素向下推，而布局也能隨著內容數量的增減而垂直伸縮。假如你明確設定了元素的高度，那么超出的內容要么被剪掉，要么會跑到容器之外——取決于元素overflow元素的設定。

?

一般原則：控制布局寬度，而讓內容決定布局高度。

固定寬度布局的大小不會隨用戶調整瀏覽器窗口大小而變化，960像素是最常見的。

?

5.2 ?三欄-固定寬度布局

1. 表現性標記<div>　　

處理欄及內部div的關鍵在于，浮動欄并設定欄寬，但不給任何內容元素設定寬度。要讓內容元素擴展以填充它們的父元素——內部div。這樣，只要簡單地設定內部div的外邊距和內邊距，就可以讓它們以及它們包含的內容與欄邊界保持一定距離。

2. 子-星選擇符

someSelector > * 就會只選擇someSelector所代表元素的所有子元素，而非后代元素。這正好適用于選擇器容器內部的所有頂部元素，然后設定它們的外邊距。

3. 使用box-sizing: border-box

box-sizing的取值：

• content-box: 寬度和高度分別應用到元素的內容框，在寬度和高度之外繪制元素的內邊距和邊框。
• border-box: 為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內繪制，通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

但是，IE6和IE7不支持box-sizing屬性。不過，有一個專門解決這個問題的膩子腳本(polyfill)，名叫borderBoxModel.js。

?

經過試驗我發現，不僅給浮動的欄，甚至給所有元素都應用這個不同的盒縮放模型都是沒有問題的，我在CSS里會添加這一條規則：

* { box-sizing: border-box; }

如此一下，頁面中的盒模型就全都符合邏輯了。換句話說，每個盒子的寬度并不是內容區的寬度，而是一經設定就不可變的真正的盒子寬度。

?

預防過大的元素

1. 限制圖片的寬度不超過其父元素。

.inner img { max-width:100% }

2. 給每個欄添加overflow:hidden聲明。這條聲明不會縮小圖片以適應父元素，而會將它（以及任何過大元素）超出容器邊界的部分剪切掉。

?

5.3 三欄-中欄流動布局

min-width: 該屬性值會對元素的寬度設置一個最小限制。因此，元素可以比指定值寬，但不能比其窄。

1. 用負外邊距實現

2. 用CSS3單元格實現

?

6.3 彈出層

• <figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。
• 使用<figcaption>元素為figure添加標題（caption），<figcaption>元素應該被置于"figure"元素的第一個或最后一個子元素的位置。

思路：先隱藏彈出層，然后在鼠標懸停時再顯示它。 同時涉及到堆疊上下文和z-index;

?

用CSS創造三角形

?

代碼如下：

div {border: 12px solid;border-color: transparent red transparent transparent;height: 0px;width: 0px; }

?

7.1 規劃頁面結構

記住兩條：代碼結構要符合邏輯，規劃組織要考慮層次。

?

居中沒有固定寬度的元素

在display屬性的值中，inline-block具有一些特殊的混合行為。正如它的名字所暗示的，它既有塊級元素的特點，也有行內元素的行為。從塊級元素的角度說，可以為它設定外邊距和內邊距，也可以通過它簡便而有效地包圍其他塊級元素。從行內元素的角度看，他會收縮自己包裹的內容，而不是擴展填充父元素。換句話說，inline-block元素的寬度始終等于其內容的寬度。這種元素還有一個特點，就是可以包圍浮動元素。不過，這種元素也有一個問題，即不能給它的外邊距設定auto值，而這恰恰又是在更大的容器內居中元素的最簡單方法。

解決方案就是為要居中元素的父元素（這里的nav）應用text-align: center，為要居中的元素（這里的ul）設定display: inline-block，讓它包圍列表項。這樣設定就可以得到我們想要的結果：沒有固定寬度的元素也能在其父元素內居中。

?

1. opacity屬性設置元素的不透明級別；

?

transition屬性

transition屬性是一個簡寫屬性，用于設置四個過渡屬性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

transition-property屬性的取值: none，all，property

transition-timing-function屬性的取值: linear，ease，ease-in，ease-out，ease-in-out...

?

垂直居中

如果你想在一個固定高度的元素內垂直居中一行文本，可以把這一行文本的line-height設定為該元素的高度。假設元素高度為300px，可以這樣寫：

text-align: center; /* 水平居中 */ line-height: 300px; /* 垂直居中：行高=容器高度 */

如果想垂直居中其他元素，比如圖片，可以將容器的display屬性設定為table-row，再設定（只對單元格有效的）vertical-align屬性為middle，比如：

display: table-cell; /* 借用表格的行為 */ vertical-align: middle; /* 垂直居中 */ text-align: center; /* 水平居中 */

?

CSS3 變換

CSS3為變換規定了兩個屬性：transform和transform-origin。

transform屬性能夠調用函數，調用不同的變換函數可以實現不同形式的變換，而通過傳入參數值可以控制變換的結果。通過transform屬性調用變換函數的語法如下：

transform: 函數名(數值或x、y值);

transform-origin屬性設置元素圍繞其變換的原點。默認情況下，這個點是元素垂直和水平方向的中心點。可以使用transform-origin屬性及位置關鍵字（left、center、right、top和bottom等）另行設定原點。

?

響應式設計的要素

響應式設計包含三個重要的方面。

• 媒體查詢：是一種CSS語法，可以根據瀏覽器的特性，一般是屏幕或瀏覽器容器寬度提供CSS規則；
• 流式布局：是使用em或百分比等相對單位設定頁面總體寬度，讓布局能夠隨屏幕大小而縮放；
• 彈性圖片：是使用相對單位確保圖片再大也不會超過其容器；

?

8.2 媒體查詢

媒體查詢是CSS代碼的容器，其中的CSS只在某些條件（比如，當前頁面要被打印或者要顯示在某種類型或尺寸的屏幕上）具備時才會應用。媒體查詢可以用兩種方式來寫：@media規則和<link>標簽的media屬性。

?

轉載于:https://www.cnblogs.com/linxd/p/4383405.html

總結

以上是生活随笔為你收集整理的CSS 设计指南(第3版) 初读笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。