手摸手帶你學CSS

Robod丶發表於2020-12-27

CSS

好好學習，天天向上

本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star

HTML常用標籤總結

前言

在大一的時候，上過網頁設計的課程，當時感覺學的還不賴，但也確實挺長時間沒碰了，很多東西都忘了，所以這段時間在B站上找了視訊重新學了一遍。好記性不如爛筆頭嘛，所以一邊學一遍做了詳細的筆記，以後有什麼不記得的就可以拿出來複習複習。

基礎選擇器

CSS中的選擇器可以將HTML中的標籤選擇出來，然後為其設定CSS樣式。

標籤選擇器

標籤選擇器是指用HTML標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式。優點就是能為某一類選擇器設定統一的樣式，缺點是不能為單個標籤設定樣式，只能設定所有的。

<head>
	…………
    <style>
        /* 語法：
        標籤名 {
            屬性名: 屬性值;
            ......
        } */
        p {								
            width: 30px;
            height: 30px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>

類選擇器

如果想要單獨設定某一個或者某幾個標籤的樣式，可以使用類選擇器。只要為相應的HTML標籤設定class屬性，指定對應的類選擇器，就可以為其設定樣式，可以使用多類名，類名用空格隔開。

<head>
	......
    <style>
        /* 語法：
        .類名 {
            屬性名: 屬性值;
            ......
        } */
        .box {
            width: 20px;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">紅色</div>		<!--多類名的格式： class="red box"-->
    <div class="green">綠色</div>
    <div class="red">紅色</div>
</body>

id選擇器

id選擇器可以為標有特定 id 的HTML元素指定特定的樣式。HTML元素以id屬性來設定id選擇器，CSS中 id 選擇器以 “#" 來定義。

<head>
	......
    <style>
        /* 語法：
        #id名 {
            屬性名: 屬性值;
            ......
        } */
        #robod {
            background-color: bisque;
            color: rgb(43, 10, 75);
        }
    </style>
</head>
<body>
    <p id="robod">微信公眾號：Robod</p>
</body>

萬用字元選擇器

萬用字元選擇器用 “*” 定義，用於設定頁面中所有標籤的樣式。它只需要定義不需要呼叫，標籤會自動呼叫萬用字元選擇器。

<head>
	......
    <style>
        /* 語法：
        * {
            屬性名: 屬性值;
            ......
        } */
        * {
            color: blue;
        }
    </style>
</head>
<body>
    <p>0000</p>
    <div>1111</div>
</body>

CSS字型屬性

font-family：設定文字的字型，如果指定多個字型預設會使用第一個，當第一個字型沒有安裝時會使用第二個，以此類推。字型名不需要用引號引起來，但由多個單片語成的字型名需要用單引號引起來。

p {
	font-family:'Times New Roman', Times, serif;
}

font-size：設定文字的大小，單位是 px (畫素)。標題標籤的文字大小需要單獨設定，不然不起作用。

p {
    font-size: 100px;
}

font-weight：設定文字的粗細。

font-style：設定文字的樣式

還可以使用複合屬性的方式將上述幾種屬性寫在一起，不過要遵守一定的順序，不能顛倒。

CSS文字屬性

color：設定文字的顏色，有三種方式，第一種是預定義的顏色，第二種是十六進位制，第三種是RGB值

text-align：用於設定元素內文字內容的水平對齊方式，一般有左對齊(align，預設值)，右對齊(right)，居中對齊(center)三種

<head>
    <style>
        p {
            text-align:right;
        }
    </style>
</head>
<body>
    <p>微信公眾號：Robod</p>
</body>

圖中 p 標籤與瀏覽器視窗一樣寬，文字在最右邊。

text-decoration：用於裝飾文字，比如下劃線，刪除線等

text-indent：設定段落的首行縮排

p {
    /*text-indent: 20px;      首行縮排20畫素 */
    text-indent:2em;          /*首行縮排2個字元*/
}

text-shadow: h-shadow v-shadow blur color;文字陰影

在CSS3中，新增了文字陰影的設定：

值	描述
h-shadow	必需，水平陰影的位置，允許負值，單位px
v-shadow	必需，垂直陰影的位置，允許負值，單位px
blur	可選，模糊的距離，數值越大，陰影越發散，單位px
color	可選，陰影的顏色，可用rgba()設定顏色及透明度

line-height：設定段落文字的行高(行間距)，單位為px或em等，也可以跟一個不帶單位的數字，表示行高是字型大小的多少倍。

行高=盒子高度：文字垂直居中

CSS中並沒有提供文字垂直居中的屬性，可以讓文字的行高等於盒子高度，就可以實現文字垂直居中的效果。

<head>
    <style>
        div {
            background-color: aquamarine;
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>
        微信公眾號：Robod
    </div>
</body>

複合選擇器

後代選擇器

元素A 元素B {
樣式宣告
}

後代選擇器就是設定父元素裡面子元素的樣式。其中，元素B可以是元素A的直接子級，也可以是元素A子元素的子元素。像下面這段程式碼，可以將文字都設定為紅色。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>微信公眾號：Robod(紅色)</p>
        <a>
            <p>微信公眾號：Robod(也是紅色)</p>
        </a>
    </div>
</body>

子選擇器

元素A>元素B {
樣式宣告
}

子選擇器和後代選擇器類似，不過子選擇器只能設定某元素的直接子級元素的樣式。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>微信公眾號：Robod(紅色)</p>
        <a>
            <p>微信公眾號：Robod(黑色)</p>
        </a>
    </div>
</body>

並集選擇器

元素A,
元素B {
樣式宣告
}

並集選擇器可以同時為多個元素設定樣式，其中元素不僅可以是標籤或者類，也可以是後代和子選擇器。

<head>
    <style>
        .red,
        div>span>.red2 {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a class="red">微信公眾號：Robod</a>
        <span>
            <p class="red2">微信公眾號：Robod</p>
        </span>
    </div>
</body>

偽類選擇器

偽類選擇器用於向某些選擇器新增特殊的效果，比如給連結新增特殊效果，或選擇第1個，第n個元素。常用的偽類選擇器有很多，如連結偽類結構偽類等。偽類選擇器書寫時用冒號(:)表示

連結偽類選擇器

a:link：選擇所有未被訪問的連結
a:visited：選擇所有已被訪問的連結
a:hover：選擇滑鼠指標位於其上的連結
a:active：選擇活動連結(滑鼠按下未彈起的連結)

<head>
    <style>
        a:link {
            color: black;
        }
                a:hover {
            color: yellow;
        }
        a:visited {
            color: red;
        }

        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">未被訪問的連結</a>
    <a href="#">已被訪問的連結</a>
    <a href="#">滑鼠指標位於其上的連結</a>
    <a href="#">滑鼠按下未彈起的連結</a>
</body>

: focus偽類選擇器

input: foces：用於選取獲得焦點的表單元素。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="">
    <input type="text" name="" id="">
</body>

元素顯示模式

元素顯示模式就是元素以什麼方式進行顯示，分為塊元素、行內元素以及行內塊元素三種。

塊元素

常見的塊元素有<h1>~<h6>、<p>、<di>、<u>、<o>、<i>、<div>

塊級元素的特點?

自己獨佔一行
高度、寬度、外邊距以及內邊距都可以控制
寬度預設是容器(父級寬度)的100%
是一個容器及盒子，裡面可以放行內元素或者塊級元素
文字類的元素內不能使用塊級元素，比如<p>標籤和標題標籤

行內元素

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

行內元素的特點?

相鄰行內元素在一行上，一行可以顯示多個
寬度高度直接設定是無效的，可以間接設定
預設寬度就是它本身內容的寬度
行內元素只能容納文字或其他行內元素
<a>連結裡面不能再放<a>，但可以放塊級元素，但是給<a>轉換成塊級模式最安全

行內塊元素

有些標籤同時具有塊元素和行內元素的特點，如<img/>、<input/>、<td>，一般將其稱為行內塊元素

行內塊元素的特點?

和相鄰行內元素(行內塊)在一行上，但是他們之間會有空白縫隙，一行可以顯示多個(行內元素特點)
預設寬度就是它本身內容的寬度(行內元素特點)
高度、行高、外邊距以及內邊距都可以控制(塊級元素特點)

元素顯示模式轉換

display: block：將行內元素轉換為塊元素

<head>
    <style>
        a {
            display:block;
            width: 200px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <a href="#">微信公眾號：Robod</a>
</body>

原本行內元素是不能設定寬度和高度的，當其轉換為塊元素後，就可以進行寬高的設定了。

display: inline：將塊元素轉換為行內元素

<head>
    <style>
        div {
            display: inline;
            width: 200px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div>微信公眾號：Robod</div>
    <div>微信公眾號：Robod</div>
</body>

原本塊元素是獨佔一行並且可以設定寬高，但是將其轉換為行內元素後就在一行顯示了，並且不能設定寬高。

display: inline-block：轉換為行內塊元素

該屬性可以將行內元素或者塊元素轉換成行內塊元素。

CSS的背景屬性

背景屬性可以設定背景顏色、背景圖片、背景平鋪、背景圖片位置、背景影像固定等。

背景顏色

background-color: 顏色值;

預設是transparent(透明)，可以設定預定義的顏色，十六進位制值以及RGB值。

div {
    /* background-color: red; */
    /* background-color: #555555; */
    background-color: rgb(222, 222, 33);
}

背景圖片

background-image: none | url(圖片的路徑);

div {
    width: 800px;
    height: 300px;
    background-image: url(https://i.iter01.com/images/ee78db65434b0b24996915befce7ae21d6d0f1707d69177456aa72f47171be10.png);
}

背景平鋪

background-repeat: repeat | no-repeat | repeat-x | repeat-y

預設圖片是平鋪的，也就是圖片在橫向和縱向一張一張的排列，將盒子鋪滿。

引數值	作用
repeat	預設，在縱向和橫向上平鋪
no-repeat	背景影像不平鋪
repeat-x	背景影像在橫向上平鋪
repeat-y	背景影像在縱向上平鋪

背景圖片位置

background-position: x y;

該屬性用於設定背景圖片在容器中的位置，x y 既可以是精確單位也可以是方位名詞。

如果是方位名詞的話可以是top、center、bottom、left、center、right此時兩個引數的位置可以顛倒。

/* 下面兩個都表示水平方向靠右，垂直方向居中 */
background-position: right center;
background-position: center right;

如果是精確單位的話，那麼順序必須是：x方向 y方向，不能顛倒。

/* 表示x方向離原點10px，y方向離原點100px */
background-position: 10px 100px;

如果是方位名詞和精確單位混用的話，那麼順序為：x方向 y方向，不能顛倒。

/* 表示x方向離原點10px，y方向居中 */
background-position: 10px center;

背景影像固定

background-attachment: scroll | fixed

scroll表示背景圖片隨著內容的滾動而滾動；fixed表示背景圖片固定，不隨著內容的滾動而滾動。

背景複合寫法

可以將上述提到的多個背景屬性用複合寫法寫在一起，順序沒有要求，但是一般按照背景顏色背景圖片地址背景平鋪背景影像滾動背景圖片位置的順序。

background-color: red;
background-image: url(images/pic.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center left;
?等價於?
background: red url(images/pic.png) no-repeat fixed center left;

背景色半透明

background: rgba(0, 0, 0, 0.5)

在CSS3中，提供了背景顏色半透明的的效果，其中前三個引數是RGB的色值，最後一個引數是透明度，取值在0~1，0表示完全透明，1表示不透明。

CSS的三大特性

層疊性

如果給一個選擇器設定相同的樣式，此時一個選擇器就會覆蓋掉另一個衝突的樣式，層疊性就是解決樣式衝突的問題。

層疊性樣式覆蓋的原則就是後設定的樣式覆蓋先設定的樣式。

<head>
    <style>
        p {
            font-size: 30px;
            color: red;
        }
        p {
            color: purple;
        }
    </style>
</head>
<body>
    <p>微信公眾號：Robod</p>
</body>

上述程式碼中color屬性被覆蓋了，所以字型顏色是後設定的紫色，而font-size沒被覆蓋，還是30px。

繼承性

子標籤會繼承父標籤的某些樣式，一般是和文字相關的，如text-，font-，line-這些元素開頭的可以繼承，以及color屬性。

<head>
    <style>
        div {
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p>微信公眾號：Robod</p>
    </div>
</body>

優先順序

當給一個元素指定多個不同的選擇器，元素就會執行優先順序高的選擇器。權重由4個數字組成，中間由逗號隔開，從左到右權重依次降低。

選擇器	選擇器權重
繼承或 *	0,0,0,0
標籤選擇器	0,0,0,1
類選擇器，偽類選擇器	0,0,1,0
ID選擇器	0,1,0,0
行內樣式 style=""	1,0,0,0
!important	∞無窮大

<head>
    <style>
        .aa {
            color: purple;
        }
        div {
            color: aqua!important;
        }
        #bb {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="aa" id="bb" style="color: red;">
        微信公眾號：Robod
    </div>
</body>

從上面這個例子中可以看出，原本標籤選擇器的優先順序最低，加上 !important 後反而會執行該樣式。

在複合選擇器中，權重是可以疊加的，按位相加，不會產生進位。

例：
div ul li -------- 0,0,0,3
.nav ul li ------- 0,0,1,2
a:hover ---------- 0,0,1,1

盒子模型

在HTML頁面中，整個頁面佈局可以看成是一個個的盒子，盒子裡面可以放內容。一個盒子由邊框，外邊距，內邊距和內容構成。

邊框(border)

邊框由邊框寬度，邊框樣式，邊框顏色三個部分組成。

border-width

該屬性用來設定邊框寬度，單位可以是px或者em等。

border-style

該屬性用來設定邊框的樣式，預設是none(無邊框)，常用的有 solid(實線)，dashed(虛線)，dotted(點線)等。

border-color

用於設定邊框的顏色。

border:1px solid red

綜合寫法，三種屬性沒有順序。

border-left / border-right / border-top / border-bottom

邊框分開寫法，用於設定單個邊框的屬性。

border-collapse:collapse

表示相鄰邊框合併在一起。預設情況下，兩個相鄰的邊框寬度會疊加，比如兩個1px的邊框在一起就是2px，如果不想寬度疊加的話就可以設定該屬性。

border-radius:length 設定圓角邊框

在CSS3中，新增了圓角邊框的樣式，length引數用於設定圓角的半徑。如果引數是兩個的話，表示左上角右下角的圓角半徑以及右上角左下角的圓角半徑。引數是4個的話，表示左上角右上角右下角左下角(順時針) 的圓角半徑。想要單獨設定某個角的半徑可以用類似border-top-left-radius這樣的屬性。

box-shadow: h-shadow v-shadow blur spread color inset; 盒子陰影

該屬性是CSS3中新增的，可以為盒子設定陰影效果，其中有2個必須的值和4個可選的值：

值	描述
h-shadow	必需。水平陰影的位置，允許負值，單位px
v-shadow	必需。垂直陰影的位置，允許負值，單位px
blur	可選，模糊距離，數值越大，陰影越發散，單位px
spread	可選，陰影的尺寸，單位px
color	可選，陰影的顏色，可以用rgba()設定顏色及透明度
inset	可選，將預設的外部陰影(outset)改為內部陰影

需要注意的是，如果給盒子指定了width/heigh屬性，再指定內邊距就會撐大盒子。比如 width 是100px，padding 指定20px，那麼盒子寬度就變成了140px，解決方法就是將 width/height 屬性減去對應的 padding 值。

內邊距

padding屬性可以用來設定盒子的內邊距，常用的有padding-left,padding-right,padding-top,padding-bottom這四個屬性來設定上下左右四個方向的內邊距。也可以根據padding屬性後面跟的引數個數來設定不同方向的內邊距。

值的個數	含義
padding: 5px;	1個值，表示上下左右都有5畫素的內邊距
padding: 5px 10px;	2個值，表示上下內邊距是5畫素，左右內邊距是10畫素
padding: 5px 10px 20px;	3個值，表示上內邊距5畫素，左右內邊距10畫素，下內邊距20畫素
padding: 5px 10px 20px 30px;	4個值，表示上內邊距5畫素，右內邊距10畫素，下內邊距20畫素，左內邊距30畫素，順時針

外邊距

margin屬性用於設定外邊距，就是盒子與盒子之間的距離，常用的有margin-left,margin-right,margin-top,margin-bottom這四個屬性來設定上下左右四個方向的外邊距。也可以根據margin屬性後面跟的引數個數來設定不同方向的外邊距，用法和padding屬性一致，參考上面即可。

margin:0 auto;

這樣設定可以讓塊級盒子水平居中，前提是必須為盒子指定寬度。

浮動

float屬性用於建立浮動框，將其移動到—邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。一般用於讓多個塊級元素橫向排列。

浮動的特性

浮動的盒子不再保留原來的位置。浮動的元素就相當於元素自己飄起來了，後面的元素會佔用本屬於浮動元素的位置。

<head>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .two {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="one">微信公眾號：</div>
    <div class="two">Robod</div>
</body>

如果多個盒子都設定了浮動，則它們會按照屬性值在一行內顯示並且頂端對齊排列(不會有縫隙)，如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。

<head>
    <style>
        .one {
            float: left;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .two {
            float: left;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .three {
            float: left;
            width: 250px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">微信公眾號</div>
    <div class="two">：</div>
    <div class="three">Robod</div>
</body>

浮動元素具有行內塊元素相似的特性，如果行內元素有了設定了浮動，就不需要轉換為塊級/行內塊元素也可以直接設定寬度和高度；塊級元素沒有設定寬度，預設寬度和父級元素一樣，設定了浮動後寬度就根據內容改變。

<head>
    <style>
        .one {
            float: left;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .two {
            float: right;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <span class="one">微信公眾號</span>
    <div class="two">:Robod</div>
</body>

一般在使用浮動的時候是先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置。所謂標準流就是標籤按照規定好預設方式排列。

清除浮動

由於父級盒子在很多情況下，不方便給高度，但是盒子浮動又不佔有位置，最後父級盒子高度為0時，就會影響下面的標準流盒子。所以需要清除浮動，清除浮動後，父級就會根據浮動的盒子自動檢測高度，父級有了高度之後，就不會影響下面的標準流了。

選擇器 {clear: 屬性值;}

屬性值	描述
left	不允許左側有浮動元素（清除左側浮動的影響）
right	不允許右側有浮動元素（清除右側浮動的影響）
both	同時清除左右兩側浮動的影響

額外標籤法，又稱隔牆法，就是在最後一個浮動的子元素後面新增一個額外標籤，清除浮動樣式。

<head>
    <style>
        .box {
           width: 500px;
           background-color: chartreuse;
        }
        .one {
            float: left;
            width: 200px;
            height: 100px;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="clear"></div>
    </div>
    <div style="width: 200px;height: 200px;background-color: black;"></div>
</body>

父級新增overflow屬性，屬性值設為hiddle，auto，scroll

<head>
    <style>
        .box {
            overflow: hidden;
            width: 500px;
            background-color: chartreuse;
        }
        .one {
            float: left;
            width: 200px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
    </div>
    <div style="width: 200px;height: 200px;background-color: black;"></div>
</body>

:after偽元素法，該方法是額外標籤法的升級版，也是在父級盒子後新增一個標籤，不過沒有顯式地寫出來，是通過CSS新增偽元素的方式實現的

<head>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /*為了相容IE6,7*/
            *zoom: 1;
        }
        .box {
            width: 500px;
            background-color: chartreuse;
        }
        .one {
            float: left;
            width: 200px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="one"></div>
    </div>
    <div style="width: 200px;height: 200px;background-color: black;"></div>
</body>

雙偽元素清除浮動，也是給父元素新增，就是在父元素的前面和後面均新增一個標籤。

<head>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        .box {
            width: 500px;
            background-color: chartreuse;
        }
        .one {
            float: left;
            width: 200px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="one"></div>
    </div>
    <div style="width: 200px;height: 200px;background-color: black;"></div>
</body>

定位

定位在擺放盒子，按照定位的方式移動盒子，定位=定位模式 + 邊偏移。定位模式決定元素的定位方式，邊偏移就是定位盒子移動到最終位置。有top、bottom、left、right 4個屬性，分別代表離上下左右邊線的距離。

定位模式

定位模式通過CSS的position屬性來設定，其值有以下幾個：

static：靜態定位

靜態定位按照標準流特性擺放位置，沒有邊偏移，在佈局中很少用到。

relative：相對定位

相對定位是元素在移動位置的時候，是相對於自己原來的位置來移動的，原來的位置在仍然繼續佔有，不會被後面的盒子佔有。

<head>
    <style>
        div {
            width: 200px;
            height: 200px; 
        }
        .box1 {
            background-color: aquamarine;
            position: relative;
            left: 100px;
            top: 100px;
        }
        .box2 {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

absolute：絕對定位

絕對定位是元素在移動位置的時候，是相對於它父元素來說的，如果它沒有父元素或者父元素沒有定位，則以瀏覽器為準定位，所以一般情況下，對於想要使用絕對定位的元素，我們都會給它的父元素新增一個相對定位，這叫子絕父相。

如果某個元素的父元素沒有定位，但是他父元素的父元素有定位，就以最近一級有定位的父元素為參考點移動位置，和相對定位不同的是，絕對定位在移動位置的時候不再佔有原先的位置。

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            padding: 20px;
        }
        .box1 {
            position: relative;
            left: 50px;
            top: 70px;
            background-color: aqua;
        }
        .box2 {
            background-color: blueviolet;
        }
        .box3 {
            position: absolute;
            left: 100px;
            top: 50px;
            background-color: blue;
        }
        .box4 {
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="box1">1
        <div class="box2">2
            <div class="box3">3</div>
            <div class="box4">4</div>
        </div>
    </div>
</body>

從該例子中可以看出，box3的直接父元素是box2，但是box2無定位，所以就以有定位的box1為參考進行移動，box4所在的位置原本應該是box3的，這說明絕對定位的元素不佔有原先的位置。

fixed：固定定位

固定定位是元素固定於瀏覽器可視區域的位置，它是以瀏覽器可視視窗為參考點進行移動，和父元素沒有關係，不隨滾動條的滾動而滾動，也不佔有原先的位置。

<head>
    <style>
        img {
            position: fixed;
            right: 100px;
            bottom: 100px;
        }
    </style>
</head>
<body>
    <img src="images/robod.png" alt="">
</body>

sticky：粘性定位

像上圖中淘寶首頁的這個，一開始並未完全顯示，隨著頁面的滾動而出現，滾動到一定位置的時候，它就固定在一個地方，不再隨著頁面的滾動而滾動。

這個用的就是粘性定位，它可以被認為是相對定位和固定定位的混合，它是以瀏覽器可視可視視窗為參照點移動元素，佔有原先的位置。

絕對定位和固定定位有幾個特性：
1.行內元素新增絕對定位或者固定定位，可以直接設定寬度和高度；
2.塊級元素新增絕對或者固定定位，如果不給寬度或者高度，預設大小是內容的大小；
3.絕對定位和固定定位的元素和浮動元素一樣，都不會觸發外邊距合併的問題；
4.浮動元素只會壓住它下面標準流的盒子，但是不會壓住下面標準流盒子裡面的文字或者圖片，而絕對定位和固定定位會壓住下面標準流所有的內容。

定位疊放次序

在使用定位佈局時，盒子可能會出現重疊的情況，可以使用 z-index 屬性來控制盒子的前後次序。

選擇器 { z-index: 1;}

該屬性後面跟了一個數，數越大，優先順序越高，盒子就越靠上，如果屬性值相同，則按照書寫順序決定，寫在後面的在上面。

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .box1 {
            position: absolute;
            left: 20px;
            top: 20px;
            background-color: red;
            z-index: 3;
        }
        .box2 {
            position: absolute;
            left: 40px;
            top: 40px;
            background-color: green;
            z-index: 1;
        }
        .box3 {
            position: absolute;
            left: 60px;
            top: 60px;
            background-color: blue;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

元素的顯示與隱藏

display屬性

display除了元素的模式轉換的作用，還能控制元素的顯示與隱藏。

display: none;

隱藏物件，隱藏後的元素不佔有原來的位置。

display: block;

該屬性不僅有轉換為塊級元素的作用，同時還有顯示元素的作用。

visibility可見性

visibility屬性用於指定一個元素可見還是隱藏。

visibility: visible;

該屬性使元素可見。

visibility: hiddle;

元素隱藏，隱藏後繼續佔有原來的位置。

overflow溢位

overflow屬性指定了如果內容溢位了一個元素的範圍時，內容的顯示方式

屬性值	描述
visible	不剪下內容也不新增滾動條，將溢位的部分顯示出來
hiddle	不顯示超過物件尺寸的內容，超過的部分隱藏掉
scroll	不管內容是否溢位，總是顯示滾動條
auto	超出自動顯示滾動條，不超出則不顯示滾動條

CSS高階技巧

精靈圖

所謂的精靈圖就是將網頁中的一些小背景影像整合到一張大圖中，然後在使用的時候通過background-position屬性從精靈圖中獲取指定位置的圖示，這樣就可以避免頻繁的向伺服器傳送請求，節約網路資源的同時還可以提高響應的速度。

<head>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 10px auto;
            background: url(images/sprites.png) no-repeat -182px 0;
        }
        .box2 {
            width: 27px;
            height: 25px;
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat -155px -106px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

字型圖示

精靈圖的缺點就是使用起來不夠靈活，當需要更改某個圖示的時候就需要把精靈圖進行修改，使用一些比較簡單的小圖示的時候，就可以使用字型圖示，字型圖示雖然是圖示，但本質上還是字型，可以很方便的修改顏色以及大小。我這裡使用的是提前在iconfont.cn上下載的，怎麼下載我在這裡就不介紹了。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        .iconchenggong-success {
            font-family: "iconfont";
            color: palegreen;
            font-size: 55px;
        }
    </style>
</head>

<body>
    <span class="iconchenggong-success"></span>
</body>

CSS三角

很多時候，我們會在某些網站上面看到一個方框帶有三角箭頭的樣式，這個三角形可以通過CSS來實現，只要把寬高設為0，邊框設為透明，需要哪個方向的箭頭就把對應的邊框新增顏色即可。

<head>
    <style>
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        .box2 {
            position: absolute;
            right: -40px;
            top: 20px;
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-left-color: black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

上面這種方式是實現一個等腰三角形，用CSS還可以實現一個直角三角形，比如做一個左上角是直角的三角形：

<head>
    <style>
        div {
            width: 0px;
            height: 0px;
            border-top: 100px solid red;
            border-left: 0 solid;
            border-bottom: 0 solid;
            border-right: 50px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>

為什麼這麼寫呢？我來解釋一下：

如果四個邊框的寬度一樣但顏色不一樣，所得到的效果就是下圖中所表示的。上個例子中的直角三角形便是下圖中黑筆標出來的，所以把下邊框和左邊框去掉，右邊框設定成透明色，適當的調整上邊框的size便是一個直角三角形，獲取其它方向的直角三角形只要更改對應的邊框屬性即可。前面提到的等腰三角形也是這個原理。

<head>
    <style>
        div {
            width: 0;
            height: 0;
            border-left: 50px solid blue;
            border-right: 50px solid yellow;
            border-top: 50px solid red;
            border-bottom: 50px solid green;
        }
    </style>
</head>
<body>
    <div></div>
</body>

滑鼠樣式

很多網頁中都會有這麼一種情況，就是當滑鼠移動到不同的元素上去，滑鼠的樣式也隨之改變，這個就是滑鼠樣式，可以通過cursor屬性來更改滑鼠移動到不同元素上顯示的樣式。

屬性值	描述
default	預設
pointer	小手
move	移動
text	文字
not-allowed	禁止

<body>
    <p style="cursor: default;">預設</p>
    <p style="cursor: pointer;">小手</p>
    <p style="cursor: move;">移動</p>
    <p style="cursor: text;">文字</p>
    <p style="cursor: not-allowed;">禁止</p>
</body>

輪廓線 outline

預設的input文字框是有輪廓線的，如果不想要輪廓線，可以使用outline: none將輪廓線去掉。

<body>
    <input type="text" style="outline: none;">
</body>

防止拖拽文字域 resize

預設的文字域是可以拖動大小的，不想要這個效果可以通過resize:none禁止拖拽。

<body>
    <textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>
</body>

vertical-align 屬性應用

vertical-align屬性用來設定行內元素和行內塊元素的垂直對齊方式，經常用於設定圖片或者表單和文字垂直居中。

值	描述
baseline	預設，元素放置在父元素的基線上
top	把元素的頂端與行中最高元素的頂端對齊
middle	把此元素放置在父元素的中部
bottom	把元素的頂端與行中最低的元素的頂端對齊

<body>
    <img src="images/robod.png" alt="" style="vertical-align: middle;">微信公眾號：Robod
</body>

行內塊元素預設是和文字的基線對齊的，所以圖片底側離邊框就會有一個空白縫隙，把vertical-align屬性指定為middle | top | bottom就可以將空白縫隙去掉。

溢位的文字省略號顯示

當一行文字顯示不下的時候預設是換行顯示，但是很多時候我們不想讓它換行，就可以讓顯示不下的內容用省略號表示。

<!-- 單行文字溢位顯示省略號 -->
<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
            /*1.先強制一行內顯示文字*/
            white-space: nowrap;
            /*2.超出的部分隱藏*/
            overflow: hidden;
            /*3.文字用省略號替代超出的部分*/    
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        Robod微信公眾號啊啊啊啊啊啊啊啊啊啊啊
    </div>
</body>

<!--多行文字溢位顯示省略號-->
<head>
    <style>
        div {
            width: 157px;
            height: 46px;
            background-color: blanchedalmond;
            /*超出的部分隱藏*/
            overflow: hidden;
            /*文字用省略號替代超出的部分*/    
            text-overflow: ellipsis;
            /*彈性伸縮盒子模型展示*/
            display: -webkit-box;
            /*限制在一個塊元素顯示的文字的行數*/
            -webkit-line-clamp: 2;
            /*設定或檢索伸縮盒物件的子元素的排列方式*/
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>
        Robod微信公眾號啊啊啊啊啊啊啊啊啊啊啊
    </div>
</body>

總結

好了，CSS的部分到這裡結束了，希望能給看這篇文章的小夥伴們帶來幫助，讓我們下期再見！

碼字不易，可以的話，給我來個點贊，收藏，關注

如果你喜歡我的文章，歡迎關注微信公眾號 『 R o b o d 』

手摸手帶你學移動端WEB開發
2021-02-10
Web
手摸手帶你玩轉Xcode Extensions
2019-03-04
XCode
手摸手帶你理解Vue的Watch原理
2020-06-29
Vue
手摸手帶你理解Vue的Computed原理
2020-06-26
Vue
手摸手，帶你實現程式碼自動部署
2018-12-06
手摸手帶你 Docker 從入門到實踐
2020-09-23
Docker
手摸手帶你入門ionic3(一)：ionic介紹
2018-04-23
手摸手帶你入門ionic3(三)：新建專案
2018-04-24
手摸手帶你入門ionic3(二)：環境配置
2018-04-23
手摸手，帶你用Beego擼商城系列一（基礎篇）
2021-06-30
Go
手摸手，帶你用合理的姿勢使用webpack4（下）
2018-08-07
Web
手摸手，帶你用合理的姿勢使用webpack4（上）
2018-08-07
Web
手摸手帶你入門ionic3(五)：樣式繫結
2019-03-04
手摸手帶你用Hexo擼部落格(二)之配置主題
2020-12-30
Hexo
[手摸手帶你建立php現代化框架] 教程終於寫完了
2020-09-11
PHP框架
帶你走進CSS定位詳解
2018-08-03
CSS
手摸手帶你用Hexo擼部落格(三)之新增評論系統
2021-01-04
Hexo
手摸手帶你部署git伺服器實現自動釋出程式碼
2018-11-29
Git伺服器
從基礎到實戰手摸手帶你掌握新版Webpack4.0詳解
2019-04-14
Web
手摸手，帶你用vue擼後臺系列五(v4.0新版本)
2019-05-09
Vue
CSS基本知識點——帶你走進CSS的新世界
2022-07-07
CSS
手摸手帶你實現小遊戲<別踩白塊兒 -- 內有遊戲連結>
2018-10-26
遊戲
瀏覽器帶你學前端
2019-02-16
瀏覽器前端
復旦大學工程碩士帶你純手寫mybatis（註解版）
2019-01-24
MyBatis
面試官你來，130行帶你手寫完整Promise
2020-04-04
面試Promise
從基礎到實戰手摸手帶你掌握新版Webpack4.0詳解一起讀文件
2019-04-14
Web
YApi——手摸手，帶你在Win10環境下安裝YApi視覺化介面管理平臺
2020-08-19
APIWin10視覺化
手寫Struts，帶你深入原始碼中心解析
2019-08-14
原始碼
大牛帶你玩轉 CSS3 3D 技術
2019-03-10
CSSS33D
css3帶你實現3D轉換效果
2022-03-01
CSSS33D
一篇文章帶你初步瞭解—CSS特指度
2021-01-28
CSS
帶你五步學會Vue SSR
2018-10-10
Vue
一文帶你學習SpringBoot
2019-10-31
Spring Boot
帶你快速學會工廠模式
2020-11-30
模式
CSS面試要點！看完你還覺得你已經學好CSS了嗎？
2019-03-05
CSS面試
帶你動手實現 MVP+Clean架構！
2019-03-03
MVP架構
15 分鐘帶你感受 CSS :has() 選擇器的強大
2024-03-24
CSS
[CSS] 自定義變數帶你隨心所欲，一鍵換膚
2019-02-17
CSS變數