從零開始學 Web 之 CSS（三）連接僞類、背景、行高、盒子模型、浮動

你們好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、連接僞類

a:link{屬性:值;}       /*連接默認狀態    ( a{屬性:值}效果是同樣的。)*/ 
a:visited{屬性:值;}     /*連接訪問以後的狀態*/
a:hover{屬性:值;}      /*鼠標放到連接上顯示的狀態*/
a:active{屬性:值;}      /*連接激活的狀態*/
：focus{屬性:值；}     /*獲取焦點*/

注意：
1.a:visited以後要想回到以前的狀態，須要清除緩存。
2.寫的順序要按照link,visited,hover,active的順序來寫，不然可能不顯示。

• 文本修飾

text-decoration:  none | underline | line-through | ...... /* 連接下劃線/刪除線/...... */

---

2、背景屬性

background-color：    /*背景顏色*/
background-image：    /*背景圖片*/
background-size:  /*調節背景大小（通常用於美工給的背景圖大於須要的尺寸，設置此屬性，調節背景圖大小）*/
Background-repeat：    repeat(默認)  |  no-repeat |   repeat-x   |  repeat-y     /*背景平鋪*/
Background-position：  left  |  right  |  center（默認）  |  top  | bottom  /*背景定位*/
Background-attachment:   scroll（默認）  |  fixed   /*背景是否滾動*/

• Background-position

background-position: right; // 方位值只寫一個的時候，另一個值默認居中。
background-position: right bottom // 寫2個方位值的時候，順序沒有要求
background-position: 20px 30px // 寫2個具體值的時候，第一個值表明水平方向，第二個值表明垂直方向

• Background-attachment

scroll: 背景圖的位置是基於盒子（假如是div）的範圍進行顯示
fixed：背景圖的位置是基於整個瀏覽器body的範圍進行顯示，若是背景圖定義在div裏面，而顯示的位置在瀏覽器範圍內可是不在div的範圍內的話，背景圖沒法顯示。

一、背景屬性連寫

background: red url("1.png") no-repeat 30px 40px scroll;

PS：連寫的時候沒有順序要求，url爲必寫項

---

3、行高

瀏覽器默認文字大小：16px

行高：是基線與基線之間的距離
行高 = 文字高度+上下邊距

一、行高的單位

行高單位	文字大小	值
20px	20px	20px
2em	20px	20px*2=40px
150%	20px	20px*150%=30px
2	20px	20px*2=40px

總結:單位除了像素之外，行高都是與文字大小與前面數值的乘積。

行高單位	父元素文字大小（定義了行高）	子元素文字大小（子元素未定義行高時）	行高
40px	20px	30px	40px
2em	20px	30px	40px
150%	20px	30px	30px
2	20px	30px	60px

總結:不帶單位時，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素爲單位，就是定義的行高值。

PS: 推薦行高使用像素爲單位。

---

4、盒子模型

一、border（邊框）

Border-top-style:  solid   /*實線*/
                    dotted  /*點線*/
                    dashed  /*虛線*/
                        none /*無邊框*/
Border-top-color   /*邊框顏色*/
Border-top-width   /*邊框粗細*/

除了有top系列外還有left,right,bottom系列

• 邊框屬性的連寫

border-top: 1px solid #fff;

沒有順序要求，線型爲必寫項

• 四個邊框值相同的寫法

border: 1px solid #fff;

PS: 沒有順序要求，線型爲必寫項

邊框合併（細線邊框）

border-collapse:collapse;

獲取焦點

• label for id 獲取光標焦點（效果：點擊label也能夠選擇文本框）

<label for="username">用戶名：</label><input type="text" class="username" id="username"></input>

二、padding（內邊距）

padding-left   |   right    |  top  |  bottom

• padding連寫

Padding: 20px;   /*上右下左內邊距都是20px*/
Padding: 20px 30px;   /*上下20px   左右30px*/
Padding: 20px  30px  40px;  /* 上內邊距爲20px  左右內邊距爲30px   下內邊距爲40px*/
Padding: 20px  30px   40px  50px;   /*上20px 右30px  下40px  左  50px*/

• 內邊距撐大盒子的問題

盒子的寬度 = 定義的寬度 + 邊框寬度 + 左右內邊距

• 繼承的盒子通常不會被撐大

包含（嵌套）的盒子，若是子盒子沒有定義寬度，給子盒子設置左右內邊距（內邊距不大於子盒子寬度），不會撐大子盒子。至於設置了上下內邊距的話是會撐大子盒子的。（無論怎樣父盒子永不變）

三、margin（外邊距）

margin-left   | right  |  top  |  bottom

• 外邊距連寫

margin: 20px;    /*上下左右外邊距20PX*/
margin: 20px 30px;   /*上下20px  左右30px*/
margin: 20px  30px  40px;     /*上20px  左右30px   下40px*/
margin: 20px  30px   40px  50px; /*上20px   右30px   下40px  左50px*/

注意:
margin: 0 auto; 盒子居中對齊
text-align:center 是盒子裏面的內容居中

• 垂直方向外邊距合併（取最大值）

兩個盒子垂直佈局，一個設置上外邊距，一個設置下外邊距，取的設置較大的值，而不是相加。

• 嵌套的盒子外邊距塌陷

嵌套的盒子，直接給子盒子設置垂直方向外邊距的時候，會發生外邊距的塌陷（父盒子跟着移動）

解決方法:

1.給父盒子設置邊框

2.給父盒子overflow:hidden;

---

5、浮動

一、文檔流（標準流）

元素自上而下，自左而右，塊元素獨佔一行，行內元素在一行上顯示，碰到父集元素的邊框換行。

二、浮動佈局

float:  left   |   right /*浮動方向*/

特色：
1.元素浮動以後不佔據原來的位置（脫標）
2.浮動的盒子在一行上顯示
3.行內元素浮動以後自動轉換爲行內塊元素。（不推薦使用，轉行內元素最好使用display: inline-block;）

三、浮動的做用

• 文本繞圖

• 製做導航（常常使用）

把無序列表 ul li 浮動起來作成的導航。

• 網頁佈局

四、清除浮動

清除浮動不是不用浮動，清除浮動產生的問題。

問題：當父盒子沒有定義高度，嵌套的盒子浮動以後，下邊的元素髮生位置錯誤（佔據父盒子的位置）。

方法一

額外標籤法：在最後一個浮動元素後添加標籤。

clear: left  |  right  | both  /*用的最多的是clear:both;*/

方法二

給浮動元素的父集元素使用overflow:hidden;

注意：若是有內容出了盒子，不能使用這個方法。

方法三（推薦使用）

僞元素清除浮動。

: after 至關於在當前盒子後加了一個盒子。