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

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

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

Firefox Web Developer組件。

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

?

第2章 CSS工作原理

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

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

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

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

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

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

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

2.6 偽類

偽類分為兩種：

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

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

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

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

2.7 偽元素

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

?

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

2.8 繼承

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

?

第3章 定位元素

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

3.1 盒模型

上右下左（順時(shí)針）。

如果那個(gè)值沒有寫，那就使用對(duì)邊的值。

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

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

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

?3.1.5 外邊距的單位

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

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

?

3.2 盒子有多大

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

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

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

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

?

3.3.1 浮動(dòng)

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

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

浮動(dòng)非圖片元素時(shí)，必須給他設(shè)定寬度，否則后果難以預(yù)料。圖片無所謂，因?yàn)樗旧碛心J(rèn)的寬度。

包含浮動(dòng)元素的方法：

1. 為父元素添加overflow:hidden，以強(qiáng)制它包圍浮動(dòng)元素。

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

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

2. 同時(shí)浮動(dòng)父元素。

浮動(dòng)父元素后，不管其子元素是否浮動(dòng)，他都會(huì)緊緊地包圍住他的子元素。

3. 添加非浮動(dòng)的清理元素

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

?

3.4.5 定位上下文

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

、right、bottom和left屬性才會(huì)起作用。

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

絕對(duì)定位的元素要有一個(gè)相對(duì)定位的父元素。

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

?

3.6 背景

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

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

3.6.5 背景位置

默認(rèn)情況下，背景圖片會(huì)以元素左上角為起點(diǎn)，沿水平和垂直方向重復(fù)出現(xiàn)，最終填滿整個(gè)背景區(qū)域。正是因?yàn)橐栽刈笊辖菫樵c(diǎn)，所以元素盒子底部和右側(cè)的圖案都只顯示了一部分。

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

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

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

?

4.2 文本屬性

以下是幾個(gè)最有用的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屬性的默認(rèn)值auto不變呢？ 很簡(jiǎn)單，只有這樣元素才能隨自己包含內(nèi)容的增加而在垂直方向上擴(kuò)展。這樣擴(kuò)展的元素會(huì)把下方的元素向下推，而布局也能隨著內(nèi)容數(shù)量的增減而垂直伸縮。假如你明確設(shè)定了元素的高度，那么超出的內(nèi)容要么被剪掉，要么會(huì)跑到容器之外——取決于元素overflow元素的設(shè)定。

?

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

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

?

5.2 ?三欄-固定寬度布局

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

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

2. 子-星選擇符

someSelector > * 就會(huì)只選擇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屬性。不過，有一個(gè)專門解決這個(gè)問題的膩?zhàn)幽_本(polyfill)，名叫borderBoxModel.js。

?

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

* { box-sizing: border-box; }

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

?

預(yù)防過大的元素

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

.inner img { max-width:100% }

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

?

5.3 三欄-中欄流動(dòng)布局

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

1. 用負(fù)外邊距實(shí)現(xiàn)

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

?

6.3 彈出層

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

思路：先隱藏彈出層，然后在鼠標(biāo)懸停時(shí)再顯示它。 同時(shí)涉及到堆疊上下文和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具有一些特殊的混合行為。正如它的名字所暗示的，它既有塊級(jí)元素的特點(diǎn)，也有行內(nèi)元素的行為。從塊級(jí)元素的角度說，可以為它設(shè)定外邊距和內(nèi)邊距，也可以通過它簡(jiǎn)便而有效地包圍其他塊級(jí)元素。從行內(nèi)元素的角度看，他會(huì)收縮自己包裹的內(nèi)容，而不是擴(kuò)展填充父元素。換句話說，inline-block元素的寬度始終等于其內(nèi)容的寬度。這種元素還有一個(gè)特點(diǎn)，就是可以包圍浮動(dòng)元素。不過，這種元素也有一個(gè)問題，即不能給它的外邊距設(shè)定auto值，而這恰恰又是在更大的容器內(nèi)居中元素的最簡(jiǎn)單方法。

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

?

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

?

transition屬性

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

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

?

垂直居中

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

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

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

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

?

CSS3 變換

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

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

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

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

?

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

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

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

?

8.2 媒體查詢

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

?

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

總結(jié)

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

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