前端CSS

時間 2019-11-13

標籤前端 css 欄目 CSS 简体版

原文原文鏈接

CSS介紹

　　CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素，給HTML設置樣式，讓它更加美觀。css

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

CSS語法

CSS實例

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

CSS註釋

/*這是註釋*/

CSS的幾種引入方式

行內樣式

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

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

內部樣式

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

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

外部樣式

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

<link href="mystyle.css" rel="stylesheet" type="text/css"/>  #如今寫的這個.css文件是和你的html是一個目錄下，若是不是一個目錄，href裏面記得寫上這個.css文件的路徑

　　文件內容是：ide

p {color:blue;}
/*註釋*/

註釋通常都使用來描述後面這段css代碼是給頁面上哪個板塊用的
/*標題樣式*/
xxxxx

/*我的中心設置*/

css的選擇器：(這些都是在外部樣式中使用的)佈局

1.基本選擇器性能

2.高級選擇器學習

CSS選擇器

所謂選擇器即如何找到對應的標籤

基本選擇器

基本選擇器包括：

標籤選擇器
id選擇器
類選擇器

元素選擇器（標籤名）(標籤選擇器)

p {color: "red";}

標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是」特性「

ID選擇器

#i1 {   #號表示id屬性，後面的i1表示id屬性的值
  background-color: red;  #背景色，color:red是字體顏色，這個簡單知道一下就好了，明天咱們再學這些具體的css樣式
}

# 選中id

同一個頁面中id不能重複。任何的標籤均可以設置id id命名規範要以字母能夠有數字下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值

id不能重複，若是想給多個p標籤同時添加一個css樣式怎麼辦？挨個添加id屬性嗎？而且，若是是不一樣的標籤，可是他們的css樣式要同樣，怎麼辦？看下面

類選擇器

.c1 {  .表示class屬性，c1表示class的值
  font-size: 14px;
}
p.c1 {  找到全部p標籤裏面含有class屬性的值爲c1的p標籤，注意他倆之間沒有空格昂
  color: red;
}

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

類的使用，可以決定前端工程師的css水平到底有多牛逼？

玩類了，必定要有」公共類「的概念。

.lv{
    color: green;

}
.big{
    font-size: 40px;
}
.line{
   text-decoration: underline;
}

 <!-- 公共類    共有的屬性 -->
<div>
    <p class="lv big">段落1</p>
    <p class="lv line">段落2</p>
    <p class="line big">段落3</p>
</div>

總結：

不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式
每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用

到底使用id仍是用class？


答案：儘量的用class。除非一些特殊狀況能夠用id

緣由：id通常是用在js的。也就是說 js是經過id來獲取到標籤

注意：

　樣式類名不要用數字開頭（有的瀏覽器不認）。

　標籤中的class屬性若是有多個，要用空格分隔。

通用選擇器

* {  *表示全部的標籤
  color: white;
}

高級選擇器

高級選擇器包括：

後代選擇器
子代選擇器
並集選擇器
交集選擇器

後代選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）

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

子代選擇器

使用>表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

.container>p{
    color: yellowgreen;
}

並集選擇器

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

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤均可以使用這個選擇器設置的樣式。一些共性的元素，可使用並集選擇器.好比像百度首頁使用並集選擇器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用*/

交集選擇器

/*交集選擇器*/
p.box1{  /* p標籤和類名爲box1的標籤都有的屬性 */
    color: green;
}

p#box{  /* p標籤和ID名爲box的標籤都有的屬性 */
    color: red;
}


 /* 還能夠表示選中的兩個選擇器共有的特性。(即便用這兩個選擇器的標籤共有的屬性)*/
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;
}

僞類選擇器

僞類選擇器通常會用在超連接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的選擇器nth-child()

/*選中第一個元素*/
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;
}

僞元素選擇器（經過css來造標籤，不推薦使用）

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

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

上面的這些先後添加的文本內容在頁面上是沒法選中的，正常的標籤或者文字是能夠選中的。

　　　　　　before和after多用於清除浮動。後面講

CSS的繼承性和層疊性

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

繼承性

　　當選擇器相同的時候，按照順序來看css樣式，誰最後就按照誰渲染。那若是是不一樣的選擇器的時候呢？就要學習咱們下面的優先級了，首先看一下繼承：

面嚮對象語言都會存在繼承的概念，在面嚮對象語言中，繼承的特色：繼承了父類的屬性和方法。那麼咱們如今主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。

繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。

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

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

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個body定義了的字體顏色值也會應用到段落的文本中。

body {
  color: red;
}

此時頁面上全部標籤都會繼承body的字體顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的，他的權重是0。

咱們只要給對應的標籤設置字體顏色就可覆蓋掉它繼承的樣式。

p {  # 不管順序如何,都會顯示綠色(能夠理解爲本身的比繼承的(權重是0)權重高,也能夠按照面向對象的思想理解爲本身有的屬性就不去拿父類的了)
  color: green;
}

層疊性

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

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

注：內聯樣式的意思是把css樣式寫在標籤裏面：

其餘的權重：可是有一點說一下，就是上面那個權重計算永不進位的意思是：咱們看上面知道class的權重是10，可是即使是11個class相加起來大於id的100權重，也仍是id生效，也就是說，不會進位，class組合起來也沒法超過id的權重.

層疊性：權重大的標籤覆蓋掉了權重小的標籤，說白了，就是被幹掉了
權重：誰的權重大，瀏覽器就會顯示誰的屬性,前提是都要選中目標標籤,不然都是繼承性,權重都是0.
誰的權重大？很是簡單就是小學的數數。
數：id的數量 class的數量標籤的數量，順序不能亂

看栗子:

<!--test.HTML文件-->

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./01-css高級選擇器.css">
</head>


<body>

<div id='box1' class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p id="pid" class="pclass">再來猜猜我是什麼顏色？</p>
        </div>
    </div>
</div>

</body>
</html>

一:都選中了目標標籤 ,比較權重,誰的權重大，瀏覽器就會顯示誰的屬性

/*這裏是01-css高級選擇器.css文件中的內容*/


id的數量 class的數量 標籤的數量
/*1  0  0 */顯示紅色
#pid{  # id選擇器
    color: red; 
}

/*0  1  0*/
.pclass{  # 類選擇器
    color: yellow;
}

/*0  0  1*/
p{  # 標籤選擇器
    color: purple;
}

#box1 #box2 p{  #顯示黃色
    color: yellow;
}

#box2 .wrap3 p{
    color: red;
}

div div #box3 p{
    color: purple;
}


div.wrap1 div.wrap2 div.wrap3 p{
    color: blue;
}

更多權重測試

#box2 .wrap3 p{
    color: yellow;
}

#box1 .wrap2 p{  # 顯示紅色
    color: red;
}

權重同樣(都不爲0,即都選中了目標標籤),按照默認順序渲染,後來者居上(前面的被覆蓋)

二:都沒選中目標標籤 ,比較距離:

繼承來的權重都是0,那麼就是"就近原則" ：誰描述的近，就顯示誰的屬性。所謂描述的近，就是選中到最內層(目標標籤)的距離越近。

#box1 #box2 .wrap3{ # 顯示紅色,由於距離目標元素"近"
    color: red;
}
.wrap1 #box2{
    color: green;
}

三:有選中,有繼承,選中的大於繼承的:繼承來的屬性，它的權重爲0。

#box1 #box2 .wrap3{ # 繼承的
    color: red;
}
        
#box2 .wrap3 p{ # 結果爲綠色,由於選中的大於繼承的
    color: green;
}

總結：
1.先看標籤元素有沒有被選中，

若是都選中了，就數權重（id,class,標籤的數量）:
- 　　誰的權重大就顯示誰的屬性;
- 　　權重同樣大，後來者居上.
若是有沒有選中的標籤元素(沒有選中標籤元素(即經過繼承)的權重爲0):
- 都是繼承下來的,權重都是0 ==>"就近原則" ：誰描述的近，就顯示誰的屬性
- 一個是繼承,一個是選中==>選中的大於繼承的權重

!important 的使用

除此以外還能夠經過添加 !important方式來強制讓樣式生效，不講道理的操做，但並不推薦使用。由於使用它會影響頁面的佈局,若是過多的使用!important會使樣式文件混亂不易維護，使用方法：

#box1 #box2 .wrap3{
    color: red !important;
}

#box2 .wrap3{
    color: blue !important;
}

注意:

!important 設置權重爲無限大
!important 不影響繼承來的權重，隻影響選中的元素。

CSS屬性相關

1、寬和高

width屬性能夠爲元素設置寬度。(寬度是可使用百分比來表示佔父類的比例的,包括父類是body時候)

height屬性能夠爲元素設置高度。(高度當父類是body時候不能使用百分比來設置,由於瀏覽器的高度是沒有邊的)

塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。

2、字體屬性

文字字體

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

簡單實例：

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

字體大小

p {
  font-size: 14px;
}

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

字重（粗細）

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之間。

3、文字屬性

文字對齊

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

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

文字裝飾

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

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

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

a {
  text-decoration: none;
}

首行縮進

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

p {
  text-indent: 32px;
}

4、背景屬性

/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');  #url裏面是圖片路徑，若是和你的html文件在一個目錄下，使用這種相對路徑就好了
background-repeat: no-repeat; 
/*
 背景重複
 repeat(默認):背景圖片沿着x軸和y軸重複平鋪，鋪滿整個包裹它的標籤
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/

/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #之前你們都用雪碧圖，就是將不少的網頁上須要的小圖片組合成一個大圖，用這個圖中哪一個位置的小圖片，就經過這個參數來調整，
如今不多用這個了

簡寫：

background:#ffffff url('1.png') no-repeat right top; #背景顏色/路徑/是否重複/放在頁面的位置

使用背景圖片的一個常見案例就是不少網站會把不少小圖標放在一張圖片上，而後根據位置去顯示圖片。減小頻繁的圖片請求。

一個有趣的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;  #凡是這種使用百分比的，都是按照你父標籤的寬度的百分之多少來顯示
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; #這個圖片好像沒有了，本身找一個網上的圖片，把這個url路徑換一下，能夠到攝圖網去看看，國內免費的一個圖片網站
            background-attachment: fixed;  #就是這個屬性，讓你的背景圖片固定住的意思，attachment是附屬、依附的意思
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

鼠標滾動背景不動

5、邊框

邊框屬性

border-width
border-style
border-color

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

一般使用簡寫方式：

#i1 {
  border: 2px solid red;
}

邊框樣式

值	描述
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;
}

6、border-radius

用這個屬性能實現圓角邊框的效果。

將border-radius設置爲長或高的一半(直接設置成50%)便可獲得一個圓形。

7、display屬性

用於控制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: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

8、CSS盒子模型

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

看圖吧：

9、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;
}

10、padding內填充

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

推薦使用簡寫：

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

順序：上右下左

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

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

11、float

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

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

關於浮動的兩個特色：

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

三種取值

left：向左浮動

right：向右浮動

none：默認值，不浮動

參考示例

12、clear

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

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

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

父標籤塌陷問題

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

十3、 overflow溢出屬性

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

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

圓形頭像示例

十4、定位（position）

static

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

relative（相對定位）

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

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

absolute（絕對定位）

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

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

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

fixed（固定）

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

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

示例代碼：

返回頂部按鈕樣式示例

十5、z-index

#i2 {
  z-index: 999;
}

設置對象的層疊順序，數值大的會覆蓋在數值小的標籤之上。z-index 僅能在定位元素上奏效。

自定義模態框示例

十6、opacity

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

今日內容小結:

# HTML文件引入CSS的方式:
1 行內樣式
    在標籤中添加一個style屬性,屬性值寫要設置的樣式
2 內接樣式
    添加一個style標籤,在標籤中寫要設置的樣式
3 外接樣式
    添加一個link標籤,在href中指定要導入的css樣式文件的路徑
    在css樣式文件中寫樣式

# 基本選擇器
1 標籤選擇器
    直接寫標籤名
2 id選擇器
    #id
3 class類選擇器
    .類名


# 高級選擇器
1 子類選擇器
    用 大於號
    選擇的是前一級標籤的子標籤

2 後代選擇器
    用 空格
    選擇的是前一級標籤的後代標籤
3 並集選擇器
    用 逗號
    選擇全部符合條件的標籤
4 交集選擇器
    開頭是標籤名 後邊跟id或類選擇器(注意,沒有空格)

5 通用選擇器
    * 選擇全部的標籤

6 屬性選擇器
    1 [屬性名]  帶這個屬性名的標籤
    2 [屬性名='要匹配的屬性值'] 帶有屬性,屬性的名符合匹配要求
    3 [屬性名^='屬性值的開頭字符串']
    4 [屬性名$='屬性值的結尾字符串']
    5 [屬性名*='屬性值包含的字符串']

7 僞類選擇器
    a:    LoVe HAte
        四種狀態:   未被訪問的連接  link
                    訪問過的連接   visited
                    鼠標懸停的樣式  hover
                    鼠標按下時的樣式 active

    選擇第一個孩子:
        :first-child
    選擇最後一個孩子:
        :last-child
    選擇指定的孩子:
        nth-child(n)

    p:first-letter :選擇第一個字符
    p:before在標籤前邊添加一個標籤內容
    p:after在標籤後邊添加一個標籤內容

8 繼承性
    字標籤能夠繼承父標籤的樣式: color, font-, text- line-

9 層疊性
    (選擇器權重同樣的時候)後邊添加的樣式會覆蓋前邊的樣式

10 權重
    id 權重100
    類 權重10
    標籤  權重 1
    !important 權重無限大

    都有!important 的時候,比較權重

1. 前端之CSS
2. Web前端-CSS
3. 前端css position
4. 前端 CSS
5. 前端篇---------CSS
6. python--前端CSS
7. 前端之css
8. python前端CSS
9. 前端-html、css
10. 前端——CSS
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。