前端之CSS

position （定位）

CSS介紹javascript

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。css

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。html

CSS的實例

每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束。java

CSS的註釋python

/*這是單行註釋*/

/*這是多行註釋*/golang

CSS的引入方式

1.行內式

行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。瀏覽器

<p style="color: red">Hello world.</p>

2.嵌入式

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

<head>

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

3.外部樣式

外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式。ide

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

CSS選擇器

基本選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*這是單行註釋*/
        /*這是*/
        /*多行*/
        /*註釋*/

        /*標籤選擇器*/ p{ color:red;
        }

        /*id選擇器*/ #s1 { font-size: 24px;
        }

        /*類選擇器*/ .c1{ color: blue;
        }
    </style>
</head>
<body>
<span id="s1">回首掏，鬼刀一開，看不見，走位走位，手裏幹。</span>
<div class="c1">回首掏，鬼刀一開，看不見，走位走位，手裏幹。 <p>回首掏，鬼刀一開，看不見，走位走位，手裏幹。 <span>回首掏，鬼刀一開，看不見，走位走位，手裏幹。</span>
    </p>
</div>
<div class="c1">回首掏，鬼刀一開，看不見，走位走位，手裏幹。</div>
</body>
</html>

基本選擇器

標籤選擇器

p{color:red; }

ID選擇器

#s1 {font-size: 24px;}

類選擇器

.c1{color: blue;}

通用選擇器

* { color: white; }

組合選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*後代選擇器，div標籤裏的全部span標籤*/ div span{ color: red }

        /*兒子選擇器,div標籤下面的第一層span標籤*/ div>span{ color: blue;
        }

        /*弟弟選擇器（對下不對上）,div下面的同級的全部span*/ div~span{ color: blueviolet;
        }

        /*毗鄰選擇器（對下不對上），div下面的第一個span*/ div+span{ color: yellow;
        }
    </style>
</head>
<body>
<span>我是div上面的span</span>
<div>
    <span>我是div裏面的第一個span</span>
    <p>我是div裏面的第一個p <span>我是div裏面的第一個p裏面的span</span>
    </p>
    <span>我是div裏面的第二個span</span>
</div>
<span>我是div下面的第一個span</span>
<span>我是div下面的第二個span</span>
</body>
</html>

組合選擇器

後代選擇器(空格) div標籤裏的全部span標籤

div span{ color: red }

兒子選擇器(>) div標籤下面的第一層span標籤

 div>span{ color: blue; }

弟弟選擇器(~) (對下不對上）,div下面的同級的全部span

 div~span{ color: blueviolet; }

毗鄰選擇器(+) （對下不對上），div下面的第一個span

 div+span{ color: yellow; }

屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*找尋全部含有xxx屬性的標籤*/ [xxx]{ color: yellow;
        }
        /*找尋含有xxx='2'屬性的標籤*/ [xxx="2"]{ color: blueviolet;
        }
        /*找尋p標籤內含有xxx='2'屬性的標籤*/ p[xxx="2"]{ color: red;
        }
    </style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有屬性名</p>
<p xxx="1">我有屬性名和屬性值而且值爲1</p>
<p xxx="2">我有屬性名和屬性值而且值爲2</p>
</body>
</html>

屬性選擇器

/*找尋全部含有xxx屬性的標籤*/
[xxx]{
    color: yellow;
}
/*找尋含有xxx='2'屬性的標籤*/
[xxx="2"]{
    color: blueviolet;
}
/*找尋p標籤內含有xxx='2'屬性的標籤*/
p[xxx="2"]{
    color: red;
}

分組與嵌套

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

        /*分組*/ div,p,span{ color:red;
        }

        /*嵌套:不一樣的選擇器能夠共用一個樣式 後代選擇器與標籤組合使用*/ div+p,span{ color: blue;
        }
    </style>

</head>
<body>

<div>div</div>
<p>p</p>
<span>span</span>

</body>
</html>

分組與嵌套

分組

當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。佈局

例如：

div, p {
  color: red;
}

上面的代碼爲div標籤和p標籤統一設置字體爲紅色。

一般，咱們會分兩行來寫，更清晰:

div,
p {
  color: red;
}

嵌套

多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。

.c1 p {
  color: red;
}

僞類選擇器

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

        /*未訪問的連接*/ a:link{ color: blue;
        }
        /*鼠標移動到連接上*/ a:hover{ color: red;
        }
        /*選定的連接*/ a:active{ color: blueviolet;
        }
        /*已訪問的連接*/ a:visited{ color: yellow;
        }
        /*input輸入框獲取焦點時樣式*/ input:focus { outline: none; background-color: #eee;
        }
    </style>
</head>
<body>

<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">校花網</a>
<a href="http://www.sogo.com">搜狗網</a>

</body>
</html>

僞類選擇器

 /*未訪問的連接*/ a:link{ color: blue; } /*鼠標移動到連接上*/ a:hover{ color: red; } /*選定的連接*/ a:active{ color: blueviolet; } /*已訪問的連接*/ a:visited{ color: yellow; } /*input輸入框獲取焦點時樣式*/ input:focus { outline: none; background-color: #eee; }

僞元素選擇器

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

        /*p標籤下的首字母大寫*/ p:first-letter{ font-size: 48px; color: blueviolet;
        }

        /*在p標籤以前插入"*"*/ p:before{ content: "*"; color: red;
        }

        /*在p標籤以後插入"？"*/ p:after{ content: "?"; color: blue; font-size: 48px;
        }

    </style>
</head>
<body>

<p>繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的</p>
<p>繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的</p>
<p>繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的</p>
<p>繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的</p>
<p>繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的</p>


</body>
</html>

僞元素選擇器

 /*p標籤下的首字母大寫*/ p:first-letter{ font-size: 48px; color: blueviolet; } /*在p標籤以前插入"*"*/ p:before{ content: "*"; color: red; } /*在p標籤以後插入"？"*/ p:after{ content: "?"; color: blue; font-size: 48px; }

選擇器的優先級

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

        /*id選擇器*/ #p1 { color: green; font-size: 48px;
        }

        /*類選擇器*/ .c1{ color: red; font-size: 48px;
        }

        /*標籤選擇器*/ p { color: blueviolet; font-size: 48px;
        }
    </style>
    <link rel="stylesheet" href="mycss.css" >
</head>
<body>

<!--行內選擇器-->
<p id="p1" class="c1" style="color: blue ; font-size: 24px">回首掏，鬼刀一開，看不見，走位走位，手裏幹。</p>
</body>
</html>

選擇器的優先級

選擇器優先級
相同選擇器不一樣的引入方式就進原則誰越靠近標籤誰輸了算
不一樣選擇器相同的引入方式行內樣式 > id選擇器> 類選擇器 > 標籤選擇器

咱們上面學了不少的選擇器，也就是說在一個HTML頁面中有不少種方式找到一個元素而且爲其設置樣式，那瀏覽器根據什麼來決定應該應用哪一個樣式呢？

實際上是按照不一樣選擇器的權重來決定的，具體的選擇器權重計算方式以下圖：

文字字體

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

        /*塊兒級標籤的長寬*/ div { width: 200px; height: 200px;
        }
        /*標籤中字體的樣式*/ p{ font-family: "微軟雅黑","Arial";
        }
        /*標籤中字體的大小*/ p{ font-size: 24px;
        }
        /*標籤中字體的粗細*/ p{ font-weight: bold;
        }
        /*文本顏色的修改*/ p{ color: rgba(0,0,255,0.8);
            /*color: blue;*/
            /*color: rgb(0,0,255);*/
            /*color: #FF6700;*/
        }


    </style>
</head>
<body>

<div>回首掏，鬼刀一開，看不見</div>
<p>走位走位，手裏幹。</p>


</body>
</html>

文字字體

font-family

能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

簡單實例：

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

字體大小（font-size）

p {
  font-size: 14px;
}

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

字重（粗細）

 p{ font-weight: bold; }

font-weight

用來設置字體的字重（粗細）。

值	描述
normal	默認值，標準粗細
bold	粗體
bolder	更粗
lighter	更細
100~900	設置具體粗細，400等同於normal，而700等同於bold
inherit	繼承父元素字體的粗細值

文本顏色

顏色屬性被用來設置文字的顏色。

顏色是經過CSS最常常的指定：

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red

還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。

 p{ color: rgba(0,0,255,0.8); /*color: blue;*/ /*color: rgb(0,0,255);*/ /*color: #FF6700;*/ }

文字對齊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*使標籤內的內容多出刪除線*/ p{ text-decoration: line-through;
        }
        /*首行縮進*/ p{ text-indent: 48px;
        }
        /*去掉網址下方的下劃線*/ a{ text-decoration: none;
        }
    </style>
</head>
<body>

<p>回首掏，鬼刀一開，看不見，走位走位，手裏幹。</p>
<a href="http://www.xiaohuar.com">校花網</a>

</body>
</html>

文本屬性

text-align

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

值	描述
left	左邊對齊默認值
right	右對齊
center	居中對齊
justify	兩端對齊

文字裝飾

text-decoration

屬性用來給文字添加特殊效果。

值	描述
none	默認。定義標準的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。

經常使用的爲去掉a標籤默認的自劃線：

a {
  text-decoration: none;
}

首行縮進（text-indent）

將段落的第一行縮進 32像素：

p { text-indent: 32px; }

背景屬性（background）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div標籤的長寬*/ div{ width: 400px; height: 400px;
            } div{ background-position: center;
        }
        /*div背景顏色*/ div{ background-color: blue;
        }
        /*div的背景圖片*/ div{ background-image: url("1.png");
        }
        /*div中內容的顏色*/ div{ color: blueviolet;
        }
        /*簡寫版本*/
        /*div{*/
        /* background: no-repeat center url("") blue;*/
        /*}*/


    </style>
</head>
<body>

<div>回首掏，鬼刀一開，看不見，走位走位，手裏幹</div>


</body>
</html>

背景屬性

/*背景顏色*/ background-color: red; /*背景圖片*/ background-image: url('1.jpg'); /* 背景重複 repeat(默認):背景圖片平鋪排滿整個網頁 repeat-x：背景圖片只在水平方向上平鋪 repeat-y：背景圖片只在垂直方向上平鋪 no-repeat：背景圖片不平鋪 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; /*background-position: 200px 200px;*/

支持簡寫：

background:#336699 url('1.png') no-repeat left top;

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

    <style> .c1 { height: 400px; background-color: tomato;
        }
        /*box類的背景圖是固定不動的*/ .box { height: 400px; background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg"); background-attachment: fixed;
        } .c2 { height: 400px; background-color: red;
        } .c3 { height: 400px; background-color: fuchsia;
        }


    </style>



</head>
<body>

<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>

</body>
</html>

背景圖片示例

邊框（border）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div{ border-width: 4px; /*邊框的高度*/ border-style: dashed ;/*邊框的類型*/ border-color:deeppink; /*邊框的顏色*/
        }
        /*簡寫版本*/
        /*div{*/
        /* border: 3px dashed red;*/
        /*}*/
    </style>
</head>
<body>

<div>回首掏，鬼刀一開，看不見，走位走位，手裏幹。</div>

</body>
</html>

邊框

邊框樣式

值	描述
none	無邊框。
dotted	點狀虛線邊框。
dashed	矩形虛線邊框。
solid	實線邊框。

除了能夠統一設置邊框外還能夠單獨爲某一個邊框設置樣式，以下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

邊框屬性

border-width
border-style
border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

一般使用簡寫方式：

#i1 {
  border: 2px solid red;
}

畫圓（border-radius）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div { width: 400px; height: 400px; background-color: red;/*圓內的顏色*/ border: 3px solid black;/*邊框的屬性*/ border-radius: 50%;
        }

    </style>
</head>
<body>


<div>回首掏，鬼刀一開，看不見看不見，走位走位，手裏幹</div>


</body>
</html>

畫圓

display 屬性

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

        <style>
            /*元素存在，但不會顯示*/
        /*div {*/
            /*display: none;*/
        /*}*/
        /*inline將塊兒級標籤變成行內標籤*/
        /*div {*/
            /*display: inline;*/
        /*}*/
        /*span {*/
        /* display: block;*/
        /*}*/
        /*將選擇的標籤既具備行內標籤特色又有塊兒級標籤的特色*/ span { display: inline-block; height: 100px; width: 100px; background-color: blue; border: 3px solid black;
        }

    </style>


</head>
<body>

<div>回首掏</div>
<div>鬼刀一開</div>
<span>走位走位</span>
<span>看不見，手裏幹</span>

</body>
</html>

View Code

用於控制HTML元素的顯示效果。

值	意義
display:"none"	HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用。
display:"block"	默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。
display:"inline"	按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響。
display:"inline-block"	使元素同時具備行內元素和塊級元素的特色。

display:"none"與visibility:hidden的區別：

visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

盒子模型

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像。

看圖吧：

margin（外邊距）

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推薦使用簡寫：

.margin-test {
  margin: 5px 10px 15px 20px;
}

順序：上右下左

常見居中：

.mycenter {
  margin: 0 auto;
}

padding（內填充）

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推薦使用簡寫：

.padding-test {
  padding: 5px 10px 15px 20px;
}

順序：上右下左

補充padding的經常使用簡寫方式：

提供一個，用於四邊；
提供兩個，第一個用於上－下，第二個用於左－右；
若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；
提供四個參數值，將按上－右－下－左的順序做用於四邊；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> body { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;
        } .c1 { width: 100px; height: 100px; border: 2px solid black; margin: 10px 20px;
        } .c2 { width: 40px; height: 20px; border: 2px solid red; padding-top: 10px;

        } .c3 { width: 20px; height: 20px; border: 3px solid green; margin: 10px auto;
        } .c4 { width: 10px; height: 20px; border: 3px solid blue;
        }
    </style>

</head>
<body>
<div class="c1">c1 <div class="c2">c2</div>
</div>
<div class="c3">c3</div>
<div class="c4">c4</div>
</body>
</html>

盒子模型

浮動（float)

在 CSS 中，任何元素均可以浮動。

浮動元素會生成一個塊級框，而不論它自己是何種元素。

關於浮動的兩個特色：

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

三種取值

left：向左浮動

right：向右浮動

none：默認值，不浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> body { margin: 0;
        }
        /*#d1 {*/
        /* border: 3px solid black;*/
        /*}*/ .c1 { width: 50px; height: 50px; background-color: red; float: left;
        } .c2 { width: 50px; height: 50px; background-color: blue; float: right;
        }
    </style>
</head>
<body>


<dvi id="d1">d1 <div class="c1"> c1</div>
    <div class="c2">c2</div>
</dvi>
</body>
</html>

浮動

clear (不容許浮動）

clear屬性規定元素的哪一側不容許其餘浮動元素。

值	描述
left	在左側不容許浮動元素。
right	在右側不容許浮動元素。
both	在左右兩側均不容許浮動元素。
none	默認值。容許浮動元素出如今兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起做用，而不會影響其餘元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> body { margin: 0;
        } .c1 { height: 1000px; width: 20%; float: left; background-color: red;
        } .c2 { height: 1000px; width: 80%; background-color: green; float: right;
        }
    </style>
</head>
<body>


<div class="c1">c1</div>
<div class="c2">c2</div>

</body>
</html>

浮動頁面佈局

清除浮動的影響

清除浮動的反作用（父標籤塌陷問題）

主要有三種方式：

固定高度
僞元素清除法
overflow:hidden

僞元素清除法（使用較多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> body { margin: 0;
       } .c1 { border: 3px solid black;
        } .c2 { width: 80px; height: 80px; background-color: red; float: left;
        } .c3 { width: 80px; height: 80px; background-color: green; float: right;
        }
        /*.c4 {*/
        /* clear: left;*/
        /*}*/ .clearfix:after { content: ''; clear: both; display: block;
        } .c4 { width: 80px; height: 80px; background-color: tomato;
        }
    </style>
</head>
<body>

<div class="c1 clearfix">div1 <span class="c4">span4</span>
    <div class="c2">div2</div>
    <div class="c3">div3</div>
</div>
</body>
</html>

浮動帶來的影響

overflow（溢出屬性）

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

overflow（水平和垂直均設置）
overflow-x（設置水平方向）
overflow-y（設置垂直方向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div { height: 50px; width: 50px; border: 3px solid red; overflow: auto;
        }
    </style>
</head>
<body>
<div> asfdghjk,mnsdfghfasdfhgasggdbjgfgfgjhfjnmbhjvhsgdfjdfsjfjksdsjgsadjfkjsa </div>
</body>
</html>

溢出

圓形頭像示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> body { background-color: darkgray;
        } .c1 { width: 80px; height: 80px; border: 5px solid white; border-radius: 50%; overflow: hidden;
        } img { width: 100%;
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="1.png" alt="">
</div>
</body>
</html>

圓形頭像

定位（position）

static

static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。

relative（相對定位）

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> body { margin: 0;
        } .c1 { width: 80px; height: 80px; background-color: red; top: 100px; left: 100px; position: relative;
        } .c2 { width: 80px; height: 80px; background-color: blue;
        }
    </style>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">c2</div>
</body>
</html>

相對定位

absolute（絕對定位）

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .c1 { width: 100px; height: 80px; background-color: red; position: relative;
        } .c2 { height: 200px; width: 100px; background-color: blue; position: absolute; top: 80px; left: 100px;
        } .c3 { height: 50px; width: 50px; background-color: yellow;
        }
    </style>
</head>
<body>

<div class="c1">購物車 <div class="c2">空空如也～窮逼一個</div>
    <div class="c3">c3</div>
</div>
</body>
</html>

絕對定位

fixed（固定）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .c1 { border: 3px solid black; width: 80px; height: 80px; position: fixed; right: 20px; bottom: 20px;
        } .c2 { height: 20000px;
        } .c3 { width: 80px; height: 80px; background-color: red;
        } .c4 { width: 80px; height: 80px; background-color: yellow;
        }
    </style>
</head>
<body>

<div class="c3">c3</div>
<div class="c1">c1</div>
<div class="c4">c4</div>
<div class="c2">c2</div>

</body>
</html>

固定定位

脫離文檔流：

　　絕對定位

　　固定定位

不脫離文檔流：

　　相對定位

z-index

#i2 {
  z-index: 999;
}

設置對象的層疊順序。

z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .c2 { background-color: rgba(128,128,128,0.4); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999;
        } .c3 { width: 200px; height: 100px; background-color: white; position: fixed; top: 50%; left: 50%; z-index: 1000; margin-top: -25px; margin-left: -199px;
        }
    </style>
</head>
<body>


<div class="c1">我是c1</div>
<div class="c2">我是c2</div>
<div class="c3">我是c3</div>
</body>
</html>

模態框

opacity（透明度）

用來定義透明效果。取值範圍是0~1，0是徹底透明，1是徹底不透明。

綜合示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>西伯利亞雪橇犬</title><!-- 網頁標題-->
<!-- <link rel="stylesheet" href="blog.css">&lt;!&ndash; 引入css文件&ndash;&gt;-->
    <style>
        /*西伯利亞雪橇犬的css樣式表*/

/*通用樣式*/

/*整個網頁的外邊框爲0，背景顏色爲#fofofo*/ body { margin: 0; background-color: #f0f0f0;
}

/*取出a標籤的下劃線*/ a { text-decoration: none;
}

/*取出列表的小圓點，內填充左側爲0*/ ul { list-style-type: none; padding-left: 0;
} .clearfix:after { content: ''; clear: both; display: block;
}

/*二哈左側的樣式*/ .blog-left { float: left;/*左側樣式向左浮動*/ position: fixed;/*固定定位*/ left: 0;/*左側距離爲0*/ width: 20%;/*寬佔全網頁的20%*/ height: 70%;/*高佔全網頁的70%*/ background-color: #4d4c4c;/*背景顏色爲#4d4c4c*/
} .blog-avatar { width: 150px;/*寬佔150*/ height: 150px;/*高佔150*/ border: 5px solid white;/*邊框5px，實線，白色*/ border-radius: 50%;/*圓形爲50%*/ margin: 20px auto;/*上下20px，左右居中*/ overflow: hidden;/*溢出的不可看見*/
} .blog-avatar img { width: 100%;/*圖片的大小爲100%*/
} .blog-title,.blog-info { color: darkgray;/*顏色爲darkgray*/ text-align: center;/*文字居中對齊*/
} .blog-link a,.blog-tag a { color: darkgray;/*顏色爲darkgray*/
} .blog-link a:hover,.blog-tag a:hover { color: white;/*懸浮狀態顏色爲白色*/
} .blog-link ul,.blog-tag ul { text-align: center;/*列表中的文字居中*/ margin-top: 60px;/*外邊距離上面60px*/
}


/*二哈右側的樣式*/ .blog-right { float: right;/*右側懸浮*/ width: 80%;/*寬爲頁面的80%*/
} .article-list { background-color: white;/*背景顏色爲白色*/ margin: 20px 40px 20px 10px;/*外邊距上20px，右40px，下20px，左10px*/ box-shadow: 3px 3px 3px rgba(0,0,0,0.4);/*陰影框*/
} .article-title { border-left: 5px solid red;/*邊框寬度5px，實線，紅色*/
} .title { font-size: 36px;/*標題文字36px*/ margin-left: 10px;/*左側外邊距10px*/
} .data { float: right;/*時間右側懸浮*/ font-size: 18px;/*文字大小爲18px*/ margin-top: 20px;/*上方外邊距20px*/ margin-right: 10px;/*右側外邊距10px*/
} .article-body { border-bottom: 1px solid black;/*邊框下方大小1px，實線，黑色*/
} .article-bottom { margin-left: 20px;/*左側外邊距20px*/
} .huojian a { font-size: 36px;/*文字大小36px*/
    /*float: right;*/ position: fixed;/*固定定位*/ right: 20px;/*右側距離20px*/ bottom: 20px;/*下方距離20px*/ opacity: 1;/*透明度1*/ color: red;/*顏色紅色*/ z-index:100;/*模態框*/
}
    </style>
</head>
<body>
<div class="blog-left"><!-- 左側的div-->
    <div class="blog-avatar"><!-- 圖片的div/-->
        <img src="../day49%20CSS/2.png" alt=""><!-- 圖片-->
    </div>
    <div class="blog-title"><!-- 標題-->
        <p>哈士奇的世界</p><!--標題內容-->
    </div>

    <div class="blog-info"><!-- 內容介紹-->
        <p>哈士奇還須要介紹嗎？</p><!--內容填寫-->
    </div>

    <div class="blog-link"><!-- 鏈接-->
        <ul>
            <li><a href="">關於我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信公衆號</a></li>
        </ul>
    </div>
    <div class="blog-tag"><!-- 鏈接-->
        <ul>
            <li><a href="">#python</a></li>
            <li><a href="">#java</a></li>
            <li><a href="">#golang</a></li>
        </ul>
    </div>
</div>


<div class="blog-right"><!--右側的div-->
    <a href="" id="d1"></a><!-- 小火箭的頭-->
    <div class="article-list">
        <div class="article-title">
            <span class="title">二哈介紹</span><!-- 內容的標題-->
            <span class="data">2019-05-30</span><!--時間-->
        </div>

        <div class="article-body"><!-- 內容-->
            <p>西伯利亞雪撬犬是和狼的血統很是近的犬種，因此外形很是的像狼，有着比大多數犬種都要厚的毛髮，毛髮顏色大體分爲黑色、灰色、棕色（淺棕色又被稱爲夢幻色）、純白色（極少）四種，固然這些顏色一般都是夾雜着白色毛髮同時存在。哈士奇眼睛有純棕、純藍、和一隻眼睛棕一隻眼睛藍（即陰陽眼）三種顏色。哈士奇的頭版，俗稱臉型，一般有十字臉型、桃臉型、三把火、地中海四種。</p>
        <div class="article-bottom">
            <span>#ptrhon</span>
            <span>#javascript</span>
        </div>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">二哈介紹</span>
            <span class="data">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>值得一提的是「藍眼，三火」，藍眼指的就是眼睛是藍色的；三火指的是額頭上的三道白色痕跡，看起來像三把燃燒的火苗。「藍眼，三火」曾經一度被誤認爲是哈士奇的標準，其實這並非判斷哈士奇品質標準，反之藍眼三火更是哈士奇廣泛的存在，血統賽級哈士奇就極少有「藍眼睛，三把火」的存在，多爲兩隻褐眼。由於西伯利亞雪撬犬有着和狼很是類似的外觀，因此咱們所看到電影裏的狼大多都是哈士奇扮演。</p>
            <div class="article-bottom">
            <span>#ptrhon</span>
            <span>#javascript</span>
        </div>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">二哈眼睛介紹</span>
            <span class="data">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>一般是藍色和褐色（棕色）。通常咱們所說的「二哈」多爲淺藍色眼色的哈士奇，藍色（隨着年齡增加藍色變淡近爲白色），藍色眼睛哈士奇看起來老是帶着一種蔑視兇殘的眼神，但實則非常溫順。在賽場上出現的多爲褐色眼睛哈士奇，給人溫柔呆萌的感受，但認真的時候眼神間也透露出瘮人的狼意。還有，一隻犬可能有一隻眼是棕色或淺褐色的，而另外一隻倒是藍色的，惡魔與天使面孔同存，這種現象被稱做"bi-eyed"；或者一隻眼是藍色的而另外一隻眼的虹膜是雜色的，即虹膜異色症，被飼養西伯利亞雪撬犬的愛好者稱爲"parti-eyed"。</p>
            <div class="article-bottom">
            <span>#ptrhon</span>
            <span>#javascript</span>
        </div>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">二哈耳朵介紹</span>
            <span class="data">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>耳朵呈三角形，毛髮濃密，外耳毛色多與體表毛色相近，內耳多爲白色，耳朵大小比通常都都要小，正常直立，興奮接近的時候耳朵會向後貼住腦殼。相對於阿拉斯加雪橇犬和薩摩耶雪橇犬，兩隻耳朵位置間距要靠近不少，這也是從外觀上辨別阿拉斯加和哈士奇很直觀的依據。</p>
            <div class="article-bottom">
            <span>#ptrhon</span>
            <span>#javascript</span>
        </div>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">二哈尾巴介紹</span>
            <span class="data">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>尾部像毛刷同樣，有着相似於狐狸尾巴的外形，就像毛筆筆頭的造型同樣天然向後下垂，在興奮的時候會微微上翹，但不會翹至背部甚至捲起來（不然擔憂純種與否）。尾巴上的毛一般比體毛長且硬直，也沒有體毛柔順，揮動有力。尾巴是哈士奇表達情緒的重要方式，在高興的時候，會表現出追尾巴的行爲，在懼怕或攻擊的時候，尾巴會拱形夾在後腿之間，疑惑的時候，尾巴甚至會上下襬動。</p>
            <div class="article-bottom">
            <span>#ptrhon</span>
            <span>#javascript</span>
        </div>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">二哈毛髮介紹</span>
            <span class="data">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>西伯利亞雪撬犬的毛髮由兩層組成：濃密、開司米狀的下層毛和長、較粗糙且含有短、直衛毛（guard hair）的上層毛。它們一年只脫一次下層毛，這個舊毛的脫落過程一般被稱爲吹下他們的毛（blowing their coat）。哈士奇在未成年換毛時期掉毛較厲害，成年哈士奇毛髮打理也很是方便,並且哈士奇自己也很愛衛生。還有西伯利亞雪撬犬毛髮體味很是的弱。</p>
            <div class="article-bottom">
            <span>#ptrhon</span>
            <span>#javascript</span>
        </div>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">二哈鼻子介紹</span>
            <span class="data">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>像全部的狗同樣，西伯利亞雪撬犬的鼻子一般都是涼且潮溼的。 在某些狀況下，西伯利亞雪撬犬（哈士奇）能表現出所謂'雪鼻'或'冬鼻'的現象。這種現象學術上被稱做"hypopigmentation"，因爲冬季裏缺乏陽光形成的，這致使了鼻（或其一部分）褪色成棕色或粉紅。在夏季到來時便能恢復正常。雪鼻現象在其它的短毛種類裏也有出現；老年犬隻的這種顏色變化多是永久的，儘管它並不與疾病相聯繫。</p>
            <div class="article-bottom">
            <span>#ptrhon</span>
            <span>#javascript</span>
        </div>
        </div>
    </div>
    <div class="huojian"><!-- 小火箭的div-->
        <a href="#d1">小火箭</a><!--小火箭的尾-->
    </div>

</div>
</body>
</html>

二哈的簡介

CSS的實例

CSS的引入方式

1.行內式

2.嵌入式

3.外部樣式

CSS選擇器

基本選擇器

標籤選擇器

ID選擇器

類選擇器

通用選擇器

組合選擇器

後代選擇器(空格) div標籤裏的全部span標籤

兒子選擇器(>) div標籤下面的第一層span標籤

弟弟選擇器(~) (對下不對上）,div下面的同級的全部span

毗鄰選擇器(+) （對下不對上），div下面的第一個span

屬性選擇器

分組與嵌套

分組

嵌套

僞類選擇器

僞元素選擇器

選擇器的優先級

文字字體

font-family

字體大小（font-size）

字重（粗細）

font-weight

文本顏色

文字對齊

text-align

文字裝飾

text-decoration

首行縮進 （text-indent）

背景屬性 （background）

邊框（border）

邊框屬性

畫圓 （border-radius）

display 屬性

盒子模型

margin（外邊距）

padding（內填充）

浮動 （float)

三種取值

clear (不容許浮動）

清除浮動的影響

overflow（溢出屬性）

定位 （position）

static

relative（相對定位）

absolute（絕對定位）

fixed（固定）

z-index

opacity（透明度）

綜合示例

首行縮進（text-indent）

背景屬性（background）

畫圓（border-radius）

浮動（float)

定位（position）