CSS簡介及使用

本文轉載自查看原文 2019-09-16 15:31 580 css

一、css簡介

css是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離

二、css四種引入方式

2.1、行內式

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。

<!--第一種引入方式-->
<div style="color: red;background-color: beige">hello yuan </div>

2.2、嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

2.3、鏈接式

將一個.css文件引入到HTML文件中（常用）

<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<link href="test1.css" rel="stylesheet">

2.4、導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：

<style type="text/css">
 
          @import"mystyle.css"; 此處要注意.css文件的路徑
 
</style>

特別注意：導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。

三、css選擇器(selector)

“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素

3.1、基礎選擇器

1）* 通用元素選擇器，匹配任何元素

*{
   color: red;
}

2）標簽選擇器，匹配所有使用某標簽的元素

p { color:green; }   #匹配p標簽

3）id選擇器

#littleP{
    background-color: blue;
}

......
<p id="littleP">pppp</p>

4）class選擇器

.info和E.info: class選擇器，匹配所有class屬性中包含info的元素   
.info { background:#ff0; }    
p.info { background:blue; }

3.2、組合選擇器

E,F         多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔         div,p { color:#f00; }
E F         后代元素選擇器，匹配所有屬於E元素后代的F元素，E和F之間用空格分隔    li a { font-weight:bold;
E > F       子元素選擇器，匹配所有E元素的子元素F                            div > p { color:#f00; }
E + F       毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F                  div + p { color:#f00; }

注意嵌套規則：

塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內可以包含div
塊級元素與塊級元素並列、內聯元素與內聯元素並列。

示例一：

#littleP,div.cuihua{      #匹配id為littleP，或者標簽為div且class為cuihua的標簽
    color: chartreuse;
}

#++++++++++++++++++++++++++++
#匹配
<p id="littleP">pppp</p>
<div class="cuihua">div</div>

示例二：

 .div1>.div2{     #匹配class為div1下class為div2的子元素
    color: red;
 }

#++++++++++++++++++++++++++++++++++++++++++++++++++++
<div>hello div before</div>
<div class="div1">
    <div>
        <a href="">a</a>
        <p>ppp</p>
        <div>div3</div>
    </div>

    <p>p ele</p>
    <div class="div2">div2</div>    #被匹配
</div>
<p>after div1 p</p>
<div>after div1</div>

示例三：

.div1 div>p{      #匹配class為div1下標簽為div且div子標簽為p標簽的
    color: blue;
}

#++++++++++++++++++++++++++++++++++++++++++++++++
<div class="div1">
    <div>
        <a href="">a</a>
        <p>ppp</p>     #被匹配
        <div>div3</div>
    </div>

    <p>p ele</p>
    <div class="div2">div2</div>
</div>

示例四：

 .div1 + div{    #匹配class為div1之后的緊鄰的同級元素div
     background-color: chartreuse;
 }

#++++++++++++++++++++++++++++++++++++
<div>hello div before</div>   #沒有匹配到
<div class="div1">
    <div>
        <a href="">a</a>
        <p>ppp</p>
        <div>div3</div>
    </div>

    <p>p ele</p>
    <div class="div2">div2</div>
</div>
<div>after div1</div>   #匹配到

3.3、屬性選擇器

E[att]         匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
E[att=val]     匹配所有att屬性等於“val”的E元素                    div[class=”error”] { color:#f00; }
E[att~=val]    匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素  td[class~=”name”] { color:#f00; }
E[attr^=val]    匹配屬性值以指定值開頭的每個元素                     div[class^="test"]{background:#ffff00;}
E[attr$=val]    匹配屬性值以指定值結尾的每個元素                     div[class$="test"]{background:#ffff00;}
E[attr*=val]    匹配屬性值中包含指定值的每個元素                     div[class*="test"]{background:#ffff00;}

示例：

 [alex]{         #匹配屬性為alex
     color: red;
 }

 p[alex="dasb"]{  #匹配標簽為p標簽，且屬性值為alex="dasb"
     color: blue;
     font-family: "Times New Roman";
     font-size: 30px;
 }

 [alex*="b"]{    #匹配屬性為alex，且值只要含有b的標簽
     color: teal;
 }

3.4、偽類(Pseudo-classes)

CSS偽類是用來給選擇器添加一些特殊效果。

a:link        #（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。
a:hover       #（鼠標放在鏈接上的狀態）,用於產生視覺效果。
a:visited     #（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。
a:active      #（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。

#偽類選擇器 : 偽類指的是標簽的不同狀態:
a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態

a:link {color: #FF0000}       /* 未訪問的鏈接 */
a:visited {color: #00FF00}    /* 已訪問的鏈接 */
a:hover {color: #FF00FF}      /* 鼠標移動到鏈接上 */
a:active {color: #0000FF}     /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

    a:link{
        color: red;
    }

    a:visited {
        color: blue;
    }
    a:hover {     #鼠標懸浮顯示
        color: green;
    }
    a:active {
        color: yellow;
    }

    .box{
        width: 100px;
    }

        .top,.bottom{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }

        .top:hover{
            background-color: red;
        }


        .box:hover .bottom{
            background-color: red;
        }

       .add:after{
           content: "歡迎加入前端學習";
           color: red;
       }
    </style>
</head>
<body>


    <a href="css_引入方式.html">hello-world</a>

   <div class="box">
         <div class="top"></div>
         <div class="bottom"></div>
   </div>


    <div class="add">hello yuan</div>
</body>
</html>

before after偽類：

:before    p:before       在每個<p>元素之前插入內容
:after     p:after        在每個<p>元素之后插入內容

p:before        在每個 <p> 元素的內容之前插入內容                    p:before{content:"hello";color:red}
p:after         在每個 <p> 元素的內容之前插入內容                    p:after{ content:"hello"；color:red}

四、css優先級和繼承

4.1、css優先級

所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。

#樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高              style=""-------------------1000
2 統計選擇符中的ID屬性個數。        #id    －－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。     .class  －－－－－－－－－－－－－10
4 統計選擇符中的HTML標簽名個數。    p     －－－－－－－－－－－－－-1

#按這些規則將數字符串逐位相加，就得到最終的權重，然后在比較取舍時按照從左到右的順序逐位比較。

優先級示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p{
            color: rebeccapurple;
        }
        .p{
            color: #2459a2;
        }
        p{
            color: yellow;
        }
    </style>
</head>
<body>
<p id="p" class="p" style="color: deeppink">hello yuan</p>   #優先級最高
<!--<p id="p" class="p">hello yuan</p>-->
</body>
</html>

4.2、css繼承

繼承是CSS的一個主要特征，它是依賴於祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

body{color:red;}       <p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0，發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。　此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等

4.3、附加說明

1、文內的樣式優先級為1000，所以始終高於外部定義。這里文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。
2、有!important聲明的規則高於一切。
3、如果!important聲明沖突，則比較優先權。
4、如果優先權一樣，則按照在源碼中出現的順序決定，后來者居上。
5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全局選擇符*定義的規則)。

 #div1 .div3  {
     color: chartreuse!important;   #優先級最高
 }

五、css常用屬性

5.1、顏色屬性

<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>
 
<div style="color:rgb(255,0,0)">ppppp</div>
 
<div style="color:rgba(255,0,0,0.5)">ppppp</div>   #增加了透明度

5.2、字體屬性

font-size: 20px/50%/larger   #字體大小
 
font-family:'Lucida Bright'  #字體格式
 
font-weight: lighter/bold/border/  #字體粗細
 
<h1 style="font-style: oblique">老男孩</h1>

5.3、背景屬性

background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)


#簡寫：
<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

5.4、文本屬性

font-size: 10px;
text-align: center;   #橫向排列
line-height: 200px;   #文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
vertical-align:－4px  #設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效

text-indent: 150px;   #首行縮進
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;  #首字母大寫

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-transform: capitalize;
            word-spacing: 20px;
            letter-spacing: 10px;
            text-indent: 150px;
            height: 100px;
            background-color: aquamarine;
            text-align: center;
            /*line-height: 100px;*/
        }
    </style>
</head>
<body>

<div>介紹文本屬性介紹文本屬性</div>
<div>hello world hello world</div>
</body>
</html>

5.5、邊框屬性

border-style: solid;
border-color: chartreuse;
border-width: 20px;
#簡寫：border: 30px rebeccapurple solid;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            /*border:5px dashed blueviolet;*/   #簡寫
            border-color: blueviolet;
            border-style: solid;
            border-width: 5px;
            border-left-color: blue;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

5.6、列表屬性

ol,ul{
    /*list-style: circle;*/
    /*list-style: square;*/
    /*list-style: lower-latin;*/
    list-style: none;  #去樣式
}

5.7、 display屬性

display屬性有：none，block，inline，inline-block

display:inline-block可做列表布局，其中的類似於圖片間的間隙小bug可以通過如下設置解決

#outer{
border: 3px dashed;
word-spacing: -5px;
}

實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div2,p,a,span{
             width: 100px;
             height: 100px;
        }

         .div2{
             background-color: yellow;
             /*display: inline;*/
             /*display: none;*/   #不顯示
         }

        p{
             background-color: red;
            /*display: inline;*/  #轉換為內聯
         }

        span{
             background-color: palevioletred;
             display: inline-block;
         }
        a{
             background-color: green;
             display: inline-block;
         }
        .outer{
            word-spacing: -8px;   #控制間隙
        }
    </style>
</head>
<body>

<div class="div2">divvvvv</div>
<p>pppppp</p>

<div class="outer">
    <span>spannnnnn</span>
    <a href="#">click</a>
</div>


</body>
</html>

5.8、外邊距內邊距

1）argin：用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的

2）adding：用於控制內容與邊框之間的距離

3）order：圍繞在內邊距和內容外的邊框。

4）ontent：盒子的內容，顯示文本和圖像。

重要: 當指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距

margin:10px 5px 15px 20px; #-----------上 右 下 左
margin:10px 5px 15px; #----------------上 右左 下
margin:10px 5px; #---------------------上下  右左
margin:10px;    #---------------------上右下左

思考一：

邊框在默認情況下會定位於瀏覽器窗口的左上角，但是並沒有緊貼着瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，為了驗證這一點，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

#解決方法：
body{
    margin: 0;
}

思考二：

margin collapse（邊界塌陷或者說邊界重疊）。外邊距的重疊只產生在普通流文檔的上下外邊距之間

1）兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值

2）父子div：如果父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content中的其中一個，然后按此div 進行margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            border: 40px solid rebeccapurple;
            padding: 40px;
            /*margin: 20px;*/
            /*margin-bottom: 40px;*/
            /*margin: 10px 20px 30px 40px;*/
            margin-top: 30px;
            margin-bottom:40px;
        }

        .div2{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            /*border: 20px solid red;*/
            /*padding: 5px;*/
            /*margin-top: 40px;*/
        }
        .outer{
            height: 1000px;
            background-color: aquamarine;
            /*border: 1px red solid;*/
            /*padding: 1px;*/
            overflow: hidden;
        }

        .outer2{
            width: 1000px;
            height: 1500px;
            background-color: firebrick;
        }
        body{
            border: 2px solid darkcyan;
            margin: 0px;
        }
    </style>
</head>
<body>

<div class="outer2">

    <div class="outer">

    <div class="div1">hello div1</div>
    <div class="div2"></div>
        <span>uuu</span><span>ooo</span>
</div>
</div>


</body>
</html>

5.9、float屬性

先來了解一下block元素和inline元素在文檔流中的排列方式：

1）block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性

2）inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

3）常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等

4）常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

相關概念：

文檔流：指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列

脫離文檔流：將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位，只有絕對定位absolute和浮動float才會脫離文檔流

部分無視和完全無視的區別：使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對於使用absolute position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)

浮動的表現：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（注意這里是塊框而不是內聯元素；浮動框只對它后面的元素造成影響）

注意當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。

現象一：

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標准流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列

現象二：

左右結構div盒子重疊現象：一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。

上下結構div盒子重疊現象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;
             padding:0;
         }
        .container{
            border:1px solid red;
            width:300px;
        }
        #box1{
            background-color:green;
            float:left;
            width:100px;
            height:100px;
        }
        #box2{
            background-color:deeppink;
            float:right;
            width:100px;
            height:100px;
        }
         #box3{
             background-color:pink;
             height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

效果：

.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。

解決方法：

1、要么給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。

2、要么清除浮動。

清除浮動：

在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

clear語法：
clear : none | left | right | both
取值：
none :  #默認值。允許兩邊都可以有浮動對象
left :  #不允許左邊有浮動對象
right : #不允許右邊有浮動對象
both :  #不允許有浮動對象
#但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。

方式一：

在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }

        .container{
            border:1px solid red;
            width:300px;
            /*overflow: hidden;*/
        }
        #box1{
            background-color:green;
            width:100px;
            height:100px;
            float: left;
        }
        #box2{
            background-color:deeppink;
            float:right;
            width:100px;
            height:100px;
        }
         #box3{
             background-color:pink;
             height:40px;
         }

        .clearfix:after{   #添加
            content:"";
            display: block;
            clear: both;
        }
</style>
</head>
<body>

        <div class="container clearfix" >   #添加
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

方法二：overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }

        .container{
            border:1px solid red;
            width:300px;
            overflow: hidden;   #添加
        }
        #box1{
            background-color:green;
            width:100px;
            height:100px;
            float: left;
        }
        #box2{
            background-color:deeppink;
            float:right;
            width:100px;
            height:100px;
        }
         #box3{
             background-color:pink;
             height:40px;
         }

        /*.clearfix:after{*/
            /*content:"";*/
            /*display: block;*/
            /*clear: both;*/
        }
</style>
</head>
<body>

        <div class="container" >
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

5.10、position定位

1）static

static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。

2）position: relative

relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

3）position: absolute

定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。

總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。

4）position:fixed

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性定義。注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。

參考文檔：https://www.cnblogs.com/yuanchenqi/articles/5977825.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3動畫簡介以及動畫庫animate.css的使用 CSS簡介 LESS CSS 框架簡介(轉) CSS BEM 命名規范簡介第一節：Webpack簡介、安裝-配置-打包、常用loader的使用(css/style/less/postcss-loader) mini-css-extract-plugin簡介 css3 text-fill-color簡介 CSS 簡介及書寫規則---行內樣式 CSS中behavior屬性語法簡介 HTML&CSS基礎-表格簡介