前端技術(shù)之_CSS詳解第六天--完結(jié)  

一、復(fù)習(xí)第五天的知識(shí)

a標(biāo)簽的偽類4個(gè)：

　　a:link 沒(méi)有被點(diǎn)擊過(guò)的鏈接

　　a:visited 訪問(wèn)過(guò)的鏈接

　　a:hover 懸停

　　a:active 按下鼠標(biāo)不松手

順序就是“love hate”準(zhǔn)則。

可以簡(jiǎn)寫(xiě)：

1 a{
3 }
4 a:hover{
6 }

background系列屬性，CSS2.1層面 

1 background-color
2 background-image
3 background-repeat
4 background-position
5 background-attachment

顏色表示法：red、#ff0000、#ff0000、#f00

rgb和十六進(jìn)制顏色是一樣多的，是一一對(duì)應(yīng)的。有換算關(guān)系。

background-image:url(images/1.jpg);

默認(rèn)是平鋪的。

background-repeat:no-repeat;

 　　重復(fù)橫向： repeat-x;

　 　重復(fù)縱向： repeat-y;

　　 不重復(fù)： no-repeat;

background-position:100px 200px;

背景圖在盒子中右邊移動(dòng)100px，向下移動(dòng)200px。

可以是負(fù)數(shù)，background-position:-100px -200px;

向左邊100px，向上邊200px。

英語(yǔ)單詞來(lái)表示

　　background-position:right bottom; 右下角

　　background-position:center bottom; 下邊居中

css精靈

　　css雪碧，要會(huì)用fireworks精確顯示精靈圖。

background-attachment

背景固定

1 background-attachment:fixed;

background屬性大綜合 

1 background:url(images/1.jpg) no-repeat -100px -100px;

二、相對(duì)定位

定位有三種，分別是相對(duì)定位、絕對(duì)定位、固定定位。

相對(duì)定位：

1 position:relative;

固定定位：絕對(duì)定位：

1 position:absolute;

每一種定位，都暗藏玄機(jī)，所以我們分別講解。 

1 position:fixed;

2.1 認(rèn)識(shí)相對(duì)定位

相對(duì)定位，就是微調(diào)元素位置的。讓元素相對(duì)自己原來(lái)的位置，進(jìn)行位置調(diào)整。

也就是說(shuō)，如果一個(gè)盒子想進(jìn)行位置調(diào)整，那么就要使用相對(duì)定位

1 position:relative;   → 必須先聲明，自己要相對(duì)定位了，
2 left:100px;       → 然后進(jìn)行調(diào)整。
3 top:150px;       → 然后進(jìn)行調(diào)整。

2.2 不脫標(biāo)，老家留坑，形影分離

相對(duì)定位不脫標(biāo)，真實(shí)位置是在老家，只不過(guò)影子出去了，可以到處飄。

2.3 相對(duì)定位用途

相對(duì)定位有坑，所以一般不用于做“壓蓋”效果。頁(yè)面中，效果極小。就兩個(gè)作用：

　　1） 微調(diào)元素

　　2） 做絕對(duì)定位的參考，子絕父相（講絕對(duì)定位的時(shí)候說(shuō)）

2.4 相對(duì)定位的定位值

可以用left、right來(lái)描述盒子右、左的移動(dòng)；

可以用top、bottom來(lái)描述盒子的下、上的移動(dòng)。

↘：

1 position: relative;

2 top: 10px;

3 left: 40px;

↙： 

1 position: relative;

2 right: 100px;   → 往左邊移動(dòng)

3 top: 100px;

↖： 

1 position: relative;

2 right: 100px;

3 bottom: 100px;    → 移動(dòng)方向是向上。

↗： 

1 position: relative;

2 top: -200px;       → 負(fù)數(shù)就是相反的方向，如果是正，就是下邊，如果是負(fù)數(shù)就是上邊

3 right: -200px;

↗： 

1 position: relative;

2 right: -300px;

3 bottom: 300px;

 完全等價(jià)于：

4 position: relative;

5 left: 300px;

1 bottom: 300px;

如圖，有幾種相對(duì)定位的移動(dòng)方法？

方法1：

1 position:relative;

2 top:100px;

3 left:200px;

方法2：

1 position:relative;

2 bottom:-100px;

3 right:-200px;

方法3：

1 position:relative;

2 top:100px;

3 right:-200px;

方法4：

1 position:relative;

2 bottom:-100px;

3 left:200px;

三、絕對(duì)定位

絕對(duì)定位比相對(duì)定位更靈活。

3.1 絕對(duì)定位脫標(biāo)

絕對(duì)定位的盒子，是脫離標(biāo)準(zhǔn)文檔流的。所以，所有的標(biāo)準(zhǔn)文檔流的性質(zhì)，絕對(duì)定位之后都不遵守了。

絕對(duì)定位之后，標(biāo)簽就不區(qū)分所謂的行內(nèi)元素、塊級(jí)元素了，不需要display:block;就可以設(shè)置寬、高了：

1  span{
2  position: absolute;
3  top: 100px;
4  left: 100px;
5  width: 100px;
6  height: 100px;
8  }

3.2 參考點(diǎn)

絕對(duì)定位的參考點(diǎn)，如果用top描述，那么定位參考點(diǎn)就是頁(yè)面的左上角，而不是瀏覽器的左上角：

如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對(duì)應(yīng)的頁(yè)面的左下角：

面試題：

答案：

　　用bottom的定位的時(shí)候，參考的是瀏覽器首屏大小對(duì)應(yīng)的頁(yè)面左下角。

3.3 以盒子為參考點(diǎn)

一個(gè)絕對(duì)定位的元素，如果父輩元素中出現(xiàn)了也定位了的元素，那么將以父輩這個(gè)元素，為參考點(diǎn)。

● 要聽(tīng)最近的已經(jīng)定位的祖先元素的，不一定是父親，可能是爺爺：

1  
   →  相對(duì)定位
2  
  →  沒(méi)有定位
3  
   → 絕對(duì)定位，將以box1為參考，因?yàn)閎ox2沒(méi)有定位，box1就是最近的父輩元素
4  
5  

1  
   →  相對(duì)定位
2  
  → 相對(duì)定位
3  
   → 絕對(duì)定位，將以box2為參考，因?yàn)閎ox2是自己最近的父輩元素
4  
1  

● 不一定是相對(duì)定位，任何定位，都可以作為參考點(diǎn)

1     
  → 絕對(duì)定位
2     
  → 絕對(duì)定位，將以div作為參考點(diǎn)。因?yàn)楦赣H定位了。
3     

子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是，工程上子絕、父絕，沒(méi)有一個(gè)盒子在標(biāo)準(zhǔn)流里面了，所以頁(yè)面就不穩(wěn)固，沒(méi)有任何實(shí)戰(zhàn)用途。工程上，“子絕父相”有意義，父親沒(méi)有脫標(biāo)，兒子脫標(biāo)在父親的范圍里面移動(dòng)。 

1 
  → 絕對(duì)定位
2     
  → 相對(duì)定位
3     
  → 沒(méi)有定位
4     
  → 絕對(duì)定位，以box2為參考定位。
5     
6     
7 

● 絕對(duì)定位的兒子，無(wú)視參考的那個(gè)盒子的padding。 

下圖中，綠色部分是div的padding，藍(lán)色部分是div的內(nèi)容區(qū)域。那么此時(shí)，div相對(duì)定位，p絕對(duì)定位。

p將無(wú)視父親的padding，在border內(nèi)側(cè)為參考點(diǎn)，進(jìn)行定位：

3.4 絕對(duì)定位的盒子居中

絕對(duì)定位之后，所有標(biāo)準(zhǔn)流的規(guī)則，都不適用了。所以margin:0 auto;失效。

1  width: 600px;
2  height: 60px;
   position: absolute;
3  left: 50%;
4  top: 0;
5  margin-left: -300px;   → 寬度的一半

 非常簡(jiǎn)單，當(dāng)做公式記憶下來(lái)。就是left:50%; margin-left:負(fù)的寬度的一半。

四、固定定位

固定定位，就是相對(duì)瀏覽器窗口定位。頁(yè)面如何滾動(dòng)，這個(gè)盒子顯示的位置不變。

固定定位脫標(biāo)！

案例：

    
    
    


    

        

            

                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
                
網(wǎng)頁(yè)欄目
            
        
    
    
    

    

        按鈕
    
    
    
    
    
    
    
    
    
    
    
 
     

IE6不兼容。

    
    
    


    返回
頂部
    
    
    
    

五、z-index

● z-index值表示誰(shuí)壓著誰(shuí)。數(shù)值大的壓蓋住數(shù)值小的。

● 只有定位了的元素，才能有z-index值。也就是說(shuō)，不管相對(duì)定位、絕對(duì)定位、固定定位，都可以使用z-index值。而浮動(dòng)的東西不能用。

● z-index值沒(méi)有單位，就是一個(gè)正整數(shù)。默認(rèn)的z-index值是0。

● 如果大家都沒(méi)有z-index值，或者z-index值一樣，那么誰(shuí)寫(xiě)在HTML后面，誰(shuí)在上面能壓住別人。定位了的元素，永遠(yuǎn)能夠壓住沒(méi)有定位的元素。

● 從父現(xiàn)象：父親慫了，兒子再牛逼也沒(méi)用。

    
    
    


    
綠
    
藍(lán)

沒(méi)有單位：

1 z-index: 988;