Web開發（三）CSS

時間 2019-11-13

標籤 web 開發 css 欄目 HTML 简体版

原文原文鏈接

概述

基本概念

層疊樣式表（Cascading Style Sheets）, 負責網頁三要素的表現, 爲網頁建立樣式表，經過樣式表對網頁進行裝飾javascript

層疊：將網頁想象成多層的結構，高層次的覆蓋低層次，CSS爲各個層次設置樣式css

樣式表：各類樣式的集合，如字體，顏色，背景，定位等樣式java

語法

樣式表有一個一個樣式構成，一個樣式包括選擇器和聲明塊web

選擇器{
      樣式名：樣式值；
      樣式名：樣式值；
      樣式名：樣式值；
}

選擇器chrome

　　經過選擇器能夠選中指定的元素，並將聲明塊中的樣式應用到選擇器對應的元素api

聲明塊瀏覽器

　　緊跟在選擇器後面，用一對 { } 括起來緩存

　　在一個聲明塊中能夠寫多個聲明，聲明之間用分號 ; 隔開less

　　樣式名和樣式值用冒號：鏈接ssh

　　實際上就是一組一組的名值對結構

註釋

　　/*註釋內容*/

　　css的註釋只能寫在 style 標籤或 css文件中

　　在 style 標籤（style標籤是head的子標籤）中只能存放css代碼

內聯元素、塊元素使用原則

通常使用塊元素包含內聯元素，而不使用內聯元素去包含塊元素

a標籤能夠包含任何元素（除了自己）

p標籤不能夠包含任何塊元素

引入方式

內聯樣式表

將樣式直接編寫到元素的style屬性中，不用填寫選擇器，直接編寫聲明便可

內聯樣式只對當前元素的內容起做用

內聯樣式屬於結構與表現耦合，不方便後期維護，不推薦使用

內部樣式表

將樣式編寫到head中的<style />標籤中，在經過選擇器選中須要設置該樣式的元素

相對於內聯樣式表，提升了必定的複用性，但樣式不方便多頁面共同使用

外部樣式表

語法

<link rel="stylesheet" type="text/css" href="文件路徑">

　　將樣式表編寫在外部的css文件，再在head中用link標籤調用該文件便可

　　link標籤只能編寫在head中，用於定義文檔與外部資源的關係，經常使用於連接樣式表

優點

　　結構和樣式徹底分離，樣式表能夠在不一樣的頁面使用，提升複用性

　　利用瀏覽器一次緩存完頁面相關樣式，加快用戶訪問的速度，提升用戶體驗

選擇器（selector）

一些基礎的選擇器

元素選擇器

　　語法標籤名{ }

　　選擇對應標籤的元素

　　例如 p{ }

ID選擇器

　　語法 #id屬性值{ }

　　經過元素的id屬性值（id值不能夠重複）肯定惟一的元素

類選擇器

　　語法 .class屬性值{ }

　　經過class屬性值選擇一組元素

　　能夠爲一個元素設置多個class值，多個值之間用空格隔開

並集選擇器

　　語法選擇器1,選擇器2,選擇器N{ }

　　同時選擇多種選擇器

交集選擇器（複合選擇器）

　　語法選擇器1選擇器2選擇器N{ }

　　同時選擇知足多個條件的元素，通常先元素再類

通配選擇器

　　語法 *{ }

　　用於選擇所有元素

後代元素選擇器

　　語法祖先元素後代元素{ }

　　選擇指定元素的指定後代元素

子元素選擇器

　　語法父元素>子元素{ }

　　選擇指定父元素的指定子元素，IE6及如下的瀏覽器不支持子元素選擇器

兄弟元素選擇器

　　後一個兄弟元素選擇器

　　　　語法 A + B

　　　　選中一個緊挨着A元素的兄弟元素B

　　　　div + a 選中div後緊跟的兄弟元素 a，div和a是兄弟元素，而且是緊挨着的

　　後全部兄弟元素選擇器

　　　　語法 A ~ B

　　　　選中全部A元素的兄弟元素B

否認選擇器

　　語法：not(選擇器）

　　從已選擇的元素中剔除某些元素

僞元素選擇器

做用：僞元素表示元素中一些特殊的位置，使用僞元素選擇器選擇這些特殊位置

p:first-letter

可用於爲p標籤中的第一個字符設置樣式

p:first-line

可用於爲p標籤的第一行字符設置樣式

p:before

before表示元素的最前邊的部分，默認內容爲空

在before選擇器中經過content屬性添加內容，該內容在頁面沒法被選中

p:after

afte表示元素的最後邊部分，默認內容爲空

子元素僞元素選擇器

:first-child

:first-child選中全部的長子

p:first-child選中是長子的p標籤

div p:first-child選中div中是長子的p標籤

:last-child

:nth-child(number)

:nth-child(8）選中排行老8的子元素

:nth-child(even)選中位於偶數位置的子元素

:nth-child(odd)選中位於奇數位置的資源隨你

Div p:nth-child(2) 選中排行老二的子元素，而且是p元素，而且在div中

:first-of-type

選中當前類型中的第一個

例如 p:first-of-type，會選中後代元素中的第一個p標籤

:last-of-typ

:nth-of-type

:only-child

:nth-last-child(A)

:nth-last-child(2)會選中第二個到最後一個子元素

僞類選擇器

僞類選擇期能夠爲處於特殊狀態的元素設置樣式

經常使用於超連接中

a:link

　　表示未訪問過的連接

a:visited

　　表示訪問過的連接

　　瀏覽器經過歷史記錄判斷用戶是否訪問過

　　因爲涉及用戶隱私，因此visited僞類中只能設置color

a:hover

　　表示鼠標移入的狀態

a:active

　　表示超連接被點時的狀態

使用規則

　　a標籤的四個僞類優先級相同，通常按照:link :visited :hover :active順序編寫

　　hover和active必須寫在link和visited後面，active必須寫在hover後面

　　hover和active僞類也能夠給其餘元素使用（IE6不支持對a之外的元素使用hover和active）

：focus

　　表示獲取焦點後的狀態

：：selection

　　爲p標籤中選中的文本設置樣式

　　注意：這個僞類在火狐中須要採用另外一種語法 ::-moz-selection

屬性選擇器

標籤類型[屬性名]

　　選擇設置了該屬性的元素

[屬性名=「屬性值」]

　　選擇屬性名=屬性值的元素

[屬性名^="指定內容"]

　　　選擇屬性值以指定內容開頭的元素

[屬性名&="指定內容"]

　　選擇屬性值以指定內容結尾的元素

[屬性名*="指定內容"]

　　選擇屬性值包含指定內容的元素

能夠給任何一個標籤寫入titel屬性，當鼠標移入元素時會顯示title中的內容

例如爲title屬性中包含字母c的元素設置樣式 [title*="c"]{}

選擇器權重

權重：當不一樣的選擇器選中同一個元素並設置相同的樣式屬性時，存在衝突，所以須要選擇器的優先級（權重）

優先級的規則：

　　內聯樣式權重1000

　　id選擇器權重100

　　類、屬性、僞類權重10

　　元素選擇器權重1

　　通配選擇器權重0

　　繼承的樣式沒有權重

其餘規則：

　　選擇器中包含多種選擇器時將其優先級相加再比較，可是選擇器的優先級計算不會超過其最大的數量級

　　若是選擇器的優先級同樣，那最後設置的樣式生效

　　並集選擇器的優先級單獨計算

　　a的四個僞類優先級相同

　　能夠在須要的樣式屬性的最後分號前面添加！important，則此時該樣式的優先級最高（開發中避免使用）

樣式

樣式的繼承

祖先元素的一些樣式會被後代元素繼承（可是背景、定位、邊框相關的樣式不會被繼承）

經常使用單位

長度單位

像素px

　　像素是在網頁中使用最多的單位

百分比%

　　是相對父元素的大小

　　建立自適應頁面時常使用 % 爲單位

　　與 % 相似，em是相對於當前元素的字體大小來計算，因此字體大小變化時，em也會跟隨

　　1 em = 當前font-size

　　設置字體相關樣式時，經常使用em

顏色單位

顏色單詞

　　例如red blue gray

RGB值

　　紅綠藍是光的三原色

　　語法 rgb（紅色濃度，綠色濃度，藍色濃度）

　　濃度的值在[0,255]之間，包含0和255；濃度的值也能夠用百分比（100%就是255）

十六進制

　　原理同rgb，可是將0-255對應的數值轉換爲16進制

　　語法 #紅色綠色藍色

　　例如紅色用#ff0000表示

　　兩位兩位重複的能夠簡寫，例如 #ff0000簡寫爲#f00； #aabbcc簡寫爲#abc

RGBA

　　A（alpha）表示不透明度

　　0表示徹底透明，1表示徹底不透明

字體相關樣式

color

　　設置字體顏色

font-size

　　瀏覽器默認16px

　　chrome中字體最小爲12px

　　Font-size設置的時存放字符的框（不可見）的大小，不是設置字體自己的大小

font-family

　　設置字體類型

　　若是瀏覽器支持設置的字體時，則使用該字體，不然使用瀏覽器默認字體

　　能夠指定多種字體，用逗號分開，優先使用前邊的字體

當font-family設置爲這五大類之一時，不一樣瀏覽器會自動選取屬於大類下的字體並應用樣式

通常將這些大類指定爲font-family的最後一個屬性值

Font-style

　　經常使用於設置斜體

font-wight

font-variant　　經常使用來設置小型大寫字母（small-caps)

font

將字體相關屬性（color除外）統一寫在font中，不一樣的值用空格隔開，便於瀏覽器解析

font中字體類型必須是最後一個屬性值，字體大小必須是倒數第二個，其餘無順序要求

在font中能夠指定行高，在字體大小後添加 /行高值，來指定行高，可選值，不設置則使用默認值1

line-height

　　能夠設置固定值px

　　能夠設置百分數，相對於字體大小

　　能夠設置阿拉伯數字，字體大小相應的倍數

行間距

　　行間距 = 行高 - 字體大小

　　css中能夠經過行高間接設置行間距

　　網頁中的文字默認在行高中垂直居中

　　Line-height要寫在font屬性後面，不然會被覆蓋

　　在font中能夠指定行高，在字體大小後添加 /行高值，來指定行高，可選值，不設置則使用默認值1

其餘文本樣式

Text-tramsform

設置單詞大小寫

可選值：

none默認值 capitalize單詞首字母大小 uppercase單詞字母大寫 lowercase單詞字母小寫

Text-decoration

　　爲文字中間、上方、下方添加線條

　　可選值：none默認值 underline(超連接的默認值） overline line-through

Letter-sapcing

　　設置字符間距

Word-spacing

　　設置單詞間距

Text-aligin

　　設置文本對齊方式

　　可選值：Left right center justify兩端對齊（調節文本間的空格達到效果）

Text-indent

　　設置首行縮進

　　經常使用單位：Px em 負數（將一些不想顯示的文字隱藏）

盒子模型

概述

CSS處理網頁時，認爲每一個元素都在不可見的盒子（矩形）裏

對網頁的佈局 = 盒子的擺放

內容區

width

height

邊框border

border-width

大部分瀏覽器的border-width和border-color都有其自定義的默認值，border-style默認爲none

Border:width:10px 20px 30px 40px    設置邊框 上  右  下  左 （順時針）的厚度
Border-width:10px 20px 30px    設置邊框 上  右左  下 的厚度
Border-width:10px 20px    設置邊框 上下  右左 的厚度
Border-width:10px    設置邊框 上下右左 的厚度
Border-xxx-width xxx可選值有 top right bottom left；方便爲一個方向的border設置width

border-color

規則同border-width

border-style

規則同border-width

可選值: none默認值 solid實線 dotted點狀邊框 dashed虛線 double雙實線

border-xxx

xxx可選值有top right bottom left

能夠經過該屬性單獨爲一個方向的邊框同時設置width color style，沒有順序要求

border

能夠經過border同時設置四個邊框的width color style，沒有順序要求

內邊距padding

內邊距指盒子內容區和盒子邊框間的距離

Background-color會從內容區延伸到內邊距

盒子可見框寬度 = border-width-left + padding-left + width + padding-right + border-width-right

盒子可見框高度 = border-width-top + padding-top + height + padding-bottom + border-width-bottom

Padding-xxx

xx可選值有top right bottom left

能夠經過該屬性單獨爲一個方向內邊距框同時設置width color style，沒有順序要求

Padding

可用於同時設置四個方向的padding，規則同border-width

注意：

　　width默認值爲auto時，此時設置padding，該元素會調整width以適應父元素，該元素可見框大小不會發生變化

　　width爲固定值時，此時設置padding，該元素可見框大小會變化

外邊距margin

做用

　　外邊距指當前盒子和其餘盒子間的距離

　　外邊距不會影響可見框大小，會影響盒子位置

　　元素默認都是靠左靠上擺放，因此調整上、左外邊距，盒子自身位置會變化

　　調整右、下外邊距，當前盒子位置不變，會影響其餘盒子的位置

屬性值

　　正數，能夠理解是在設置外邊距的最小值

　　負數，反方向移動

　　auto，

　　　　水平方向的外邊距設置爲auto時，若只指定左margin或右margin，則外邊距設置爲最大值；左右外邊距同時設爲auto，則元素自動在父元素中水平居中

　　　　垂直方向的外邊距設置爲auto時，外邊距爲零

Margin-xxx

Margin

該屬性能夠同時設置四個方向的margin

例如 margin： 0 auto；表示上下外邊距爲0，左右爲auto（水平居中）

外邊距合併問題

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

兄弟元素相鄰的垂直方向外邊距合併

父子元素相鄰的垂直外邊距合併

此時會取邊距較大的值

解決方法：

　　設置父元素的border或padding，使其不相鄰便可解決

　　取消子元素的垂直外邊距，設置父元素的padiing，將子元素向下擠

瀏覽器默認樣式

瀏覽器爲了在頁面沒有樣式時，也有一個好的顯示效果，爲許多元素設置了margin和padding

清除瀏覽器默認樣式（便於開發）：

　　使用*選擇器清除 *{ padding:0; margin:0;}

　　引入reset.css（推薦）

　　本身編寫css

內聯元素的盒子模型

內聯元素width和height失效

能夠設置內邊距，但垂直方向不會影響頁面佈局

能夠設置邊框，但垂直方向不會影響頁面佈局

不支持垂直外邊距，相鄰水平外邊距會求和

文檔流

文檔流處於頁面最底層；建立的元素默認都在文檔流中

文檔流中塊元素特色：

　　在文檔流中，塊元素默認獨佔一行，自上而下排列

　　在文檔流中，塊元素寬度爲100%，高度被內容撐開

文檔流中行內元素特色:

　　在文檔流中，內聯元素默認只佔自身大小，自左向右排列，自動換行

　　在文檔流中，內聯元素寬度和高度默認被內容撐開

　　文檔流中的元素都儘可能往左往上流

定位屬性

display

用於修改元素類型

可選值：

　　inline 默認值，此時元素顯示爲內聯元素，先後沒有換行符

　　block 此時元素顯示爲塊元素，先後有換行符

　　inline-block 此時元素顯示爲行內塊元素，不會獨佔一行

　　none 此元素不會顯示，並且不會佔據頁面位置

　　table 此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。

visibility

可選值：

　　visible 默認值，元素可見

　　hidden 元素不可見，但仍佔據頁面位置

overflow

設置父元素對溢出內容（子元素太大）的處理方式

可選值：

　　visible 默認值，內容不會被修剪，會呈如今元素框以外

　　hidden 內容被修剪，溢出部分不可見

　　scroll 添加垂直和水平滾動條

　　auto 根據內容添加所需滾動條

float

做用：使元素脫離文檔流，浮動在文檔流上方

可選值：

　　none 默認值，元素默認在文檔流中排列

　　left 元素脫離文檔流，向頁面左側浮動

　　right 元素脫離文檔流，向頁面右側浮動

浮動位置：

　　浮動元素浮動至接觸父元素邊框或其餘浮動元素時會中止

　　浮動元素上浮過程當中不會超過上方未浮動元素

　　浮動元素不會超過其上方（代碼中的上下）的兄弟浮動元素，最多一邊齊

　　隨着頁面的縮放，浮動元素會自動換行

浮動帶來的影響：

　　元素脫離文檔流後，該元素下方的元素會上移（向上向左流動）

　　塊元素脫離文檔流後，寬度高度被內容撐開

　　內聯元素脫離文檔流後，變成塊元素（寬度高度生效）

　　浮動元素不會蓋住處於文檔流中元素的文字，文字會自動環繞在浮動元素周圍

clear

做用：清楚浮動元素對當前元素的影響

可選值：

　　none 默認值，不清除

　　left 清除向左浮動元素（兄弟元素）對當前元素的影響

　　right 清除向右浮動元素（兄弟元素）對當前元素的影響

　　both

position

做用：設置元素的定位方式

可選值：

　　static 默認值，沒有開啓定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）

　　relative 開啓相對定位

　　absolute 開啓絕對定位

　　fixed 開啓固定定位（特殊的絕對定位）

偏移量：開啓元素的定位後，經過left right top bottom屬性設置元素偏移量（相對於元素的定位位置進行偏移）

相對定位特色：　　

　　開啓相對定位後，不設置偏移量則元素位置無變化

　　相對定位是相對於元素在文檔流中的位置

　　相對定位的元素不會脫離文檔流（不會改變元素性質）

　　相對定位會使元素提高一個層級（高於文檔流）

絕對定位特色：

　　開啓絕對定位後，不設置偏移量則元素位置無變化

　　絕對定位是相對於離他最近的開啓了定位的祖先元素進行定位的

　　（通常狀況下，開啓了子元素的絕對定位都會開啓父元素的相對定位）若是祖先元素都沒有開啓定位，則會相對於瀏覽器窗口進行定位

　　絕對定位的元素脫離了文檔流（元素性質改變，內聯元素變成塊元素，塊元素寬高被內容撐開）

　　絕對定位會使元素提高一個層級（高於文檔流）

固定定位特色：

　　特殊的絕對定位，有絕對定位的特色

　　永遠都相對於瀏覽器窗口進行定位

　　固定定位的元素會固定在窗口的某個位置，不隨滾動條滾動

　　IE6及如下不支持

z-index

做用：設置元素的層級，即堆疊順序（沒有開啓定位的元素不能使用z-index）

屬性值：整數（正整數、0、負整數）

特色：

　　層級元素相同，則下邊的元素（代碼結構的上下）會蓋住上邊的

　　層級高的優先顯示

　　父元素不會蓋住子元素

高度坍塌

產生緣由：文檔流中父元素高度默認被內容撐開，子元素浮動後脫離文檔流，沒法撐起父元素，形成高度坍塌，影響佈局

解決方法：

1.將父元素高度固定

2.父元素開啓BFC和haslayout

3.利用空白子元素和clear

4.利用父元素的僞元素和clear

5.clearfix法（推薦使用）

開啓BFC

BFC(Block formatting context，塊格式化上下文）

開啓後特色：

　　父元素的垂直margin不會和子元素重疊

　　開啓BFC的元素不會被浮動元素覆蓋

　　開啓BFC的元素能夠包含浮動元素

開啓方式：

　　設置元素浮動（父元素寬度丟失，下方元素會上移）

　　設置元素絕對定位（父元素寬度丟失，下方元素會上移）

　　設置元素爲inline-lock（父元素寬度丟失）

　　設置overflow爲非visible值

缺點：IE6及如下不支持BFC

開啓haslayout

只支持IE6及如下的瀏覽器，其餘瀏覽器（chrome等）都不支持

開啓方式：

　　zoom：1（oom表示放大，值設爲1表明不放大）

利用空白子元素和clear

在高度坍塌的父元素的最後添加一個空白的div子元素，因爲這個div沒有浮動，因此它能夠撐起父元素的高度；而後對這個div設置clear，便可解決父元素高度坍塌

可是頁面增長了多餘的結構

利用父元素的僞元素和clear

父元素的僞元素：after中設置content爲空白字符，僞元素轉爲塊元素，並清除浮動便可

可是IE6及如下不支持僞元素

clearfix法

做用：同時解決高度坍塌問題和父子元素相鄰垂直外邊距重疊問題

一、解決父子元素相鄰垂直外邊距重疊：

使用空的table標籤能夠隔離父子元素垂直外邊距，空的div不行

選中父元素:before{
    content : "" ;
    display : table;
}

二、解決高度坍塌

在父元素after中添加塊元素並clear浮動元素的影響

選中父元素 : after{
    content : " " ;
    display : block;
    clear : both;
}

三、同時解決

爲須要解決問題的元素添加class值爲clearfix便可

.clearfix:before,
.clearfix:after : {
    content : " " ;
    display : table;
    clear : both
}

高度坍塌總結

overflow:auto  不支持IE6及如下的瀏覽器
zoom:1  解決IE6及如下瀏覽器的高度坍塌
clearfix法  不支持IE6及如下瀏覽器

其餘屬性

顏色屬性

Opacity

設置元素背景的不透明度

屬性值[0,1] 0-徹底透明，1-徹底不透明

缺陷：IE8及如下不支持，可使用alpha解決

IE8及如下使用alpha屬性代替opacity
Filter:alpha(opacity=不透明度）
不透明度在0-100之間取值

背景屬性

元素的背景包括內邊距和邊框？

background-color

Background-color會從內容區延伸到內邊距
Background-color：#bfa
請設置一種可用的背景顏色，這樣的話，背景圖像不可用時，也能夠得到必定的視覺效果

background-image

語法：Background-image:url(路徑）

效果：若是背景圖片大於元素，默認顯示圖片的左上區域；背景圖片小於元素，默認平鋪顯示

ps相關技巧：

對於漸變的背景，能夠截取1px，圖像-裁剪-存儲爲web所用格式，以img的形式進行重複repeat，實現漸變效果

難以截取的logo，使用移動工具，選中自動選中圖層，再利用輔助線截取logo

logo一般背景爲透明，因此截取logo時，將背景隱藏，顯示爲透明背景時再保存爲web所用格式

IE6對png24格式的支持度不高，致使透明效果沒法顯示

　　解決方法1：使用png8格式代替png24，可是圖片清晰度降低

　　解決方法2：在body的末尾引入外部js文件

<script type="text/javascript src="js/DD_belatedPNG_0.0.8a-min.js"></script>  
<script type="text/javascript">  
    DD_belatedPNG.fix('img');  
</script>

background-repeat

設置背景圖片重複方式

可選值：

　　repeat，默認值，背景圖像在垂直和水平方向均重複

　　repeat-x

　　repeat-y

　　norepeat

background-position

調整背景圖片在元素中的位置

可選值：

　　0% 0% 默認值

　　Top center right left bottom 選擇兩個用於指定位置若是隻指定了一個，那麼第二個值將是「center」

　　x% y% 第一個值是水平位置，第二個值是垂直位置左上角是 0% 0%。右下角是 100% 100%若是您僅規定了一個值，另外一個值將是 50%

　　xpos ypos 第一個值是水平位置，第二個值是垂直位置左上角是 0 0。單位是像素 (0px 0px) 或任何其餘的 CSS 單位若是您僅規定了一個值，另外一個值將是50%您能夠混合使用 % 和 position 值

background-attachment

設置背景圖像是否固定或者隨頁面的其他部分滾動

可選值：

　　scroll 默認值，背景圖像隨頁面其他部分的滾動而滾動

　　fixed 背景圖像不滾動（其相對於瀏覽器窗口定位）

　　（不隨窗口滾動的圖片，通常設置給body，而不設置給其餘元素）

background

該屬性能夠同時設置全部和背景相關的屬性

沒有順序要求，但沒有設置的樣式則使用默認值

圖片整合技術

產生緣由

爲超連接按鈕的不一樣狀態（link，hover，active）設置三張不一樣的背景圖片以達到動態效果，可是發如今第一次切換圖片時存在一個很是快的閃爍

背景圖片是之外部資源的形式加載進網頁，瀏覽器每加載一個外部資源就須要單獨發送一次請求；

在link狀態切換爲hover狀態時，瀏覽器須要發送請求，加載圖片，加載和顯示過程存在時間差，背景圖片沒法顯示，致使閃爍

問題解決-->圖片整合技術

將多張圖片整合爲一張，瀏覽器就只須要加載一次外部資源

經過background-position來切換要顯示的圖片

圖片整合技術適用於背景圖片，對img元素不可用

自制雪碧圖（sprite）

ps調整畫布大小、擴展方向

拖拽元素至畫布

另存爲web所用格式，一般用png

能夠將經常使用的圖片、logo都放入一張sprite圖

表格屬性

　　使用table標籤（塊元素）來建立一個表格（用來表示一些格式化的數據）
　　表格能夠嵌套，td中也能夠放一個table

<tr></tr> 在table標籤中，使用tr表示一行，有幾行就用幾個tr

<td></td> 在tr標籤中，使用td建立單元格，有幾個單元格就用幾個td,表格列數由td最多的那行決定

合併單元格：rowspan屬性用來合併縱向單元格；colspan屬性用來合併橫向單元格

Table，tr，rd是塊元素

border-spacing 調整table和td邊框之間的距離

Border-collapse 設置表格邊框合併,邊框合併後，border-spacing失效

Borderground-color

設置隔行變色
tr : nth-child(even){
    background-color:#bfa
}


鼠標移入變色
tr : hover{
    background-color:#bfa
}

csshack

有些狀況，一些特殊的代碼咱們只須要在特定的瀏覽器中執行，而在其餘瀏覽器中不執行，這時候可使用CSS Hack

缺陷：hack不方便維護，故不推薦大量使用

條件hack：

用途：條件hack只對IE瀏覽器有效，其餘瀏覽器都會將它視爲註釋IE10及以上的瀏覽器已經不支持這種方式

<!--[if <keywords>? IE <version>?]>
    HTML代碼塊
<![endif]-->

相關的取值

<keywords>
if條件共包含6種選擇方式：是否、大於、大於或等於、小於、小於或等於、非指定版本
 
是否：指定是否IE或IE某個版本。關鍵字：空
大於：選擇大於指定版本的IE版本。關鍵字：gt（greater than）
大於或等於：選擇大於或等於指定版本的IE版本。關鍵字：gte（greater than or equal）
小於：選擇小於指定版本的IE版本。關鍵字：lt（less than）
小於或等於：選擇小於或等於指定版本的IE版本。關鍵字：lte（less than or equal）
非指定版本：選擇除指定版本外的全部IE版本。關鍵字：!

<version>
目前的經常使用IE版本爲6.0及以上，推薦酌情忽略低版本，把精力花在爲使用高級瀏覽器的用戶提供更好的體驗上

屬性hack

假設在IE6中須要將背景顏色設置爲黃色才能達到和其餘瀏覽器等同的效果，此時使用屬性hack

在樣式前加下劃線，則該樣式只有IE6及如下瀏覽器能夠識別 _background-color:yellow;

添加了*的樣式只有IE7及如下的瀏覽器才能識別 *background-color:yellow;