前端技術之_CSS詳解第六天--完結  

一、復習第五天的知識

a標簽的偽類4個：

　　a:link 沒有被點擊過的鏈接

　　a:visited 訪問過的鏈接

　　a:hover 懸停

　　a:active 按下鼠標不松手

順序就是“love hate”準則。

可以簡寫：

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和十六進制顏色是一樣多的，是一一對應的。有換算關系。

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

默認是平鋪的。

background-repeat:no-repeat;

 　　重復橫向： repeat-x;

　 　重復縱向： repeat-y;

　　 不重復： no-repeat;

background-position:100px 200px;

背景圖在盒子中右邊移動100px，向下移動200px。

可以是負數，background-position:-100px -200px;

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

英語單詞來表示

　　background-position:right bottom; 右下角

　　background-position:center bottom; 下邊居中

css精靈

　　css雪碧，要會用fireworks精確顯示精靈圖。

background-attachment

背景固定

1 background-attachment:fixed;

background屬性大綜合 

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

二、相對定位

定位有三種，分別是相對定位、絕對定位、固定定位。

相對定位：

1 position:relative;

固定定位：絕對定位：

1 position:absolute;

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

1 position:fixed;

2.1 認識相對定位

相對定位，就是微調元素位置的。讓元素相對自己原來的位置，進行位置調整。

也就是說，如果一個盒子想進行位置調整，那么就要使用相對定位

1 position:relative;   → 必須先聲明，自己要相對定位了，
2 left:100px;       → 然后進行調整。
3 top:150px;       → 然后進行調整。

2.2 不脫標，老家留坑，形影分離

相對定位不脫標，真實位置是在老家，只不過影子出去了，可以到處飄。

2.3 相對定位用途

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

　　1） 微調元素

　　2） 做絕對定位的參考，子絕父相（講絕對定位的時候說）

2.4 相對定位的定位值

可以用left、right來描述盒子右、左的移動；

可以用top、bottom來描述盒子的下、上的移動。

↘：

1 position: relative;

2 top: 10px;

3 left: 40px;

↙： 

1 position: relative;

2 right: 100px;   → 往左邊移動

3 top: 100px;

↖： 

1 position: relative;

2 right: 100px;

3 bottom: 100px;    → 移動方向是向上。

↗： 

1 position: relative;

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

3 right: -200px;

↗： 

1 position: relative;

2 right: -300px;

3 bottom: 300px;

 完全等價于：

4 position: relative;

5 left: 300px;

1 bottom: 300px;

如圖，有幾種相對定位的移動方法？

方法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;

三、絕對定位

絕對定位比相對定位更靈活。

3.1 絕對定位脫標

絕對定位的盒子，是脫離標準文檔流的。所以，所有的標準文檔流的性質，絕對定位之后都不遵守了。

絕對定位之后，標簽就不區分所謂的行內元素、塊級元素了，不需要display:block;就可以設置寬、高了：

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

3.2 參考點

絕對定位的參考點，如果用top描述，那么定位參考點就是頁面的左上角，而不是瀏覽器的左上角：

如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對應的頁面的左下角：

面試題：

答案：

　　用bottom的定位的時候，參考的是瀏覽器首屏大小對應的頁面左下角。

3.3 以盒子為參考點

一個絕對定位的元素，如果父輩元素中出現了也定位了的元素，那么將以父輩這個元素，為參考點。

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

1  
   →  相對定位
2  
  →  沒有定位
3  
   → 絕對定位，將以box1為參考，因為box2沒有定位，box1就是最近的父輩元素
4  
5  

1  
   →  相對定位
2  
  → 相對定位
3  
   → 絕對定位，將以box2為參考，因為box2是自己最近的父輩元素
4  
1  

● 不一定是相對定位，任何定位，都可以作為參考點

1     
  → 絕對定位
2     
  → 絕對定位，將以div作為參考點。因為父親定位了。
3     

子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是，工程上子絕、父絕，沒有一個盒子在標準流里面了，所以頁面就不穩固，沒有任何實戰用途。工程上，“子絕父相”有意義，父親沒有脫標，兒子脫標在父親的范圍里面移動。 

1 
  → 絕對定位
2     
  → 相對定位
3     
  → 沒有定位
4     
  → 絕對定位，以box2為參考定位。
5     
6     
7 

● 絕對定位的兒子，無視參考的那個盒子的padding。 

下圖中，綠色部分是div的padding，藍色部分是div的內容區域。那么此時，div相對定位，p絕對定位。

p將無視父親的padding，在border內側為參考點，進行定位：

3.4 絕對定位的盒子居中

絕對定位之后，所有標準流的規則，都不適用了。所以margin:0 auto;失效。

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

 非常簡單，當做公式記憶下來。就是left:50%; margin-left:負的寬度的一半。

四、固定定位

固定定位，就是相對瀏覽器窗口定位。頁面如何滾動，這個盒子顯示的位置不變。

固定定位脫標！

案例：

    
    
    


    

        

            

                
網頁欄目
                
網頁欄目
                
網頁欄目
                
網頁欄目
                
網頁欄目
                
網頁欄目
                
網頁欄目
                
網頁欄目
                
網頁欄目
                
網頁欄目
            
        
    
    
    

    

        按鈕
    
    
    
    
    
    
    
    
    
    
    
 
     

IE6不兼容。

    
    
    


    返回
頂部
    
    
    
    

五、z-index

● z-index值表示誰壓著誰。數值大的壓蓋住數值小的。

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

● z-index值沒有單位，就是一個正整數。默認的z-index值是0。

● 如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。

● 從父現象：父親慫了，兒子再牛逼也沒用。

    
    
    


    
綠
    
藍

沒有單位：

1 z-index: 988;