CSS

1、CSS的引入方式                                                                                                     

 css:cascading style sheet,層疊樣式表。css的做用就是給html頁面標籤添加各類樣式,定義網頁的顯示效果。

html的缺陷:

1,不能適應多種設備

2,要求瀏覽器必須智能化足夠龐大

3,數據和顯示沒有分開

4,功能不夠強大

css優勢:

1,使數據和顯示分開

2,下降網絡流量

3,使整個網站視覺效果一致

4,使開發效率提升了 

行內樣式

1 <div>
2     <p style="color: green">我是一個段落</p>
3 </div>

View Code

內接樣式

<style type="text/css">
    /*寫咱們的css代碼*/
        
    span{
    color: yellow;
    }

</style>

View Code

外接樣式-連接式

<link rel="stylesheet" href="./index.css">

View Code

外接樣式-導入式

<style type="text/css">
        @import url('./index.css');
</style> 

View Code

二 、css選擇器                                                                                                                                        

1,標籤選擇器

標籤選擇器能夠選中全部的標籤元素,好比div,ul,li,p等,無論標籤隱藏的多深,都能選中,選中的是全部的,而不是一個,因此是'共性'.

body{color:red;
      font-size:12px;
  }    
標籤選擇器
p{color:green;
    font-size:20px;
}
span{color:yellow;
}

標籤

2, id選擇器

注意同一個頁面中id不能重複,任何標籤均可以設置id(#選中id)

#box{
        background:green;      
}
#child1{color:red}
#child2{font-size:14px}

id選擇器

3, 類選擇器

類就是class,與id類似,任何的標籤均可以加類,類能夠重複,屬於歸類的概念。同一個標籤中能夠攜帶多個類，用空格分開。

.box{color:green}
.child1{font-size:14px}
.child2{color:red}
.child3{background:yellow}

公共類  共有的屬性
<div class='box'>
        <p class='child1'>aaa</p>
        <p class='child2'>bbb</p>
        <p class='child3'>ccc</p>

類選擇器

注意:標籤選擇中儘量的用class,id大多用在js上.

3、高級 選擇器                                                                                                       

1，後代選擇器

使用空格表示後代選擇器。顧名思義，後代包括兒子，孫子，重孫子

.container p{
     color: red;        
 }
 .container .item p{
     color: yellow;
 }

後代選擇器

2，子代選擇器

使用‘>’表示子代選擇器,好比div>p,表示只選中當前div元素選中的子代p.

.container>p{
    color: yellowgreen;
}

子代選擇器

3, 並集選擇器

多個選擇器之間使用逗號隔開,表示選中頁面中的多個標籤。一些共性的元素,可使用並集選擇器。

 h3,a{
     color: #008000;
     text-decoration: none;
               
}

並集選擇器

4，交集選擇器

使用.表示交集選擇器,第一個標籤必須是標籤選擇器,第二個標籤必須是類選擇器。表示二者選中以後元素的共有特性.

好比有一個<h4 class='active'></h4>這樣的標籤。
h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集選擇器 */
h4.active{
    background: #00BFFF;
}

交集選擇器

 四 、屬性選擇器                                                                                                                  

屬性選擇器：就是根據標籤中的屬性，選中當前的標籤。

/*根據屬性查找*/
            /*[for]{
                color: red;
            }*/
            
            /*找到for屬性的等於username的元素 字體顏色設爲紅色*/
            /*[for='username']{
                color: yellow;
            }*/
            
            /*以....開頭  ^*/ 
            /*[for^='user']{
                color: #008000;
            }*/
            
            /*以....結尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/
            
            /*包含某元素的標籤*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/
            
            /**/
            
            /*指定單詞的屬性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }

屬性選擇器

5、僞類選擇器                                                                                                                   

僞類選擇器通常用在超連接a標籤中，使用a標籤的僞類選擇器，必定要遵循愛恨準則，LoVe,HAte

/*沒有被訪問的a標籤的樣式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*訪問事後的a標籤的樣式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠標懸停時a標籤的樣式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠標摁住的時候a標籤的樣式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }

僞類選擇器

css3的一種選擇器:

/*選中第一個元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*選中最後一個元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*選中當前指定的元素  數值從1開始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示選中全部,這裏面必須是n, 從0開始的  0的時候表示沒有選中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶數*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇數*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔幾換色  隔行換色
             隔4換色 就是5n+1,隔3換色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

nth-child()

6、僞元素選擇器                                                                                                                                                                                                                    

/*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
        p:before{
            content:'alex';
        }
        
        
/*在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

僞元素選擇器 

7、css的繼承性和層疊性                                                                                                      

css有兩大特性：繼承性和層疊性。

　　-- 繼承：給父級設置一些屬性，子級繼承了父級的該屬性。

　　　　記住：有一些屬性能夠繼承下來 ： color 、 font-*、 text-*、line-* 。主要是文本級的標籤元素。

　　　　可是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。

　　-- 層疊性： 權重的標籤覆蓋掉了權重小的標籤。 誰的權重大，瀏覽器就會顯示誰的屬性 　　　

　　　　（1）行內> id > class > 標籤 **** 　　　　　　 1000 > 100 > 10 > 1 　　　　

　　　　（2）數數 數 id class 標籤 　　　　

　　　　（3）先選中標籤，權重同樣，之後設置爲主

　　　　（3）繼承來的屬性 它的權重爲0 ，與選中的標籤沒有可比性
　　　　（4）若是都是繼承來的屬性，保證就近原則
　　　　（5）都是繼承來的屬性，選擇的標籤同樣近，再去數權重

 8、層疊性權重相同處理                                                                                                      

!important 的使用。

！important:設置權重爲無限大 
!important 不影響繼承來的權重，隻影響選中的元素。不要隨便使用!important,由於使用它會影響頁面的佈局

 9、盒模型                                                                                                                           

在CSS中，"box model"這一術語是用來設計和佈局時使用，而後在網頁中基本上都會顯示一些方方正正的盒子。咱們稱爲這種盒子叫盒模型。

盒模型有兩種：標準模型和IE模型。咱們在這裏重點講標準模型。 

盒模型示意圖：

 

盒模型的屬性：

width：內容的寬度

height: 內容的高度

padding：內邊距，邊框到內容的距離

border: 邊框，就是指的盒子的寬度

margin：外邊距，盒子邊框到附近最近盒子的距離

盒模型的計算： 

盒子的真實寬度=width+2*padding+2*border

盒子的真實寬度=height+2*padding+2*border

10、padding--內邊距                                                                                                                                

padding：就是內邊距的意思，它是邊框到內容之間的距離

另外padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域 

padding的設置：

padding有四個方向，分別描述4個方向的padding。

描述的方法有兩種：

一、寫小屬性,分別設置不一樣方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

二、寫綜合屬性，用空格隔開

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

綜合屬性

一些標籤默認有padding：

好比ul標籤，有默認的padding-left值。

那麼咱們通常在作站的時候可使用通配符選擇器，清除頁面標籤中默認的padding和margin。以便於咱們更好的去調整元素的位置。

*{
  padding:0;
  margin:0;    
}

But，這種方法效率不高。因此咱們要使用並集選擇器來選中頁面中應有的標籤（有人已經寫好了這些清除默認的樣式表，reset.css）

https://meyerweb.com/eric/tools/css/reset/

11、border--邊框                                                                                                                                     

border:邊框的意思，描述盒子的邊框；邊框有三個要素： 粗細 線性樣式 顏色。

按照3要素來寫border：

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

View Code

按照方向劃分：

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

View Code

上面12條語句，至關於 bordr: 10px solid red;

使用border來製做小三角：

/*小三角 箭頭指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

View Code

12、margin--外邊距                                                                                                                            

margin：外邊距的意思。表示邊框到最近盒子的距離。 

/*表示四個方向的外邊距離爲20px*/
margin: 20px;
/*表示盒子向下移動了30px*/
margin-top: 30px;
/*表示盒子向右移動了50px*/
margin-left: 50px;

margin-bottom: 100px;

View Code

十3、標準文檔流                                                                                                                                 

標準文檔流：宏觀的將，咱們的web頁面和ps等設計軟件有本質的區別，web 網頁的製做，是個「流」，從上而下 ，像 「織毛衣」。而設計軟件 ，想往哪裏畫東西，就去哪裏畫。

標準文檔流下 有哪些微觀現象？

1.空白摺疊現象

多個空格會被合併成一個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張圖片之間有間隙，若是在一行內寫img標籤，就解決了這個問題，可是咱們不會這樣去寫咱們的html結構。這種現象稱爲空白摺疊現象。

2.高矮不齊，底邊對齊

文字還有圖片大小不一，都會讓咱們頁面的元素出現高矮不齊的現象，可是在瀏覽器查看咱們的頁面總會發現底邊對齊

3.自動換行，一行寫不滿，換行寫

若是在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示咱們的文字。

十4、塊級元素和行內元素                                                        

學習的初期，咱們就要知道，標準文檔流等級森嚴。標籤分爲兩種等級：
　　行內元素
　　塊級元素
行內元素和塊級元素的區別：（很是重要）

行內元素：

　　與其餘行內元素並排；不能設置寬、高。默認的寬度，就是文字的寬度。
塊級元素：

　　霸佔一行，不能與其餘任何元素並列；能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%。 

塊級元素和行內元素的分類：

在之前的HTML知識中，咱們已經將標籤分過類，當時分爲了：文本級、容器級。

從HTML的角度來說，標籤分爲：
文本級標籤：p、span、a、b、i、u、em。
容器級標籤：div、h系列、li、dt、dd。
　　PS：爲甚麼說p是文本級標籤呢？由於p裏面只能放文字&圖片&表單元素，p裏面不能放h和ul，p裏面也不能放p。

如今，從CSS的角度講，CSS的分類和上面的很像，就p不同：

　　行內元素：除了p以外，全部的文本級標籤，都是行內元素。p是個文本級，可是是個塊級元素。

　　塊級元素：全部的容器級標籤都是塊級元素，還有p標籤。 

塊級元素和行內元素的相互轉換：

咱們能夠經過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

 

 

塊級元素能夠轉換爲行內元素：

一旦，給一個塊級元素（好比div）設置：display: inline;

那麼，這個標籤將當即變爲行內元素，此時它和一個span無異。inline就是「行內」。也就是說：

此時這個div不能設置寬度、高度；這個div能夠和別人並排了

行內元素轉換爲塊級元素：

一樣的道理，一旦給一個行內元素（好比span）設置：display: block

那麼，這個標籤將當即變爲塊級元素，此時它和一個div無異。block」是「塊」的意思。也就是說：

此時這個span可以設置寬度、高度；此時這個span必須霸佔一行了，別人沒法和他並排；若是不設置寬度，將撐滿父親

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，就須要脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

（1）浮動

（2）絕對定位

（3）固定定位

十5、浮動                                                                                                                                                

float：表示浮動的意思。它有四個值。

　　none: 表示不浮動，默認

　　left: 表示左浮動

　　right：表示右浮動

浮動的四大特性：

　　1.浮動的元素脫標

　　2.浮動的元素互相貼靠

　　3.浮動的元素由"字圍"效果

　　4.收縮的效果

  清除浮動:       

　　1，給父盒子設置高度:

　　　　　-- 它的使用不靈活，通常會經常使用頁面中固定高度的，而且子元素並排顯示的佈局。好比：導航欄　　　

　　2，clear:both

　　　　-- clear：意思就是清除的意思。有三個值：

　　　　　　left：當前元素左邊不容許有浮動元素

　　　　　　right：當前元素右邊不容許有浮動元素

　　　　　　both：當前元素左右兩邊不容許有浮動元素

　　　　　　給浮動元素的後面加一個空的div，而且該元素不浮動，而後設置clear：both。

html結構：
<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ，而後設置clear:both  清除別人對個人浮動影響-->
            <!-- 內牆法 -->
            <!-- 平白無故加了div元素  結構冗餘 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>        

css樣式:
*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

clear:both

　　3，僞元素清除法(經常使用)

　　　　-- 給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置

.clearfix:after{
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden   
  }     

僞元素清除法

　　4，overflow:hidden(經常使用)

　　　　-- overflow屬性規定當內容溢出元素框時發生的事情。

overflow:hidden實際上是一個BFC區域: http://www.javashuo.com/article/p-ezyacvwn-v.html。

十6、margin的用法                                                                                                                                     

margin塌陷問題： 

html結構：
<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

css樣式：
*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

例子

 當給兩個標準流下的兄弟盒子設置垂直方向上的margin時，那麼以較大的爲準，這種現象叫塌陷。當咱們給兩個標準流下的兄弟盒子設置浮動後，就不會出現margin塌陷的問題。

margin：0 auto：

　　-- 表示上下外邊距離爲0，左右爲auto的距離，此時就發現盒子居中了。另外若是給盒子設置浮動，那麼margin:0 auto失效。 

使用margin：0 auto;注意：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確widthr;

2.只有標準流下的盒子 才能使用margin:0 auto; 當一個盒子浮動了、固定定位、絕對定位，margin:0 auto 就不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

 十7、文本屬性和字體屬性                                                                                                                     

文本對齊：

　　text-align 屬性規定元素中的文本的水平對齊方式。

　　屬性值：none | center | left | right | justify

文本顏色：

　　color屬性

文本首行縮進：

　　text-indent 屬性規定元素首行縮進的距離，單位建議使用em

文本修飾：

　　text-decoration屬性規定文本修飾的樣式

　　屬性值：none(默認) | underline(下劃線) | overline(定義文本上的一條線)  | line-through (定義穿過文本下的一條線) | inherit(繼承父元素的text-decoration屬性的值。)

 字體屬性      

字體大小：

　　font-size表示設置字體大小，若是設置成inherit表示繼承父元素的字體大小值。

字體粗細:

　　font-weight表示設置字體的粗細

　　屬性值：none(默認值，標準粗細) | bold(粗體) | border(更粗）| lighter(更細) | 100~900（設置具體粗細，400等同於normal，而700等同於bold）| inherit（繼承父元素字體的粗細值）

字體系列:

font-family

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。若是都不支持則顯示宋體。 

行高 line-height:

針對單行文本垂直居中:行高的高度等於盒子的高度，可使當行文本垂直居中，注意只適用單行文本。

針對多行文本垂直居中:

行高的高度不能小於字體的大小，否則上下字之間會緊挨一塊兒。

第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，若是行高是line-height:30px; 那麼就知道行高*5=150px

第二步，讓(盒子的高度-150px)/2=75;那麼設置盒子的padding-top:75px;同時保證盒子的高度爲300px,那麼高度改成225px。 

font-family介紹:

使用font-family注意幾點：

1.網頁中不是全部字體都能用，由於這個字體要看用戶的電腦裏面裝沒裝，好比你設置： font-family: "華文彩雲"; 若是用戶電腦裏面沒有這個字體，那麼就會變成宋體
頁面中，中文咱們只使用： 微軟雅黑、宋體、黑體。若是頁面中須要其餘的字體，那麼須要切圖。 英語：Arial 、 Times New Roman

2.爲了防止用戶電腦裏面，沒有微軟雅黑這個字體。就要用英語的逗號，隔開備選字體，就是說若是用戶電腦裏面，沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體能夠有無數個，用逗號隔開。

3.咱們要將英語字體，放在最前面，這樣全部的中文，就不能匹配英語字體；就自動的變爲後面的中文字體：

font-family: "Times New Roman","微軟雅黑","宋體"; 

4.全部的中文字體，都有英語別名，咱們也要知道： 微軟雅黑的英語別名：font-family: "Microsoft YaHei"；宋體的英語別名： font-family: "SimSun";
font屬性可以將font-size、line-height、font-family合三爲一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高能夠用百分比，表示字號的百分之多少。通常來講，都是大於100%的，由於行高必定要大於字號。 
font:12px/200% 「宋體」 等價於 font:12px/24px 「宋體」; 反過來，好比： font:16px/48px 「宋體」;等價於 font:16px/300% 「宋體」 

十8、超連接導航欄案例                                                                                                                           

html結構：
<div class="nav">
        <ul>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
        </ul>
    </div>

css代碼以下：
*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            /*height: 40px;*/
            overflow: hidden;
            margin: 100px auto ;
            background-color: purple;
            /*設置圓角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .nav ul li a{
            display: block;
            width: 160px;
            height: 40px;
            color: white;
            font-size: 20px;
            text-decoration: none;
            font-family: 'Hanzipen SC';
        }
        /*a標籤除外，不繼承父元素的color*/


        .nav ul li a:hover{
            background-color: red;
            font-size: 22px;
        }

V案例

十9、background                                                                                                                                      

顏色表示法有三種：單詞、rgb表示法、十六進制表示法

rgb:紅色 綠色 藍色 三原色：
光學顯示器，每一個像素都是由三原色的發光原件組成的，靠明亮度不一樣調成不一樣的顏色的。
用逗號隔開，r、g、b的值，每一個值的取值範圍0~255，一共256個值。若是此項的值，是255，那麼就說明是純色。

16進製表示法：全部用#開頭的值，都是16進制的；ff就是10進制的255 ，00 就是10進制的0。

background-color屬性表示背景顏色；

background-img:表示設置該元素的背景圖片；

background-repeat:表示設置該元素平鋪的方式:  屬性值

background-position: 屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由 background-image 定義）的位置

　　屬性值：

雪碧圖技術（精靈圖技術）

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分

CSS 雪碧圖應用原理：
有一張大的合併圖, 截取 大圖一部分顯示，而這部分就是一個小圖標。

使用雪碧圖的好處：

一、利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由； 
二、CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。 
三、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。 
四、更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便

不足：

1）CSS雪碧的最大問題是內存使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調用的圖片不能被打印

咱們可使用background綜合屬性製做通天banner，什麼是通天banner呢，就是通常咱們電腦的屏幕都是1439.可是設計師給咱們的banner圖都會比這個大，

那麼咱們能夠此屬性來製做通天banner。

background:  red  url('./images/banner.jpg')  no-repeat   center top;

background-attach: 設置fixed以後，該屬性固定背景圖片不隨瀏覽器的滾動而滾動

 二10、定位                                                                                                                                

定位有三種：

1.相對定位   2.絕對定位   3.固定定位

相對定位:相對於本身原來的位置定位。

現象和使用：

1.若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。

2.設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right

特性：

1.不脫標；2.形影分離；3.老家留坑（佔着茅房不拉屎，噁心人）

因此說相對定位 在頁面中沒有什麼太大的做用。影響咱們頁面的佈局。咱們不要使用相對定位來作壓蓋效果

用途：

1.微調元素位置；2.作絕對定位的參考（父相子絕）。

參考點：本身原來的位置作參考點。

絕對定位： 

特性： 

1.脫標 ；2.作遮蓋效果，提成了層級。設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高。 

參考點： 

1、單獨一個絕對定位的盒子 

1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。 

2、以父輩盒子做爲參考點 

1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺； 

2.若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點； 

3.不只僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素爲參考點； 

注意了：父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。 

還要注意，絕對定位的盒子無視父輩的padding。

固定定位：固定當前的元素不會隨着頁面滾動而滾動

特性: 

1.脫標； 2.遮蓋，提高層級； 3.固定不變。

參考點：

設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點
若是用bottom描述，那麼是以瀏覽器的左下角爲參考點

做用： 1.返回頂部欄 ；2.固定導航欄 ；3.小廣告。 

二11、z-index                                                                                                                         

z-index的四大特性：

　　1，z-index 值表示誰壓着誰，數值大的壓蓋住數值小的,；

　　2，只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index

　　3，z-index值沒有單位，就是一個正整數，默認的z-index值爲0，若是都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，

 

永遠壓住沒有定位的元素。

 

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