CSS2 從入門到精通

1. 經常使用的選擇器

1. 元素選擇器

• 做用：經過元素選擇器能夠選擇指定的元素
• 語法：tag{}

p{
  color: red;
}
h1{
  color: red;
}
複製代碼

2. id 選擇器

• 做用：經過元素的id屬性值選中惟一的一個元素
• 用法: #id{}

#p1{
	font-size: 20px;
}
複製代碼

3.類選擇器

• 經過元素的class屬性值選中一組元素
• 語法：.class{}

.p2{
  color: red;
}
			
.hello{
  font-size: 50px;
}
複製代碼

4. 選擇器分組

• 經過選擇器分組能夠同時選中多個選擇器對應的元素,簡單來講就是同時爲這些選擇的元素應用相同的樣式。他也稱做爲 **並集選擇器 **就是上面的每個逗號分開的至關於一個集合，那麼至關於把他們合併起來到一個集合中只要元素命中其中一條規則就會應用樣式。
• 語法：選擇器1,選擇器2,選擇器N{}

#p1 , .p2 , h1{
  background-color: yellow;
}
複製代碼

5. 通配選擇器_ _

• 他能夠用來選中頁面中的全部的元素
• 語法：*{}

*{
  color: red;
}
複製代碼

6. 交集選擇器

• 做用：選擇同時知足全部選擇器規則的元素，因此也稱做爲交集選擇器，元素必須命中全部的選擇條件才能應用樣式。下面的例子就至關於必須知足元素名爲span而且擁有p3這個類
• 語法：選擇器1選擇器2選擇器N{}

span.p3{
				background-color: yellow;
}
複製代碼

7. 後代選擇器

• 做用：選中指定元素的指定後代元素，下面的例子就是選擇id爲d1的span後代，注意後代是不用和祖先元素相鄰。
• 語法：祖先元素 後代元素{}

#d1 span{
	color: greenyellow;
}
複製代碼

8. 子選擇器

• 做用：選中指定父元素的指定子元素,二者必須是相鄰的
• 語法：父元素 > 子元素

div > span{
				background-color: yellow;
}
複製代碼

Tips: 父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含後代元素的元素，父元素也是祖先元素
後代元素：直接或間接被祖先元素包含的元素，子元素也是後代元素
兄弟元素：擁有相同父元素的元素叫作兄弟元素

9. 僞類選擇器

僞類專門用來表示元素的一種的特殊的狀態，好比：訪問過的超連接，好比普通的超連接，好比獲取焦點的文本框
當咱們須要爲處在這些特殊狀態的元素設置樣式時，就可使用僞類

1. :link 表示普通的連接（沒訪問過的連接）

a:link{color: yellowgreen;}
複製代碼

2. :visited 表示訪問過的連接

瀏覽器是經過歷史記錄來判斷一個連接是否訪問過,因爲涉及到用戶的隱私問題，因此使用visited僞類只能設置字體的顏色

3. :hover僞類表示鼠標移入

4. :active表示的是超連接被點擊的狀態

5.:focus 光標爲得到焦點

6.::selection選中的內容

這個僞類在火狐中須要採用另外一種方式編寫::-moz-selection兼容火狐的

p::-moz-selection{background-color: orange;}
複製代碼

兼容大部分瀏覽器的

p::selection{background-color: orange;}
複製代碼

10. 僞元素選擇器

使用僞元素來表示元素中的一些特殊的位置.

1. :first-letter 內容中的第一個字母

2. :first-line內容的第一行

3.:before表示元素最前邊的部分

4. :after表示元素的最後邊的部分

通常before和after都須要結合content這個樣式一塊兒使用， 經過content能夠向before或after的位置添加一些內容
:after

11. 屬性選擇器

• 做用：能夠根據元素中的屬性或屬性值來選取指定元素
• 語法：
  • [屬性名] 選取含有指定屬性的元素
  • [屬性名="屬性值"] 選取含有指定屬性值的元素
  • [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
  • [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素

12. 子元素選擇器

1. :first-child 能夠選中第一個子元素:

2.last-child 能夠選中最後一個子元素

body > p:first-child{background-color: yellow;}p:last-child{background-color: yellow;}
複製代碼

3. :nth-child 能夠選中任意位置的子元素

該選擇器後邊能夠指定一個參數，指定要選中第幾個子元素
even 表示偶數位置的子元素
odd 表示奇數位置的子元素

p:nth-child(odd){background-color: yellow;}
複製代碼

:first-of-type,:last-of-type，:nth-of-type,:first-child這些很是的相似，只不過child，是在全部的子元素中排列而type，是在當前類型的子元素中排列

p:first-of-type{background-color: yellow;}
複製代碼

13.兄弟選擇器

爲挨着的兄弟元素添加樣式，其中 + 表示後一個，而 ~ 則表示前一個

span ~ p{
  background-color: yellow;
}
span + p{
  background-color: yellow;
}
複製代碼

2. 樣式繼承

像兒子能夠繼承父親的遺產同樣，在CSS中，祖先元素上的樣式，也會被他的後代元素所繼承,利用繼承，能夠將一些基本的樣式設置給祖先元素，這樣全部的後代元素將會自動繼承這些樣式。可是並非全部的樣式都會被子元素所繼承，好比：背景相關的樣式都不會被繼承 邊框相關的樣式 定位相關的

3. 樣式優先級

優先級的規則：

1. 內聯樣式 ， 優先級 1000
2. id選擇器，優先級 100
3. 類和僞類， 優先級 10
4. 元素選擇器，優先級 1
5. 通配* ， 優先級 0
6. 繼承的樣式，沒有優先級
7. 並集選擇器的優先級是單獨計算
8. 能夠在樣式的最後，添加一個!important，則此時該樣式將會得到一個最高的優先級，將會優先於全部的樣式顯示甚至超過內聯樣式，可是在開發中儘可能避免使用!important

4. 長度單位

1.像素 px

像素是咱們在網頁中使用的最多的一個單位，一個像素就至關於咱們屏幕中的一個小點，咱們的屏幕實際上就是由這些像素點構成的可是這些像素點，是不能直接看見。不一樣顯示器一個像素的大小也不相同，顯示效果越好越清晰，像素就越小，反之像素越大。

2. 百分比 %

也能夠將單位設置爲一個百分比的形式，這樣瀏覽器將會根據其父元素的樣式來計算該值使用百分比的好處是，當父元素的屬性值發生變化時，子元素也會按照比例發生改變在咱們建立一個自適應的頁面時，常用百分比做爲單位

3. em

em和百分比相似，它是相對於當前元素的字體大小來計算的 1em = 1font-size 使用em時，當字體大小發生改變時，em也會隨之改變當設置字體相關的樣式時，常常會使用em

4. 行間距

在CSS並無爲咱們提供一個直接設置行間距的方式， 咱們只能經過設置行高來間接的設置行間距，行高越大行間距越大 使用line-height來設置行高 行高相似於咱們上學單線本，單線本是一行一行，線與線之間的距離就是行高， 網頁中的文字實際上也是寫在一個看不見的線中的，而文字會默認在行高中垂直居中顯示。
行間距 = 行高 - 字體大小

經過設置line-height能夠間接的設置行高，
能夠接收的值：
1.直接就收一個大小
2.能夠指定一個百分數，則會相對於字體去計算行高
3.能夠直接傳一個數值，則行高會設置字體大小相應的倍數

p{
    line-height: 200%;
    line-height: 20px;
    line-height: 2;
}
複製代碼

對於單行文原本說，能夠將行高設置爲和父元素的高度一致， 這樣能夠是單行文本在父元素中垂直居中

5. 文本樣式

1. text-transform能夠用來設置文本的大小寫

可選值：

• none 默認值，該怎麼顯示就怎麼顯示，不作任何處理
• capitalize 單詞的首字母大寫，經過空格來識別單詞
• uppercase 全部的字母都大寫
• lowercase 全部的字母都小寫
  

2.text-decoration能夠用來設置文本的修飾

可選值：

• none：默認值，不添加任何修飾，正常顯示
• underline 爲文本添加下劃線
• overline 爲文本添加上劃線
• line-through 爲文本添加刪除線

超連接會默認添加下劃線，也就是超連接的text-decoration的默認值是underline若是須要去除超連接的下劃線則須要將該樣式設置爲none

3.letter-spacing能夠指定字符間距

4. word-spacing能夠設置單詞之間的距離

實際上就是設置詞與詞之間空格的大小

5.text-align用於設置文本的對齊方式

可選值：

• left 默認值，文本靠左對齊
• right ， 文本靠右對齊
• center ， 文本居中對齊
• justify ， 兩端對齊經過調整文本之間的空格的大小，來達到一個兩端對齊的目的
  

6.text-indent用來設置首行縮進

當給它指定一個正值時，會自動向右側縮進指定的像素 若是爲它指定一個負值，則會向左移動指定的像素, 經過這種方式能夠將一些不想顯示的文字隱藏起來 這個值通常都會使用em做爲單位

6. 盒模型

使用width來設置盒子內容區的寬度，使用height來設置盒子內容區的高度。**width和height只是設置的盒子內容區的大小，而不是盒子的整個大小，盒子可見框的大小由內容區，內邊距和邊框共同決定。 內聯元素不能設置 height 和 width ，若是非要設置必須修改 display 。

1. 爲元素設置邊框

要爲一個元素設置邊框必須指定三個樣式

1. border-width:邊框的寬度

使用border-width能夠分別指定四個邊框的寬度若是在border-width指定了四個值，則四個值會分別設置給 上 右 下 左，按照順時針的方向設置的
若是指定三個值，則三個值會分別設置給 上 左右 下
若是指定兩個值，則兩個值會分別設置給 上下 左右
若是指定一個值，則四邊全都是該值

2.border-color:邊框顏色

和寬度同樣，color也提供四個方向的樣式，能夠分別指定顏色

3. border-style:邊框的樣式

• none，默認值，沒有邊框
• solid 實線
• dotted 點狀邊框
• dashed 虛線
• double 雙線

2. 內邊距（padding）

指的是盒子的內容區與盒子邊框之間的距離* 一共有四個方向的內邊距,內邊距會影響盒子的可見框的大小，元素的背景會延伸到內邊距.

3. 外邊距

外邊距指的是當前盒子與其餘盒子之間的距離，他不會影響可見框的大小，而是會影響到盒子的位置。因爲頁面中的元素都是靠左靠上擺放的，因此注意當咱們設置上和左外邊距時，會致使盒子自身的位置發生改變。_
margin還能夠設置爲auto，auto通常只設置給水平方向的margin若是隻指定，左外邊距或右外邊距的margin爲auto則會將外邊距設置爲最大值垂直方向外邊距若是設置爲auto，則外邊距默認就是0若是將left和right同時設置爲auto，則會將兩側的外邊距設置爲相同的值，就可使元素自動在父元素中居中，因此咱們常常將左右外邊距設置爲auto。

1. 垂直外邊距重疊

垂直外邊距的重疊在網頁中相鄰垂直方向的外邊距會發生外邊距的重疊所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和.
若是父子元素的垂直外邊  距相鄰 **了，則子元素的外邊距會設置給父元素.

2. 如何解決外邊距重疊

1. 在兩個元素之家加其餘元素
2. 添加 border
3. 添加 padding

注意：內聯元素是不支持垂直方向的外邊距的，其餘的都和塊級元素相同。

7. 元素展現方式

1. display

將一個內聯元素變成塊元素， 經過display樣式能夠修改元素的類型
可選值：

• inline：能夠將一個元素做爲內聯元素顯示
• block: 能夠將一個元素設置塊元素顯示
• inline-block：將一個元素轉換爲行內塊元素可使一個元素既有行內元素的特色又有塊元素的特色既能夠設置寬高，又不會獨佔一行
• none: 不顯示元素，而且元素不會在頁面中繼續佔有位置使用該方式隱藏的元素，不會在頁面中顯示，而且再也不佔據頁面的位置
  

2. visibility

能夠用來設置元素的隱藏和顯示的狀態
可選值：

• visible 默認值，元素默認會在頁面顯示
• hidden 元素會隱藏不顯示,使用 visibility:hidden;隱藏的元素雖然不會在頁面中顯示，可是它的位置會依然保持

3. overflow

子元素默認是存在於父元素的內容區中，
理論上講子元素的最大能夠等於父元素內容區大小
若是子元素的大小超過了父元素的內容區，則超過的大小會在父元素之外的位置顯
超出父元素的內容，咱們稱爲溢出的內容
父元素默認是將溢出內容，在父元素外邊顯示，
經過overflow能夠設置父元素如何處理溢出內容：
可選值：
- visible，默認值，不會對溢出內容作處理，元素會顯示
- hidden, 溢出的內容，會被修剪，不會顯示
- scroll, 會爲父元素添加滾動條，經過拖動滾動條該屬性不論內容是否溢出，都會添加水平
- auto，會根據需求自動添加滾動條，須要水平就添加水平須要垂直就添加垂直都不須要就都不加

8. 文檔流

文檔流文檔流處在網頁的最底層，它表示的是一個頁面中的位置，咱們所建立的元素默認都處在文檔流中
元素在文檔流中的特色

1.塊元素

1.塊元素在文檔流中會獨佔一行，塊元素會自上向下排列。
2.塊元素在文檔流中默認寬度是父元素的100%
3.塊元素在文檔流中的高度默認被內容撐開

2.內聯元素

1.內聯元素在文檔流中只佔自身的大小，會默認從左向右排列，若是一行中不足以容納全部的內聯元素，則換到下一行，繼續自左向右。
2.在文檔流中，內聯元素的寬度和高度默認都被內容撐開

9. 浮動

塊元素在文檔流中默認垂直排列， 若是但願塊元素在頁面中水平排列，可使塊元素脫離文檔流使用float來使元素浮動，從而脫離文檔流
可選值：

• none，默認值，元素默認在文檔流中排列
• left，元素會當即脫離文檔流，向頁面的左側浮動
• right，元素會當即脫離文檔流，向頁面的右側浮動

1. 浮動的規則

當爲一個元素設置浮動之後（float屬性是一個非none的值）， 元素會當即脫離文檔流，元素脫離文檔流之後，它下邊的元素會當即向上移動 元素浮動之後，會盡可能向頁面的左上或右上漂浮， 直到遇到父元素的邊框或者其餘的浮動元素
若是浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素。
浮動的元素不會超過他上邊的兄弟元素，最多最多一邊齊。
浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍
在文檔流中，子元素的寬度默認佔父元素的所有當元素設置浮動之後，會徹底脫離文檔流.塊元素脫離文檔流之後，高度和寬度都被內容撐開
    開啓span的浮動內聯元素脫離文檔流之後會變成塊元素

2. 浮動後高度塌陷

在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。可是當爲子元素設置浮動之後，子元素會徹底脫離文檔流，此時將會致使子元素沒法撐起父元素的高度，致使父元素的高度塌陷。因爲父元素的高度塌陷了，則父元素下的全部元素都會向上移動，這樣將會致使頁面佈局混亂。
 因此在開發中必定要避免出現高度塌陷的問題,咱們能夠將父元素的高度寫死，以免塌陷的問題出現，可是一旦高度寫死，父元素的高度將不能自動適應子元素的高度，因此這種方案是不推薦使用的。

3. 解決高度塌陷問題

1. 開啓BFC

根據W3C的標準，在頁面中元素都一個隱含的屬性叫作Block Formatting Context簡稱BFC，該屬性能夠設置打開或者關閉，默認是關閉的。當開啓元素的BFC之後，元素將會具備以下的特性：
1.父元素的垂直外邊距不會和子元素重疊
2.開啓BFC的元素不會被浮動元素所覆蓋
3.開啓BFC的元素能夠包含浮動的子元素
如何開啓元素的BFC
1.設置元素浮動使用這種方式開啓，雖然能夠撐開父元素，可是會致使父元素的寬度丟失並且使用這種方式也會致使下邊的元素上移，不能解決問題。這是由於開啓浮動的會計元素寬高都是默認被撐起來的，除非自動設置寬高。
2.設置元素絕對定位
3.設置元素爲inline-block能夠解決問題，可是會致使寬度丟失，不推薦使用這種方式
4.將元素的overflow設置爲一個非visible的值
**推薦方式：將overflow設置爲hidden是反作用最小的開啓BFC的方式。 **
是在IE6及如下的瀏覽器中並不支持BFC，因此使用這種方式不能兼容IE6。在IE6中雖然沒有BFC，可是具備另外一個隱含的屬性叫作hasLayout，該屬性的做用和BFC相似，所在IE6瀏覽器能夠經過開hasLayout來解決該問題開啓方式不少，咱們直接使用一種反作用最小的：直接將元素的zoom設置爲1便可

• zoom表示放大的意思，後邊跟着一個數值，寫幾就將元素放大幾倍
• zoom:1表示不放大元素，可是經過該樣式能夠開啓hasLayout
• zoom這個樣式，只在IE中支持，其餘瀏覽器都不支持

.parent{
	zoom:1;
  overflow: hidden;
}
複製代碼

2. 清除浮動

能夠直接在高度塌陷的父元素的最後，添加一個空白的div， 而後在對其進行清除浮動，   因爲這個div並無受到浮動元素的影響，因此他應該處在原來的元素在的時候的位置這樣就至關於原來的元素還在，因此是能夠撐開父元素的高度的，這樣能夠經過這個空白的div來撐開父元素的 基本沒有反作用使用這種方式雖然能夠解決問題，可是會在頁面中添加多餘的結構。

.clear{
				clear: both;
}
複製代碼

3. 僞類

經過after僞類，選中父元素的後邊能夠經過after僞類向元素的最後添加一個空白的塊元素，而後對其清除浮動，這樣作和添加一個div的原理同樣，能夠達到一個相同的效果，並且不會在頁面中添加多餘的div，這是咱們最推薦使用的方式，幾乎沒有反作用。

.clearfix:after{
				/*添加一個內容*/
				content: "";
				/*轉換爲一個塊元素*/
				display: block;
				/*清除兩側的浮動*/
				clear: both;
			}
複製代碼

4. 最佳實踐

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
  clear: both;
}
			
.clearfix{
  zoom: 1;
}
複製代碼

通過修改後的clearfix是一個多功能的,既能夠解決高度塌陷，又能夠確保父元素和子元素的垂直外邊距不會重疊。子元素和父元素相鄰的垂直外邊距會發生重疊，子元素的外邊距會傳遞給父元素 使用空的table標籤能夠隔離父子元素的外邊距，阻止外邊距的重疊

4. 清除浮動

因爲受到box1浮動的影響，box2總體向上移動了100px
咱們有時但願清除掉其餘元素浮動對當前元素產生的影響，這時可使用
clear能夠用來清除其餘浮動元素對當前元素的影響
可選值：
none，默認值，不清除浮動
left，清除左側浮動元素對當前元素的影響
right，清除右側浮動元素對當前元素的影響
both，清除兩側浮動元素對當前元素的影響清除對他影響最大的那個元素的浮動

10. 定位

定位指的就是將指定的元素擺放到頁面的任意位置 經過定位能夠任意的擺放元素 經過position屬性來設置元素的定位
可選值：

• static：默認值，元素沒有開啓定位
  
• relative：開啓元素的相對定位
  
• absolute：開啓元素的絕對定位
  
• fixed：開啓元素的固定定位（也是絕對定位的一種）

當開啓了元素的定位（position屬性值是一個非static的值）時， 能夠經過left right top bottom四個屬性來設置元素的偏移量

• left：元素相對於其定位位置的左側偏移量
  
• right：元素相對於其定位位置的右側偏移量
  
• top：元素相對於其定位位置的上邊的偏移量
  
• bottom：元素相對於其定位位置下邊的偏移量
  

一般偏移量只須要使用兩個就能夠對一個元素進行定位， 通常選擇水平方向的一個偏移量和垂直方向的偏移量來爲一個元素進行定位

1. 相對定位

當元素的position屬性設置爲relative時，則開啓了元素的相對定位

1. 當開啓了元素的相對定位之後，而不設置偏移量時，元素不會發生任何變化
2. 相對定位是相對於元素在文檔流中原來的位置進行定位
3. 相對定位的元素不會脫離文檔流
4. 相對定位會使元素提高一個層級
5. 相對定位不會改變元素的性質，塊仍是塊，內聯仍是內聯

2. 絕對定位

當position屬性值設置爲absolute時，則開啓了元素的絕對定位
絕對定位：

1. 開啓絕對定位，會使元素脫離文檔流
   
2. 開啓絕對定位之後，若是不設置偏移量，則元素的位置不會發生變化
   
3. 絕對定位是相對於離他最近的開啓了定位的祖先元素進行定位的（通常狀況，開啓了子元素的絕對定位都會同時開啓父元素的相對定位）若是全部的祖先元素都沒有開啓定位，則會相對於瀏覽器窗口進行定位
4. 絕對定位會使元素提高一個層級
   
5. 絕對定位會改變元素的性質，內聯元素變成塊元素，塊元素的寬度和高度默認都被內容撐開

3.  固定定位

當元素的position屬性設置fixed時，則開啓了元素的固定定位 固定定位也是一種絕對定位，它的大部分特色都和絕對定位同樣 不一樣的是： 固定定位永遠都會相對於瀏覽器窗口進行定位 固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動IE6不支持固定定位.