第1章 HTML標記與文檔結(jié)構(gòu)

關(guān)于<title>標簽：搜索引擎會給<title>標簽中的文字內(nèi)容賦予很高的權(quán)重。而且這些文字也會作為網(wǎng)頁標題出現(xiàn)在搜索結(jié)果列表中。

無論你想了解哪個HTML元素，第一個要問的問題都應(yīng)該是：它是塊元素，還是行內(nèi)元素？

Firefox Web Developer組件。

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

?

第2章 CSS工作原理

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

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

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

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

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

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

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

2.6 偽類

偽類分為兩種：

• UI偽類會在HTML元素處于某個狀態(tài)時，為該元素應(yīng)用CSS樣式。
• 結(jié)構(gòu)化偽類會在標記中存在某種結(jié)構(gòu)上的關(guān)系時，為相應(yīng)元素應(yīng)用CSS樣式。

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

結(jié)構(gòu)化偽類: :first-child :last-child :nth-child

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

2.7 偽元素

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

?

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

2.8 繼承

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

?

第3章 定位元素

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

3.1 盒模型

上右下左（順時針）。

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

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

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

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

?3.1.5 外邊距的單位

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

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

?

3.2 盒子有多大

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

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

盒模型結(jié)論二：為設(shè)定了寬度的盒子添加邊框、內(nèi)邊距和外邊距，會導(dǎo)致盒子擴展得更寬。實際上，盒子的width屬性設(shè)定的只是盒子內(nèi)容區(qū)的寬度，而非盒子要占據(jù)的水平寬度。

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

?

3.3.1 浮動

float屬性是創(chuàng)建多欄布局的最佳途徑。

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

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

包含浮動元素的方法：

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

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

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

2. 同時浮動父元素。

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

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

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

?

3.4.5 定位上下文

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

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

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

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

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

?

3.6 背景

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

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

3.6.5 背景位置

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

設(shè)定背景位置時可以使用三種值：關(guān)鍵字、百分比、絕對或相對單位的數(shù)值。

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

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

?

4.2 文本屬性

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

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

?

5.1 布局高度與布局寬度

1. 布局高度

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

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

?

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

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

?

5.2 ?三欄-固定寬度布局

1. 表現(xiàn)性標記<div>　　

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

2. 子-星選擇符

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

3. 使用box-sizing: border-box

box-sizing的取值：

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

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

?

經(jīng)過試驗我發(fā)現(xiàn)，不僅給浮動的欄，甚至給所有元素都應(yīng)用這個不同的盒縮放模型都是沒有問題的，我在CSS里會添加這一條規(guī)則：

* { box-sizing: border-box; }

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

?

預(yù)防過大的元素

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

.inner img { max-width:100% }

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

?

5.3 三欄-中欄流動布局

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

1. 用負外邊距實現(xiàn)

2. 用CSS3單元格實現(xiàn)

?

6.3 彈出層

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

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

?

用CSS創(chuàng)造三角形

?

代碼如下：

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

?

7.1 規(guī)劃頁面結(jié)構(gòu)

記住兩條：代碼結(jié)構(gòu)要符合邏輯，規(guī)劃組織要考慮層次。

?

居中沒有固定寬度的元素

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

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

?

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

?

transition屬性

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

• 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...

?

垂直居中

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

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

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

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

?

CSS3 變換

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

transform屬性能夠調(diào)用函數(shù)，調(diào)用不同的變換函數(shù)可以實現(xiàn)不同形式的變換，而通過傳入?yún)?shù)值可以控制變換的結(jié)果。通過transform屬性調(diào)用變換函數(shù)的語法如下：

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

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

?

響應(yīng)式設(shè)計的要素

響應(yīng)式設(shè)計包含三個重要的方面。

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

?

8.2 媒體查詢

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/linxd/p/4383405.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。