前端學習之CSS

CSS概述

CSS簡介

CSS是指層疊樣式表（Cascading Style Sheets），它的作用就是用於表現元素、美化網頁。
樣式定義如何顯示元素，樣式通常存儲在樣式表中。把樣式添加到HTML中，是爲了解決內容與表現分離的問題。
外部樣式表可以極大提高工作效率。外部樣式表通常存儲在CSS文件中，多個樣式可以層疊爲一個。

CSS經歷了CSS1.0、CSS2.0、CSS2.1以及CSS3.0這幾個階段。
CSS2.0提出了DIV+CSS的概念，同時提出了CSS和HTML結構分離的思想，使網頁變得簡單，便於SEO。
CSS2.1提出了浮動和定位。
CSS3.0提出了圓角、陰影、動畫等。

CSS的優勢

1、內容和表現分離

2、網頁結構表現統一，可以實現複用

3、樣式豐富

4、建議使用獨立於html的css文件

5、有利於SEO，容易被搜索引擎收錄

CSS語法

CSS規則由兩個主要的部分構成：選擇器以及一條或者多條聲明。

選擇器{
	聲明;
}

選擇器主要是需要改變樣式的HTML元素。
每條聲明由一個屬性及一個值構成，每一個聲明最好以分號結束。屬性是希望設置的樣式屬性如顏色，邊框等；每一個屬性有一個值，屬性和值被冒號分開。
CSS中的註釋是 / * /*

CSS的導入方式

當讀到一個樣式表時，瀏覽器會根據它來格式化HTML文檔。
HTML導入樣式表的方式主要有三種：

行內樣式（內聯樣式）
內部樣式表
外部樣式表

行內樣式

在標籤元素中，編寫一個style屬性，編寫樣式即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行內樣式-->
<h1 style="color:red">h1</h1>

</body>
</html>

內部樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--內部樣式-->
    <style>
        h1{
            color: goldenrod;
        }
    </style>
</head>
<body>
<h1>h1</h1>

</body>
</html>

外部樣式（推薦使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>h1</h1>

</body>
</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NHSD7gVX-1581070713511)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578729325049.png)]

外部樣式有兩種寫法：

寫法一：鏈接式

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

寫法二：導入式（這是CSS2.1特有的）

<style>
    @import url("css/style.css");
</style>

當行內樣式、內部樣式、外部樣式同時出現或者出現多個時，優先級遵循就近原則

選擇器

選擇器的作用是選擇頁面上的某一個元素或者某一類元素。

基本選擇器

1、標籤選擇器

標籤選擇器選擇的是一類標籤，它會選擇到頁面上所有的這個標籤的元素。

格式：標籤{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: darkred;
            background-color: gold;
            font-size: 30px;
        }
        p{
            color: green;
        }
    </style>
</head>
<body>

<h1>h1</h1>
<h1>標題</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>

</body>
</html>

2、類選擇器

類選擇器 class：選擇所有class屬性一致的標籤，可以跨標籤選擇。

格式：.類名{}

類選擇器的好處是可以多個標籤進行歸類，可以複用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: green;
            background-color: gray;
            font-size: 20px;
        }
        .c2{
            color: red;
            background-color: plum;
            font-size: larger;
        }
    </style>
</head>
<body>

<h1 class="c2">h1</h1>
<h1 class="c1">標題</h1>
<p class="c3">p1</p>
<p class="c1">p2</p>
<p class="c2">p3</p>
<p >p4</p>

</body>
</html>

3、Id選擇器

由於每個標籤的id是唯一的，所以Id選擇器是全局唯一的。

格式：#id名{}

優先級：不遵循就近原則。id選擇器 > 類選擇器 > 標籤選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: green;
            background-color: gray;
            font-size: 20px;
        }
        #h1{
            color: red;
            font-size: 30px;
        }
        #p1{
            color: yellow;
            font-size: 40px;
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>

<h1 class="c1" id="h1">h1</h1>
<h1 class="c1">標題</h1>
<p id="p1">p1</p>
<p class="c1">p2</p>
<p class="c2">p3</p>
<p id="p4">p4</p>

</body>
</html>

層次選擇器

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

<h1 class="c1" id="h1">h1</h1>
<h1 class="c1">標題</h1>
<p id="p1">p1</p>
<p class="c1">p2</p>
<ul>
    <li>
        <p class="c2">p3</p>
    </li>
    <li>
        <p id="p4">p4</p>
    </li>
</ul>

</body>
</html>

1、後代選擇器

在某個元素的後面的元素。

body p{
    color: blue;
    font-size: larger;
    background-color: yellow;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TwZlZ8eB-1581070713512)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578731420690.png)]

2、子選擇器

只選擇某個元素的一代。

body>p{
    color: green;
    font-size: larger;
    background-color: yellow;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lvCGBf6C-1581070713513)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578731388213.png)]

3、相鄰兄弟選擇器

選擇同輩，且在後面的元素。只選擇一個！

#p1+p{
    color: red;
    font-size: larger;
    background-color: yellow;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AVvngOUn-1581070713514)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578731360400.png)]

4、通用選擇器

選擇選中元素的向下的所有兄弟元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
    </style>
</head>
<body>
<h1 class="c1" id="h1">h1</h1>
<h1 class="c1">標題</h1>
<p id="p1">p1</p>
<p class="c1">p2</p>
<p class="c1">p5</p>
<p class="c1">p6</p>
<ul>
    <li>
        <p class="c2">p3</p>
    </li>
    <li>
        <p id="p4">p4</p>
    </li>
</ul>
</body>
</html>

#p1~p{
    color: red;
    font-size: larger;
    background-color: yellow;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fAmryzEL-1581070713552)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578731317638.png)]

結構僞類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       
    </style>
</head>
<body>
<h1>h1</h1>
<h1>h2</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

1、選擇ul的第一個子元素

ul li:first-child{
    color: #fd3f9f;
    background-color: yellow;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ooqaCkXe-1581070713553)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578732783879.png)]

2、選擇ul的最後一個元素

ul li:last-child{
    color: blue;
    background-color: navajowhite;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3O1Ls1Hs-1581070713554)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578732833663.png)]

3、選中第一個h1

定位到父元素，選擇當前的第一個元素。

選擇當前h1元素的父級元素，選中父級元素的第一個，並且得是當前元素纔可以生效！

h1:nth-child(1){
    color: yellow;
    background-color: khaki;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6Vc0eYJx-1581070713564)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733051691.png)]

當選擇p1時就沒有生效。

p:nth-child(1){
    color: yellow;
    background-color: khaki;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-RpOtaojx-1581070713565)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733144086.png)]

4、選中父元素下的類型爲h1元素的第二個

h1:nth-of-type(2){
    color: green;
    background-color: gray;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-71seausw-1581070713565)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733320287.png)]

使用nth-of-type，選中p元素的第一個。

p:nth-of-type(1){
    color: green;
    background-color: gray;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7vjty6JO-1581070713566)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733380126.png)]

使用nth-of-type，就不會存在沒有選中的問題了。

屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    </style>
</head>
<body>
<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

</p>

</body>
</html>

屬性選擇器實際上是將id選擇器和類選擇器進行了結合。

=      絕對等於  
*=     包含這個元素
^=     以xxx開頭
$=     以xxx結果

1、選中存在id屬性的元素

a[id]{
    background-color: red;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vk90ftg1-1581070713566)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733714473.png)]

2、選中id=first的元素

a[id=first]{
    background-color: yellow;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZE0A8KWl-1581070713567)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733794260.png)]

3、選中class中含有links的元素

a[class*="links"]{
    background-color: #7af2ff;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DnSVLlui-1581070713567)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733932377.png)]

a[class*="active"]{
    background-color: #7af2ff;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TERBENdC-1581070713568)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578734190613.png)]

4、選中href中以http開頭的元素

a[href^="http"]{
    background-color: darkred;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6IQ8uZSb-1581070713569)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578734288557.png)]

5、選中href中以pdf結束的元素

a[href$="pdf"]{
    background-color: hotpink;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IO9BU3Sp-1581070713569)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578734359387.png)]

美化網頁元素

美化網頁的原因

美化網頁的優點：

有效地傳遞頁面信息
網頁經過美化，頁面變得漂亮，才能夠吸引用戶
凸顯出頁面的主題
提高用戶的體驗

span標籤：要重點突出的字，可以使用span標籤套起來。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
學習<span class="span">java</span>
</body>
</html>

字體樣式

font-family    字體
font-size      字體大小
font-weight    字體粗細
color          字體顏色

也可將字體樣式寫在一行，使用 font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            color: green;
            font-family: 微軟雅黑;
        }
        h1{
            font-size: 20px;
        }
        p{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>標題一</h1>
<p>學習java</p>
</body>
</html>

文本樣式

1、顏色

顏色的屬性是color，color後可跟顏色的單詞，也可跟#xxxxxx，也可以跟rgb()和rgba()函數。

rgb()函數有三個參數，分別代表紅、綠、藍三個顏色的值（0~255）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgb(200,5,7);
        }
        
    </style>
</head>
<body>
<h1>標題一</h1>
<p>學習java</p>
</body>
</html>

rgba()比rgb()，多了一個透明度參數（0~1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgba(50,200,89,0.5);
        }

    </style>
</head>
<body>
<h1>標題一</h1>
<p>學習java</p>
</body>
</html>

2、文本對齊

文本對齊（text-align）的方式有：right、left、center等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }

    </style>
</head>
<body>
<h1>標題一</h1>
<p>學習java</p>
</body>
</html>

3、首行縮進

首行縮進兩字符：text-indent: 2em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
<h1>標題一</h1>
<p>網易雲音樂是一款由網易開發的音樂產品，是網易杭州研究院的成果，依託專業音樂人、DJ、好友推薦及社交功能，在線音樂服務主打歌單、社交、大牌推薦和音樂指紋，以歌單、DJ節目、社交、地理位置爲核心要素，主打發現和分享。</p>
</body>
</html>

4、行高

line-height。單行文字上下居中。一般都是line-height=height。

行高和塊的高度一致，就可以上下居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            width: 300px;
            height: 100px;
            line-height: 100px;
            background-color: green;
        }
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
<h1>標題一</h1>
<p id="p1">網易雲音樂</p>
<p>網易雲音樂是一款由網易開發的音樂產品，是網易杭州研究院的成果，依託專業音樂人、DJ、好友推薦及社交功能，在線音樂服務主打歌單、社交、大牌推薦和音樂指紋，以歌單、DJ節目、社交、地理位置爲核心要素，主打發現和分享。</p>

</body>
</html>

5、裝飾

text-decoration

text-decoration: line-through;   中劃線
text-decoration: underline;      下劃線
text-decoration: overline;       上劃線
text-decoration: none;           去掉下劃線

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            text-decoration: line-through;
        }
        #p1{
            text-decoration: underline;
        }
        a{
            text-decoration: none;     // 超鏈接去掉下劃線
        }
        p{
            text-indent: 2em;
            text-decoration: overline;
        }

    </style>
</head>
<body>
<h1>標題一</h1>
<p id="p1">網易雲音樂</p>
<a href="">點擊</a>
<p>網易雲音樂是一款由網易開發的音樂產品，是網易杭州研究院的成果，依託專業音樂人、DJ、好友推薦及社交功能，在線音樂服務主打歌單、社交、大牌推薦和音樂指紋，以歌單、DJ節目、社交、地理位置爲核心要素，主打發現和分享。</p>

</body>
</html>

6、文本圖片水平對齊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img,span{
            vertical-align: middle;
        }

    </style>
</head>
<body>
<h1>標題一</h1>
<p id="p1">網易雲音樂</p>
<a href="">點擊</a>
<p>網易雲音樂是一款由網易開發的音樂產品，是網易杭州研究院的成果，依託專業音樂人、DJ、好友推薦及社交功能，在線音樂服務主打歌單、社交、大牌推薦和音樂指紋，以歌單、DJ節目、社交、地理位置爲核心要素，主打發現和分享。</p>
<p>
    <img src="images/a.jpg" alt="">
    <span>aaabbbccc</span>
</p>
</body>
</html>

陰影

text-shadow屬性應用於陰影文本。

text-shadow有四個值。h-shadow：水平陰影的位置（允許負值）；v-shadow：垂直陰影的位置（允許負值）；blur：模糊的距離；color：陰影的顏色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p{
            text-shadow: green 20px -20px 8px;
        }
    </style>
</head>
<body>
<p id="p">hello</p>
</body>
</html>

超鏈接僞類

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

僞類的語法：選擇器：僞類{屬性:值;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默認的顏色和字體*/
        a{
            text-decoration: none;
            color: green;
            font-size: 30px;
        }
        /*鼠標懸浮的狀態*/
        a:hover{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
<a href="">點擊</a>
</body>
</html>

列表

列表有一個比較重要的屬性：list-style。

list-style：
none       去掉圓點
circle     空心圓
decimal    數字
square     正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            list-style: none;
            text-indent: 2em;
        }
    </style>
</head>
<body>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

背景

背景分爲背景顏色和背景圖片。

1、背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 400px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="div">

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

2、背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed yellow;
            background-image: url("images/a.jpg");
        }
    </style>
</head>
<body>
<div id="div">

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

背景圖片默認是全部平鋪的。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gRCDpUGV-1581070713570)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578744969293.png)]

水平平鋪，background-repeat: repeat-x;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed red;
            background-image: url("images/a.jpg");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
<div id="div">

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2IuzeTgC-1581070713571)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578744935651.png)]

垂直平鋪，background-repeat: repeat-y;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed red;
            background-image: url("images/a.jpg");
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
<div id="div">

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4gF0vs7a-1581070713572)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578745033993.png)]

不平鋪，background-repeat: no-repeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed red;
            background-image: url("images/a.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div id="div">

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7w6qiwi5-1581070713573)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578745080594.png)]

漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed red;
            background-color: #FFFFFF;
            background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)
        }
    </style>
</head>
<body>
<div id="div">

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FAvsMoOZ-1581070713573)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578745198431.png)]

盒子模型

盒子模型概念

所有的HTML元素都可以看做盒子。在CSS中，“box model”這一術語是用來設計和佈局時使用的。

CSS盒模型本質上是一個盒子，封裝了周圍的HTML元素，它包括：邊距，邊框，填充和實際內容。

盒子模型允許在其它元素和周圍元素邊框之間的空間裏放置元素。

盒子模型：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BeMbHORf-1581070713573)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578745897126.png)]

margin：外邊距。清除邊框外的區域，外邊距是透明的。

border：邊框。圍繞在內邊距和內容外的邊框。

padding：填充，內邊距。清除內容周圍的區域，內邊距是透明的。

content：內容。盒子的內容，用於顯示文本和圖像。

邊框

1、邊框的粗細

2、邊框的顏色

3、邊框的樣式

border:粗細,樣式,顏色;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: #6284FF;
        }
        div:nth-of-type(1) input{
            border: 1px dashed green;
        }
        div:nth-of-type(2) input{
            border: 1px dashed yellow;
        }
        div:nth-of-type(3) input{
            border: 1px solid purple;
        }
    </style>
</head>
<body>
<div id="box">
    <form action="">
        <div>
            <input type="text">
        </div>
        <div>
            <input type="text">
        </div>
        <div>
            <input type="text">
        </div>
    </form>

</div>

</body>
</html>

內外邊距

body總有一個默認的外邊距margin。常見的操作是將margin設爲0，即margin:0。

一般來說，對於 h1，ul，li，a，body等需要設置：

margin:0;
padding:0;
text-decoration:none;

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

    <style>
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        h1{
            font-size: 16px;
            background-color: #6284FF;
            line-height: 30px;
            color: white;
            margin: 0 1px 2px 3px;
        }
        form{
            background-color: rosybrown;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>
</head>
<body>
<div id="box">
    <h1>會員登錄</h1>
    <form action="#">
        <div>
            <span>用戶名：</span> <input type="text">
        </div>
        <div>
            <span>密碼：</span> <input type="text">
        </div>
        <div>
            <span>郵箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

盒子的計算方式：margin+border+padding+內容寬度。

圓角邊框

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

    <style>
        div{
            width: 300px;
            height: 300px;
            border: 10px solid red;
            border-radius: 300px;
        }
    </style>
</head>
<body>
<div>

</div>

</body>
</html>

盒子陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            display: block;
            text-align: center;
        }
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div>
    <img src="images/a.jpg" alt="">
</div>

</body>
</html>

浮動

標準文檔流

文檔流是指元素排版佈局過程中，元素會默認自動從左往右、從上往下的流式排列方式，並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。

標準文檔流分爲兩個等級：塊級元素和行內元素

塊級元素：獨佔一行。如：h1~h6，p標籤，div標籤，列表…
行內元素：不獨佔一行。如：span標籤，a標籤，img標籤，strong…

行內元素可以被包含在塊級元素中，反之不行。

display

block         塊元素
inline        行內元素
inline-block  是塊元素，但是可以內聯，在一行。
none

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

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>
    <span>hello</span>
</div>

</body>
</html>

float

元素一般是水平方向浮動，這意味着元素只能左右浮動而不能上下浮動。

一個浮動元素會盡量向左或者向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

浮動的關鍵字： float
float:right    向右浮動
float:left     向左浮動

清除浮動的關鍵字是 clear
clear:right    清除右邊的浮動
clear:left     清除左邊的浮動
clear:both     清除兩邊的浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html>

父級邊框塌陷的問題

針對父級邊框塌陷的問題，有以下幾種解決方案：

增加父級元素的高度
增加一個空的div標籤，清除浮動
使用關鍵字 overflow
給父類元素增加一個僞類

1、增加父級元素的高度

#father{
    border: 1px black solid;
    /*增加父級元素的高度*/
    height: 800px;
}

2、增加一個空的div標籤

<style>
    .clear{
    	margin: 0;
    	padding: 0;
    	clear: both;
    }
</style>
<div class="clear"></div>

3、overflow

#father{
    border: 1px black solid;
    /*使用關鍵字overflow 屬性值爲hidden*/
    overflow: hidden;
}

4、給父類元素增加僞類

/*父類元素增加僞類*/
#father:after{
    content: '';
    display: block;
    clear: both;
}

display的方向不可控制；float 元素浮動起來會脫離標準文檔流，需要解決父級邊框塌陷的問題。

定位

相對定位

相對定位是針對元素自己原來的位置進行偏移。相對定位的方向是上下左右。

相對定位是相對於原來的位置進行指定的偏移。相對定位的元素仍然在標準文檔流中，它原來的位置會被保留。

相對定位的關鍵字是  position:relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位</title>
    <!--
    相對定位，position relative
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            background-color: #6284FF;
            border: 1px dashed #fd4434;
            position: relative;
            /*top 負值：相對於原位置向上偏移；正值：相對於原位置向下偏移*/
            top: 20px;
            /*left 負值：相對於原位置向左偏移；正值：相對於原位置向右偏移*/
            left: -20px;
        }
        #second{
            background-color: #ad2cff;
            border: 1px dashed #65ffda;
        }
        #third{
            background-color: #45ff61;
            border: 1px dashed #b7ffb1;
            position: relative;
            /*bottom：負值，相對於原位置向下偏移；正值，相對於原位置向上偏移*/
            bottom: 10px;
            /*right：負值，相對於原位置向右偏移；正值，相對於原位置向左偏移*/
            right: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">first</div>
    <div id="second">second</div>
    <div id="third">third</div>
</div>
</body>

絕對定位

絕對定位是基於某個定位進行上下左右指定的偏移。分爲以下幾種情況：

在沒有父級元素定位的前提下，元素是相對於瀏覽器定位的
若父級元素存在定位，元素是相對於父級元素定位的
絕對定位是在父級元素的範圍內進行偏移

相對於父級和瀏覽器的位置進行指定的偏移，絕對定位的元素是不在標準文檔流中的，它原來的位置不會被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位</title>
    <!--
    絕對定位
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #45ff61;
            border: 1px dashed #7dff4c;
        }
        #second{
            background-color: #6284FF;
            border: 1px dashed #8fadff;
            position: absolute;
            /*left：100px   該元素相對於瀏覽器或者父級元素的左邊偏移100px*/
            left: 100px;
            /*right: 100px;*/
        }
        #third{
            background-color: #807425;
            border: 1px dashed #807a3b;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一個盒子</div>
    <div id="second">第二個盒子</div>
    <div id="third">第三個盒子</div>
</div>

</body>
</html>

固定定位

固定定位：元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }

    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

z-index

由於元素的定位和標準文檔流是沒有關係的，所以元素可以覆蓋頁面上的其他元素。z-index屬性指定了一個元素的堆疊順序（即哪個元素應該放在前面或後面）。一個元素可以有正數或負數的堆疊順序。

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

如果兩個定位元素重疊，沒有指定z - index，最後定位在HTML代碼中的元素將被顯示在最前面。

5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
position: relative;
}
#first{
background-color: #45ff61;
border: 1px dashed #7dff4c;
}
#second{
background-color: #6284FF;
border: 1px dashed #8fadff;
position: absolute;
/left：100px 該元素相對於瀏覽器或者父級元素的左邊偏移100px/
left: 100px;
/right: 100px;/
}
#third{
background-color: #807425;
border: 1px dashed #807a3b;
}

第一個盒子

第二個盒子

第三個盒子

```

固定定位

固定定位：元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }

    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

z-index

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

如果兩個定位元素重疊，沒有指定z - index，最後定位在HTML代碼中的元素將被顯示在最前面。

z-index，默認是0