- CSS中，所有的行，都有行高。盒模型的padding，絕對不是直接作用在文字上的，而是作用在“行”上。
line-height: 40px;
- 文字，是在自己的行里面居中的。比如說，現(xiàn)在的文字字號為14px，行高為24px。那么：
- 為了嚴(yán)格保證字在行里面居中，我們的工程師都有個(gè)約定：行高、字號，一般都是偶數(shù)。這樣，它們的差，就是偶數(shù)，就能夠被2整除。
1.2 單行文本垂直居中
- 文本在行里面居中，公式為：
行高:盒子高;
- 需要注意的是，這個(gè)小技巧，行高=盒子高。只適用于單行文本垂直居中，不適用于多行。如果想讓多行文本垂直居中，需要設(shè)置盒子的padding值。
1.3 font屬性
- 使用font屬性，能夠?qū)⒆痔?、行高、字體一起設(shè)置。
font: 14px/24px “宋體”;
- 等價(jià)于三行語句：
font-size:14px;
line-height:24px;
font-family:"宋體";
- font-family就是“字體”的意思。
- 網(wǎng)頁中不是所有字體都能用，因?yàn)檫@個(gè)字體要看用戶的電腦里面裝沒裝。比如說你設(shè)置為：
font-family: "華文彩云";
- 如果用戶電腦中沒有這個(gè)字體，那么就會變成宋體。頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。
- 為了防止用戶電腦里面，沒有微軟雅黑這個(gè)字體。就要用英文的逗號，隔開備選字體，就是說如果用于電腦里面，沒有安裝微軟雅黑字體，那么就是宋體：
font-family: "微軟雅黑","宋體";
- 備選字體可以有無數(shù)個(gè)，用逗號隔開。
- 我們要將英文字體，放在最前面，這樣所有的中文，就不能夠匹配英文字體，就自動的變?yōu)楹竺娴闹形淖煮w：
font-family: "Times New Roman","微軟雅黑","宋體";
- 所有的中文字體，都有英文別名，我們也要知道：
- 微軟雅黑的英文別名為：font-family: "Microsoft YaHei"; ；宋體的英文別名為：font-family: "SimSun";。
- font屬性能夠?qū)ont-size、line-height、font-family合三為一：
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
- 行高可以用百分比，表示字號的百分之多少。一般來說，都是大于100%的，因?yàn)樾懈咭欢ㄒ笥谧痔枴?
font:12px/200% “宋體”
- 等價(jià)于：
font:12px/24px “宋體”;
2 超級鏈接的美化
2.1 偽類
- 也就是說，同一個(gè)標(biāo)簽，根據(jù)用戶的某種狀態(tài)不同，有不同的樣式，這就叫做“偽類”。
- 類就是工程師加的，比如div屬于box類，但是a屬于什么類呢？不明確，因?yàn)橐从脩粲袥]有點(diǎn)擊、有沒有觸碰，所以就叫做“偽類”。
- 偽類用冒號來表示，分為4種：
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
1、link表示，用戶沒有點(diǎn)擊過這個(gè)鏈接的樣式，是英文中“鏈接”的意思。
2、:visited表示，用戶訪問過這個(gè)鏈接的樣式，是英文“訪問過的”意思。
3、:hover表示，用戶鼠標(biāo)懸停的時(shí)候鏈接的樣式，是英文“懸停”的意思。
4、:active表示，用戶用鼠標(biāo)點(diǎn)擊這個(gè)鏈接，但是不松手，此刻的樣式，是英文“激活”的意思。
- 需要記住，這四種狀態(tài)，在css中，必須按照固定的順序：a:link 、a:visited 、a:hover 、a:active。如果不按照順序，那么將失效?！皭酆逌?zhǔn)則”love hate，必須先愛后恨。
2.2 超級鏈接的美化
- a標(biāo)簽在使用的時(shí)候，非常的難。因?yàn)椴粌H僅要控制a這個(gè)盒子，也要控制它的偽類。
- 我們一定要將a標(biāo)簽寫在前面，:link、:visited、:hover、:active這些偽類寫在后面。
- a標(biāo)簽中，描述盒子，偽類中描述文字的樣式、背景。
.nav ul li a{
display: block;
width: 120px;
height: 40px;
}
.nav ul li a:link ,.nav ul li a:visited{
text-decoration: none;
background-color: yellowgreen;
color:white;
}
.nav ul li a:hover{
background-color: purple;
font-weight: bold;
color:yellow;
}
- 需要記住，所有的a都不繼承text、font這些東西，因?yàn)閍自己有一個(gè)偽類的權(quán)重。
- 最標(biāo)準(zhǔn)的，就是把link、visited、hover都要寫。但是前端開發(fā)工程師在大量的實(shí)線中，發(fā)現(xiàn)不寫link、visited瀏覽器也挺兼容，所以把a(bǔ)標(biāo)簽簡化了。
- a:link、a:visited都是可以省略的，簡寫在a標(biāo)簽里面。也就是說，a標(biāo)簽蘊(yùn)含了link、visited的狀態(tài)。
.nav ul li a{
display: block;
width: 120px;
height: 50px;
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}
3 background系列屬性
3.1 background-color屬性
- 背景顏色屬性。CSS2.1中，顏色的表示方法有哪些？一共有三種：單詞、rgb表示法、十六進(jìn)制表示法。
3.1.1 用英文單詞來表示
- 能夠用英文單詞來表述的顏色，都是簡單顏色。
- 紅色：background-color: red; 。
3.1.2 用rgb方法來表示
- 紅色：background-color: rgb(255,0,0);。rgb表示三原色“紅”red、“綠”green、“藍(lán)”blue。光學(xué)顯示器，每個(gè)像素都是由三原色的發(fā)光原件組成的?？棵髁炼炔煌梢哉{(diào)成不同的顏色。
- 用逗號隔開，r、g、b的值，每個(gè)值的取值范圍0~255，一共256個(gè)值。
- 如果此項(xiàng)的值background-color: rgb(0,255,0); ；藍(lán)色：，是255，那么就說明是純色。
- 綠色：background-color: rgb(0,255,0); ；藍(lán)色：background-color: rgb(0,0,255);；黑色：background-color: rgb(0,0,0);；白色：background-color: rgb(255,255,255);。
- 顏色可以疊加，比如×××就是紅色和綠色的疊加：background-color: rgb(255,255,0);
3.1.3 十六機(jī)制表示法
- 紅色：background-color: #ff0000;。所有用#開頭的值，都是16進(jìn)制的。
- 16進(jìn)制表示法，也就是兩位兩位看，看r、g、b，但是沒有逗號隔開。
- ff就是10進(jìn)制的255，00就是10進(jìn)制的0，所以等價(jià)于rgb(255,0,0)。
3.2 background-image
- 用于給盒子加上背景圖片：background-image:url(images/wuyifan.jpg);。
- url()表示網(wǎng)址，uniform resouces locator 統(tǒng)一資源定位符。images/wuyifan.jpg 就是相對路徑。
- 背景天生就是被平鋪滿的。
3.3 background-repeat屬性
- 設(shè)置背景圖片是否重復(fù)，重復(fù)方式為：repeat表示“重復(fù)”。
- repeat表示“重復(fù)”的意思。
- 也就是說，background-repeat屬性，有三種值：
background-repeat:no-repeat; 不重復(fù)
background-repeat:repeat-x; 橫向重復(fù)
background-repeat:repeat-y; 縱向重復(fù)
3.4 background-position屬性
3.4.1 屬性的意思
- position就是“位置”的意思，background-position就是背景定位屬性。
background-position:向右移動量 向下移動量;
- 定位屬性可以是負(fù)數(shù)：
3.4.2 CSS精靈
- “CSS精靈”，英文css sprite，所以也叫作“css雪碧”技術(shù)。是一種CSS圖像合并技術(shù)，該方法時(shí)將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位技術(shù)來顯示需要顯示的圖片部分。
- CSS精靈有什么優(yōu)點(diǎn)，就是減少了http請求。比如說4張小圖片，原來需要4個(gè)http請求，但是用了css精靈后，4張小圖片變成了一張圖，http請求只有1個(gè)。
- 如淘寶網(wǎng)中的精靈兔：
3.4.3 使用單詞描述屬性
- background-position描述左右的詞為left、 center、right；描述上下的詞為：top 、center、bottom。
background-position: right bottom;
3.5 background-attachment
- 背景是否固定。
background-attachment:fixed;
- 背景會被固定住，不會被滾動條滾走。
3.6 background綜合屬性
- background屬性和border一樣，是一個(gè)綜合屬性：
background:red url(1.jpg) no-repeat 100px 100px fixed;
- 等價(jià)于：
1background-color:red;
2background-image:url(1.jpg);
3background-repeat:no-repeat;
4background-position:100px 100px;
background-attachment:fixed;
- 可以任意省略部分：
background: red;
4 相對定位
- 定位有三種，分別為相對定位、絕對定位、固定定位。
- 相對定位為：position:relative;
- 絕對定位為：position:absolute;
- 固定定位為：position:fixed;
4.1 認(rèn)識相對定位
- 相對定位，就是微調(diào)元素位置的。讓元素相對自己原來的位置，進(jìn)行位置調(diào)整。
- 也就是說，如果一個(gè)盒子想要進(jìn)行位置調(diào)整，那么就要使用相對定位。
position:relative; → 必須先聲明，自己要相對定位了，
left:100px; → 然后進(jìn)行調(diào)整。
top:150px; → 然后進(jìn)行調(diào)整。
4.2 不脫標(biāo)，老家留坑，形影分離
- 相對定位不脫離標(biāo)準(zhǔn)流，其真實(shí)的位置還是在老家里，只不過影子出去了，可以到處飄。
4.3 相對定位用途
- 相對定位有坑，所以一般不用于做“壓蓋”效果。頁面中，效果極小。就兩個(gè)作用：
1、微調(diào)元素；
2、做絕對定位的參考；
4.4 相對定位的定位值
- 可以使用left、right來描述盒子左、右的移動；可以使用top、bottom來描述盒子的下、上的移動。
5 絕對定位
- 絕對定位要比相對定位更靈活。
5.1 絕對定位脫標(biāo)
- 絕對定位的盒子，是脫離標(biāo)準(zhǔn)文檔流的。所以，所有的標(biāo)準(zhǔn)文檔流的性質(zhì)，絕對定位之后都不準(zhǔn)守。絕對定位之后，標(biāo)簽就不區(qū)分所謂的行內(nèi)元素、塊級元素了，不需要display:block;就可以設(shè)置寬高：
span{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
5.2 參考點(diǎn)
- 絕對定位的參考點(diǎn)，如果用top描述，那么定位參考點(diǎn)就是頁面的左上角，而不是瀏覽器的左上角。
- 如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對應(yīng)的頁面的左下角：
- 面試題：
- 用bottom定位的時(shí)候，參考的是瀏覽器首屏大小對應(yīng)的頁面左下角：
5.3 以盒子為參考點(diǎn)
- 一個(gè)絕對定位的元素，如果父輩元素中也出現(xiàn)定位的元素，那么將以父輩這個(gè)元素，為參考點(diǎn)：
- 要聽最近的已經(jīng)定位的祖先元素的，不一定是父親，可能是爺爺。
<div class="box1"> → 相對定位
<div class="box2"> → 沒有定位
<p></p> → 絕對定位，將以box1為參考，因?yàn)閎ox2沒有定位，box1就是最近的父輩元素
</div>
</div>
<div class="box1"> → 相對定位
<div class="box2"> → 相對定位
<p></p> → 絕對定位，將以box2為參考，因?yàn)閎ox2是自己最近的父輩元素
</div>
</div>
- 不一定是相對定位，任何定位，都可以作為參考點(diǎn)。
<div> → 絕對定位
<p></p> → 絕對定位，將以div作為參考點(diǎn)。因?yàn)楦赣H定位了。
</div>
5.4 絕對定位的盒子居中
- 絕對定位之后，所有標(biāo)準(zhǔn)流的規(guī)則，都不適用了，所以margin : 0 auto；失效。可以使用如下設(shè)置使其水平居中：
left:50%;
margin-left:負(fù)的寬度的一半
6 固定定位
- 固定定位，就是相對于瀏覽器窗口的定位。無論頁面如何滾動，這個(gè)盒子顯示的位置不變。
- 固定定位脫標(biāo)。
7 z-index
1、z-index值表示誰壓著誰。數(shù)值大的蓋住數(shù)值小的。
2、只有定位了的元素，才能夠有z-index值。也就是說，不管相對定位、決定定位、固定定位，都可以使用z-index值。而浮動的東西不能夠使用。
3、z-index值沒有單位，就是一個(gè)整數(shù)值。默認(rèn)的z-index值為0。
4、定位了的元素，永遠(yuǎn)能夠壓住沒有定位的元素。
