文章目錄

首頁向大家介紹一下，什麼是工程師

Web前端工程師

負責網頁編寫
Web後端工程師
負責數據庫和查詢邏輯編寫
Web全棧工程師

上述二者和項目控制

HTML 的文章已經寫了可以看我的博客 https://blog.csdn.net/weixin_44238683/article/details/106582757

本文以後端工程師，需掌握前端CSS多少內容作爲方向。
後端工程師，無需全部專注前端，但是又要會一些內容並且加以使用，這個“度”是多少，也是就是知識如下圖

一、CSS簡介

前面我們學習瞭解了html，超文本標籤，是網頁上字體的操作

現在就學會怎麼來設計頁面佈局，這個時候就需要CSS-層疊樣式

就像我們畫圖一樣，可以設置顏色，大小，位置。

二、語法格式

這裏的話就指出一個基本格式，具體的看後面的操作

CSS的基本格式：
			選擇器 {
				屬性: 值；
				屬性: 值；
}

三、CSS的使用方式

我們需要知道三種方式

1. 嵌入式

關鍵詞 style

在這裏插入代碼片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h5{
            color:red;
            font-size: initial;
        }
    </style>
</head>
<body>
    <h1 id="jingyesi">靜夜思</h1>
    <h5>&copy;作者：&lt;李&nbsp;白&gt;</h5>
    <h3>牀前明月光</h3>
    <h3>疑是地上霜</h3>
    <h3>舉頭望明月</h3>
    <h3>低頭思故鄉</h3>
    <hr>
</body>
</html>

聲明使用的位置在 <head> </head>標籤裏面
定義 <style> </style> 並且在裏面寫入
可以看到我們聲明瞭 h5 是標籤，設置了顏色和字體的樣式
爲什麼用 h5 名字，這是跟選擇器有關，在下一節會介紹，這裏先了解，設置的位置 和 方式稱呼

效果如下圖

2. 外鏈式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    href 聲明css路徑
    type 可以不寫默認是css
    rel 目標類型固定寫法
    -->
    <link href="外鏈式02.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1 id="jingyesi">靜夜思</h1>
    <h5>&copy;作者：&lt;李&nbsp;白&gt;</h5>
    <h3>牀前明月光</h3>
    <h3>疑是地上霜</h3>
    <h3>舉頭望明月</h3>
    <h3>低頭思故鄉</h3>
    <hr>
</body>
</html>

外鏈式，就是將寫好的嵌入式寫好存放到.css後綴的文件並且導入引用，rel 和 type 是默認寫法。
實際項目開發，都是用外鏈式的，將樣式和內容分離。
下圖爲css文件截圖

設置顏色和字體，結果如下圖

3. 行間樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="color: red;font-size: initial" id="jingyesi">靜夜思</h1>
    <h5>&copy;作者：&lt;李&nbsp;白&gt;</h5>
    <h3>牀前明月光</h3>
    <h3>疑是地上霜</h3>
    <h3>舉頭望明月</h3>
    <h3>低頭思故鄉</h3>
    <hr>
</body>
</html>

行間樣式就是在需要設計的標籤內部寫入，經常用來開發項目調式的時候使用。

4.三種樣式優先級和應用場景

三種樣式，需要弄清楚在什麼地方寫入

項目定稿 ：外鏈式，外鏈式就是將寫好的嵌入式放到.css後綴文件，並且導入

測試常用： 行間樣式，嵌入式

優先級：行內、嵌入、外鏈【就近原則】

誰離需要設置的標籤近就先採用誰。就是當你使用三種方式對同一個標籤，都設置顏色，誰優先級高就用誰。

四、選擇器

在前面css使用方式的時候，我們用到了選擇器。那麼現在就詳細講解選擇器。
知識如下圖，選擇器就是幫助我們找到要設置的標籤

1. 基本選擇器

1、所有元組器選擇

我們來看看，下面html中寫了什麼標籤
有div、p、ul、li標籤，我們可以通過通配 *選中全部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css選擇器</title>
    <style>
        /*所有的元組*/
        *{
            color:red;
            font-size: 22px;
        }

    </style>
</head>
<body>
<div class="myclass myclass2">hello</div>
<p id="mytext">我愛北京天安門</p>
<ul>
    <li>粉蕉</li>
    <li class="myclass">荔枝</li>
    <li class="myclass">蘋果</li>
</ul>
</body>
</html>

2、標籤選擇器

顧明思意，就是直接使用標籤名
可以看到同樣是有div、p、ul、li標籤我們選中了li標籤，標籤並且設置文字爲30px，那麼效果是其它標籤並不會有變化，並不像通配符，後面開始除了特殊情況，不在指出用了什麼標籤。QAQ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css選擇器</title>
    <style>
        /*標籤選擇器*/
        li{
            font-size: 30px;
        }

    </style>
</head>
<body>
<div class="myclass myclass2">hello</div>
<p id="mytext">我愛北京天安門</p>
<ul>
    <li>粉蕉</li>
    <li class="myclass">荔枝</li>
    <li class="myclass">蘋果</li>
</ul>
</body>
</html>

3、id選擇器

id選擇器，記住了一定要用一個 # 然後接着寫需要設置 id 名
#mytext { } 像這樣

這個 id 直接在需要設置標籤處新建屬性 id=“mytext”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css選擇器</title>
    <style>
        /*id選擇器*/
        #mytext{
            font-family: 楷體;
            font-size: 30px;
        }


    </style>
</head>
<body>
<div class="myclass myclass2">hello</div>
<p id="mytext">我愛北京天安門</p>
<ul>
    <li>粉蕉</li>
    <li class="myclass">荔枝</li>
    <li class="myclass">蘋果</li>
</ul>
</body>
</html>

ul標籤被選中，並且字體爲楷體，大小爲30px

4、類選擇器

類選擇器，也是需要通過一個 .然後接着寫類名
.myclass 像這樣

需要設置的標籤屬性 class = “myclass myclass2” 可以以空格分隔設置多個類名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css選擇器</title>
    <style>
        /*類選擇器*/
        .myclass{
            font-family: 楷體;
            font-size: 30px;
        }
        .myclass2{
            color: red;
        }
    </style>
</head>
<body>
<div class="myclass myclass2">hello</div>
<p id="mytext">我愛北京天安門</p>
<ul>
    <li>粉蕉</li>
    <li class="myclass">荔枝</li>
    <li class="myclass">蘋果</li>
</ul>
</body>
</html>

5、整體操作代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css選擇器</title>
    <style>
        /*所有的元組*/
      /*  *{
            color:red;
            font-size: 22px;
        }*/

        /*標籤選擇器*/
        /*li{
            font-size: 30px;
        }*/

        /*id選擇器*/
        /*#mytext{
            font-family: 楷體;
            font-size: 30px;
        }*/
        
		/*類選擇器*/
        .myclass{
            font-family: 楷體;
            font-size: 30px;
        }
        .myclass2{
            color: red;
        }
    </style>
</head>
<body>
<div class="myclass myclass2">hello</div>
<p id="mytext">我愛北京天安門</p>
<ul>
    <li>粉蕉</li>
    <li class="myclass">荔枝</li>
    <li class="myclass">蘋果</li>
</ul>
</body>
</html>

2.屬性選擇器

共四種使用方式

參考代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css屬性選擇器</title>
    <style>
        a[alt="圖片未加載"]{
            font-size: 30px;
        }
        a[title^="a"]{
            color: black;
        }
    </style>
</head>
<body>
    <div><a href="#" title="" alt="圖片未加載">a1</a></div>
    <div><a href="#" title="" alt="圖片未加載">a2</a></div>
    <div><a href="#" title="a3">a3</a></div>
    <div><a href="#" title="a4">a4</a></div>
</body>
</html>

這裏就不做說明了，沒什麼難度，對着看。
也就是指向標籤內以屬性名 作爲選擇

3.關係選擇器

參考案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*1、後代選擇器*/
        /*#mydiv a{*/
        /*    color: red;*/
        /*}*/

        /*2、後代選擇器 只選後代關係第一個最近的*/
        /*#mydiv>a{*/
        /*    color: red;*/
        /*}*/

        /*3、並列選擇器 並列關係*/
        #mydiv>a,.content{
            color: red;
        }

    </style>
</head>
<body>

    <div id="mydiv">
        <a href="#jingyesi">回到頂部</a>
        <a href="#location">回到需要的位置</a>
        <div>
            <a href="#" class="content"> 看看我是什麼顏色</a>
        </div>
    </div>
</body>
</html>

總的來說關係選擇器分爲三種，需要注意後代跟子帶的區別，注意看圖。

後代選擇器：#myid a 是後面所有a標籤

子選擇器#mydiv > a 是第一層的所有a標籤

並列選擇器 #mydiv a 並列就是可以同時選中兩個

4.僞類和僞元素選擇器

這裏就用到了僞元素選擇器after、befor、和僞類選擇器中hover
僞元素其它的target、active、visited、link可以參考我的博客另外文章。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
        /*1、hover 懸停 鼠標放到上面變顏色*/
        #content:hover{
            background-color: red;
        }
        /*2、after 追加內容*/
        #div1:after{
            content: "我是後來的";
        }
        /*3、before 我是前面的*/
        #div1:before{
            content: "我是前面的";
        }
    </style>
</head>
<body>

    <div id="content"></div>

    <div id="div1">div1</div>

</body>
</html>

5.選擇器優先級【權重】

複習回顧
在前面我們知道了三種css使用方式的優先級
行間樣式>嵌入式>外鏈式是根據就近原則來的

這裏我們要知道   權重  這個概念
當使用多個不同的選擇器的時候，選擇了一個元素設置樣式，那麼元素到底使用哪個選擇器的樣式呢？
其實每個選擇器都有一個對應的數值，稱爲權重，誰的數值大就用誰。
如果是關係型選擇器，將所有的選擇器對應的值相加，值大的優先級高，如果值相等按照就近原則。

參考代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*101*/
        #mydiv a{
            color: red;
        }
        /*12*/
        body .xx a{
            color: black;
        }

    </style>
</head>
<body>

    <div id="mydiv" class="xx">
        <a href="#jingyesi">回到頂部</a>
        <a href="#location">回到需要的位置</a>
        <div>
            <a href="#" class="content"> 看看我是什麼顏色</a>
        </div>
    </div>
</body>
</html>

五、css常用樣式屬性

樣式屬性就是前面我們已經涉及過了，比如color，font-size
在前面我並沒有說明，這裏開始，詳細說明有哪些樣式屬性

推薦一個手冊給大家
CSS2.0中文手冊.chm，CSDN隨便搜就有
比如，我要知道background使用方法，這邊一搜就有了，本文以講後端工程師掌握前端知識哪些知識爲主，需要進一步瞭解的可以使用手冊。

1.背景

1、背景顏色

我們設置了寬度和高度爲200px，並且
background-color: red; 背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

</head>
<body>
    <div class="div1">

    </div>

</body>
</html>

2、背景圖片

指令：background-image: url("./img/toudianping.jpg"); 中間爲圖片路徑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 500px;
            height: 500px;
            background-image: url("./img/toudianping.jpg");
        }

    </style>
</head>
<body>
    <div class="div1">

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

一定要設置盒子大小，默認方式是重複貼圖，後面會將取消默認平鋪，可以調節大小width和height選擇其中一個，默認是等比縮放

3、背景圖片位置

這裏其實不太好說明
注意自己一定要動手調試background-position: 200px 300px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 500px;
            height: 500px;
            background-image: url("./img/toudianping.jpg");
            background-position: 200px 300px;
        }
    </style>
</head>
<body>
    <div class="div1">

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

4、背景圖片大小

background-size: 50px; 區分width和height，這個是設置盒子大小的，相當於，你有一個抽屜div，裏面就是你存放的東西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 500px;
            height: 500px;
            background-image: url("./img/toudianping.jpg");
            background-size: 50px;
        }
    </style>
</head>
<body>
    <div class="div1">

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

5、背景平鋪方式

默認是平鋪
取消平鋪 background-repeat: no-repeat
水平 background-repeat: repeat-x;
垂直 background-repeat: repeat-y;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 500px;
            height: 500px;
            background-image: url("./img/toudianping.jpg");
            background-size: 50px;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="div1">

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

取消平鋪，剩下的自己試下。

6、複合屬性寫法

使用方法 background: 顏色圖片平鋪位置

background:antiquewhite url("./img/toudianping.jpg") no-repeat 20px 50px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background: red url("./img/toudianping.jpg") no-repeat 20px 20px;
        }
    </style>
</head>
<body>
    <div class="div1">

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

2.字體與文本

現在開始，不做過多解釋，直接看我代碼就行了，大體使用都已經說明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            /*文字顏色*/
            color: red;
            /*文字加粗*/
            font-weight: bolder;
            /*文字字體*/
            font-family: 楷體;
            /*文字大小*/
            font-size: 30px;
            /*文字樣式*/
            font-style: italic;

            /*font: italic bolder 30px 楷體;*/
        }
        p{
            /*首行縮進*/
            text-indent: 2em;
            /*行高*/
            line-height: 30px;
        }
        #div1{
            /*div默認的寬度是父窗體的百分之百*/
            /*文字居中方式*/
            text-align: center;
        }
        #div2 img{
            /*設置圖文位置*/
            vertical-align: middle;
        }
        /*#div3 a{*/
        /*    !*去掉文件下劃線*!*/
        /*    text-decoration: none;*/
        /*}*/
    </style>
</head>
<body>
    <div id="div1">今天是星期一</div>
    <p>
        《靜夜思》沒有奇特新穎的想象，沒有精工華美的辭藻，只是用敘述的語氣，寫遠客思鄉之情，然而它卻意味深長，耐人尋繹，千百年來，如此廣泛地吸引着讀者。<br>全詩從“疑”到“舉頭”，從“舉頭”到“低頭”，形象地揭示了詩人<b>內心活動</b>，鮮明地勾勒出一幅生動形象的月夜思鄉圖，抒發了作者在<u>寂靜的月夜思念家鄉</u>的感受。客中深夜不能成眠、短夢初回的情景。這時庭院是寂寥的，透過窗戶的皎潔月光射到牀前，帶來了冷森森的秋宵寒意。詩人朦朧地乍一望去，在迷離恍惚的心情中，真好像是地上鋪了一層白皚皚的濃霜；可是再定神一看，四周圍的環境告訴他，這不是霜痕而是月色。月色不免吸引着他擡頭一看，一輪娟娟素魄正掛在窗前，秋夜的太空是如此明淨。秋月是分外光明的，然而它又是清冷的。對孤身遠客來說，最容易觸動旅思秋懷，使人感到客況蕭條，年華易逝。凝望着月亮，也最容易使人產生遐想，想到故鄉的一切，想到家裏的親人。想着，想着，頭漸漸地低了下去，完全浸入於沉思之中。
    </p>
    <div id="div2">
        《靜夜思》沒有奇特新穎的想象，沒有精工華美的辭藻，只是用敘述的語氣，寫遠客思鄉之情，然而它卻意味深長，耐人尋繹，千百年來，如此廣泛地吸引着讀者。<br>全詩從“疑”到“舉頭”，從“舉頭”到“低頭”，形象地揭示了詩人<b>內心活動</b>，鮮明地勾勒出一幅生動形象的月夜思鄉圖，抒發了作者在<u>寂靜的月夜思念家鄉</u>的感受。<img src="./img/李白.jpg">客中深夜不能成眠、短夢初回的情景。這時庭院是寂寥的，透過窗戶的皎潔月光射到牀前，帶來了冷森森的秋宵寒意。詩人朦朧地乍一望去，在迷離恍惚的心情中，真好像是地上鋪了一層白皚皚的濃霜；可是再定神一看，四周圍的環境告訴他，這不是霜痕而是月色。月色不免吸引着他擡頭一看，一輪娟娟素魄正掛在窗前，秋夜的太空是如此明淨。秋月是分外光明的，然而它又是清冷的。對孤身遠客來說，最容易觸動旅思秋懷，使人感到客況蕭條，年華易逝。凝望着月亮，也最容易使人產生遐想，想到故鄉的一切，想到家裏的親人。想着，想着，頭漸漸地低了下去，完全浸入於沉思之中。
    </div>
    <div id="div3">
        <a >python基礎</a>
        <a href="#">python web</a>
        <a href="#">python 爬蟲</a>
        <a href="#">python ai</a>
        <a href="#">python 就業</a>
    </div>
</body>
</html>

3.邊框

圓角這東西就是，圓角。把矩形的的部分變成圓角
border 也可以複合寫法順序沒有關係
如果你想單單設計某個邊框上面的樣式可以 border-top 實現，但是你要取消複合寫法，不然會衝突。

六、盒子 div 屬性

什麼是盒子呢？學過html的應該知道，這裏還是簡單的說明下。

比如一個抽屜，你可以放一本矩形書本進去。抽屜就是div，書就是物體元素。書也是可以作爲div，然後裏面在嵌套。俄羅斯套娃

元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：

把元素叫做盒子，設置對應的樣式分別爲：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

一個盒子寬度等於 content（width） +padding（填充）+border（邊框粗細）
高度同理
畫圖比較醜，你品，是不是這個道理

border外面就是margin了，margin是盒子跟盒子之間的距離，默認最外層盒子是瀏覽器，所以想要居中的話margin: 0 auto;即可
0 代表距離上面爲0，auto 左邊距離居中相對於另外個盒子

案例操作，最好手動調節下參數，可以看下效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #content{
            width: 250px;
            height: 400px;
            border: 2px solid red;
            border-radius: 20px;
            margin: 0 auto;
            padding: 25px;
        }
        #content img{
            width: 250px;
        }
        .title{
            text-align: center;
            font-size: 30px;
            font-family: 楷體;
            font-weight: bolder;
            margin: 30px 0px;
        }
        .des{
            text-align: center;
            margin: 30px 0px;
        }
        .ziying{
            background-color: red;
            color: white;
            margin-right: 50px;
        }

    </style>
</head>
<body>
    <div id="content">
        <div>
            <img src="./img/bike.jpg">
        </div>
        <div class="title">我的自行車</div>
        <div class="des">
            <span class="ziying">自營</span><span>自營|升降調節</span>
        </div>
        <div class="des">
            <span class="ziying">自營</span><span>自營|升降調節</span>
        </div>
    </div>
</body>
</html>

七、塊級，行內，行內塊元素

元素就是標籤，佈局中常用的有三種標籤，塊元素、行內元素、行內塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。

標籤類型	特徵	舉例
塊級元素	1.支持全部樣式 2.如果沒有設置寬度，默認的寬度爲父級寬度的100% 3.盒子佔據一行	div、p、ul、li、h1~h6、d1、dt、dd
行內元素	1.支持部分樣式（不支持寬、高、margin上下，padding上下） 2.寬度由內容決定 3.盒子並在一行 4.代碼換行，盒子之間產生間距	a、span、em、b、strong、i
行內塊元素	1.支持全部樣式 2.如果沒有設置寬高,寬高由內容決定 3.盒子並在一行，代碼換行，盒子會產生間距	是新增的元素類型，現有元素沒有歸於此類別，可以用display屬性將塊元素或者行內元素轉換成這種元素。img

1. 塊級元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>

</head>
<body>
<!--    塊級標籤 自己獨佔一大半-->
    <div id="div1">div1</div>

    <div id="div2">div2</div>

</body>
</html>

可以看到div1 明明右邊還有很多空白，缺不讓div2在一行
我這邊打開了電腦管家放到這裏作空間對比

2. 行內元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div3 span{
            background-color: red;
            color: white;
            width: 200px;
        }
    </style>

</head>
<body>
<!--    塊級標籤 自己獨佔一大半-->
    <div id="div1">div1</div>

    <div id="div2">div2</div>
    <div id="div3">
        <!--
        行內標籤：與其它標籤分享空間，不支持設置寬和高
        -->
        <span>span1</span>
        <span>span2</span>
    </div>
</body>
</html>

可以看到，設置了span標籤的寬度，但是沒有變化，div3 盒子由span塊級元素撐開，你可以將span標籤裏面的內容寫多點，你就能能明白了。
在不設置div3 盒子的高度和寬度的情況下，塊級元素內容多少決定了外層盒子大小。一定要動手測試，否則領悟不到。

行內塊元素之間會有間隙，最好邊看邊看頭上的總結.

3.行內塊元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div3 span{
            background-color: red;
            color: white;
            width: 200px;
        }
        #div4 img{
            width: 100px;
        }
    </style>

</head>
<body>
<!--    塊級標籤 自己獨佔一大半-->
    <div id="div1">div1</div>

    <div id="div2">div2</div>
    <div id="div3">
        <!--
        行內標籤：與其它標籤分享空間，不支持設置寬和高
        -->
        <span>span1</span>
        <span>span2</span>
    </div>
    <div id="div4">
        <img src="img/toudianping.jpg">
        <img src="img/toudianping.jpg">
    </div>
</body>
</html>

4. display屬性

值選項	描述
none	元素隱藏且不佔位置
block	元素以塊元素顯示
inline	元素以內聯元素顯示
inline-block	元素以內聯塊元素顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1, #div2 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        #div3 span {
            background-color: red;
            color: white;
            width: 500px;
        }

        #div4 img {
            width: 300px;
            /*消失不顯示了*/
            display: none;
        }

        #div5, #div6 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*行內塊*/
            /*display: inline-block;*/
            /*行內*/
            /*display: inline;*/
        }
        #div7 span{
            width:200px;
            border: 1px solid red;
            /*display: inline-block;*/
            /*塊*/
            display: block;
        }
    </style>
</head>
<body>
<!--
塊級標籤：自己獨佔一大塊，不與其他標籤分享空間
-->
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">
    <!--
    行內標籤：與其他標籤分享空間
        不支持設置寬和高
    -->
    <span>span1</span>
    <span>span2</span>
</div>
<div id="div4">
    <!--
    行內塊：與其他標籤分享空間，支持設置寬和高
    -->
    <img src="./img/toudianping.jpg">
    <img src="./img/toudianping.jpg">
</div>
<hr>
<div id="div5">div5</div>
<div id="div6">div6</div>
<hr>
<div id="div7">
    <span>span1</span>
    <span>span2</span>
</div>
</body>
</html>

可以看代碼進行操作，最好對比下 #div7 span 和#div3 span的設置
就可以明白，行內元素，外層盒子只能通過內容大小撐開，並且設置寬度沒有用處的道理。

需要值得注意的是，none還有這些塊級轉換的應用場景。

比如，是否經常遇到，需要點擊某個目錄纔會顯示某些內容。
通常就塊級元素之間轉換造成的結果。

5. 塊級元素相互轉換案例【面板切換】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        ul {
            list-style: none;
            width: 800px;
            margin: 0 auto;
        }
        li {
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            float: left;
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        .panle{
            width: 715px;
            background-color: #00F0F0;
            clear: both;
            display: none;
            text-align: center;
        }
        /*清除子浮動對父高度的影響0*/
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
        :target{
            display: block;
        }
    </style>
</head>
<body>
<ul class="clearfix">
         <li><a href="#test1">首頁</a></li>
         <li><a href="#">公司簡介</a></li>
         <li><a href="#">解決方案</a></li>
         <li><a href="#">公司新聞</a></li>
         <li><a href="#">行業行動</a></li>
         <li><a href="#">招賢納士</a></li>
         <li><a href="#">聯繫我們</a></li>
        <div class="panle" id="test1">
            測試測試<br>
            測試測試<br>
            測試測試<br>
            測試測試<br>
        </div>
</ul>
</body>
</html>

需要知道的是，html的知識中有錨點操作
將測試測試文字所在一行設置爲none 不顯示

通過僞類選擇器 :target{} 獲取所有a標籤的錨點操作
a標籤錨點，我這裏就設置了一個test1指向 id=“test1”，當我點擊的時候，將a標籤錨點對象 display 設置爲 block，這樣就顯示了。

至於下圖的清除浮動方法 clearfix:after和開啓浮動float 在接下來的浮動專欄會講到

當我們點擊首頁的時候出現

八、元素溢出overflow

當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式，設置的方法是通過overflow屬性來設置。

	overflow的設置項
visible	默認值，內容不會被修剪，會呈現在元素框之外
hidden	內容會被修剪，並且其餘內容是不可見的
scroll	內容會被修剪，但是瀏覽器會有滾動條顯示其餘內容，就像瀏覽器
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘內容

text-overflow 屬性規定當文本溢出包含元素時發生的事情

首先我們來看下，文本超出盒子發生的問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: bisque;
            overflow: scroll;
            /*隱藏*/
            /*overflow: hidden;*/
            /*滾動*/
            overflow: scroll;
            /*auto*/
            /*overflow: auto;*/
        }
    </style>
</head>
<body>
    <div id="div1">
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
        今天是六一兒童節
    </div>
    <hr>
</body>
</html>

可以看到，文字超出去了

1.hidden 超出元素隱藏

現在我們通過overflow的設置一下先設置隱藏hidden
把註釋取消了

2.scroll 滾動條查看類瀏覽器

再嘗試滾動 scroll

就像瀏覽器一樣，可以拖動，爲什麼左右沒有拖動，因爲需要額外設置，這裏就不設置。

3.auto 滾動查看

修改原來代碼，註釋別的

相比scroll少了橫着的一個滾動條

4.以…隱藏多餘的文字

text-overflow 固定格式，記住就行。
我們經常在逛淘寶的時候，會看有些物品的稱呼是以....結尾省略的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 20px;
            line-height: 20px;
            background-color: chartreuse;

            /*中文不自動換行*/
            white-space: nowrap;
            /*多餘的隱藏*/
            overflow: hidden;
            /*多餘的用...代替*/
            text-overflow: ellipsis;

        }
    </style>
</head>
<body>
    <hr>
    <div id="div1">
        【多款可選】夏日連衣裙女裝套裝2020年夏季新款小雛菊短袖t恤套裝復古雪紡碎花半身裙顯瘦潮 圖片色 L
    </div>
</body>
</html>

九、浮動

浮動就是float ，以我理解就是脫離基本層【脫離文檔流】，到浮動層。

1.文檔流

文檔流，是指盒子按照HTML標籤編寫的順序依次從上到下，從做到右排列
塊元素佔一行，行內元素在一行之內從到右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置。

這裏不太好舉例說明，後面大家就知道了

2.浮動特性

1、左右浮動

浮動元素有左浮動(float:left)和右浮動(float:right)兩種

我們先來看，沒有開啓浮動的效果，這裏使用的塊級元素div，獨佔一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            /*浮動，脫離了文檔流*/
            /*float: right;*/
            /*float: left;*/
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color:blue;
            /*float: left;*/
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>
</html>

可以看到，兩個盒子並沒有在一行

開啓浮動，修改代碼

可以看到，我們開啓浮動是div1盒子設置爲float:left,脫離文檔流浮動在左側
但是文字還是受裏面div1盒子的影響，在盒子之外，這樣我們可以作文字環繞效果，比如，詩人李白頭像作爲div1盒子，然後div2盒子裏面文字寫介紹，就可以形成文字環繞的效果。

現在我們設置爲右浮動，修改代碼

可以看到，原本div是塊級元素，應該需要遵循，獨佔一行。div1脫離了文檔流，到了浮動層。所以div2 不受div1塊級元素的影響，佔據了第一行

應用場景，比如我們需要多個div塊級元素裏面裝照片，並且需要在一行，就可以將2個盒子設置成浮動
消除了塊級元素，獨佔一行的約束
修改代碼，兩個盒子都開啓左浮動

可以看到，兩個盒子並列在一起了，在一行

2、消除浮動【清除文檔流】

浮動的元素會向左或向右浮動，碰到父元素邊界、浮動元素、未浮動的元素才停下來

第一個盒子div1是開啓了浮動脫離了文檔流，本來div2根據原則，獨佔一行，佔據第一行（div1脫離文檔流第一行空出來了），但是我在盒子div2裏寫入了指令clear:both,清除浮動造成的影響

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            /*浮動，脫離了文檔流*/
            float: left;
            /*float: left;*/

        }
        #div2{
            clear: both;
            width: 200px;
            height: 200px;
            background-color:blue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>
</html>

可以看到兩者都在新的一行

應用場景，非常重要！！！！！！
大家都玩過三國殺吧，下圖是我畫的模擬三國殺的圖示
上面爲第一個陣營，下面爲第二個陣營，中間一個vs

是不是以爲外圍兩個div1 和 div2 肯定是分別佔據瀏覽器第一行和第二行，因爲是塊級元素。
但是，注意了！！我們在裏面裝照片的盒子都開啓左浮動，所以兩者不會在同一水平線上！！沒有清除兩者之間浮動影響！！
下面是三國殺代碼，沒有圖片的自己隨便找個圖片嘗試

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

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box{
            width: 150px;
            border: 1px black solid;
            background: black;
            border-radius: 20px;
            color: white;
            float: left;
            margin-left: 20px;
        }
        .box>img{
            margin: 0 18px;
        }
        .name{
            text-align: center;
            font-size: 20px;
        }
        #vs{
            font-size: 50px;
            margin: auto 240px;
        }
        /*.inner2{*/
        /*    clear: both;*/
        /*}*/

    </style>
</head>
<body>
        <div id="outer">
            <div class="inner1">
                <div  class="box" >
                    <img src="img/關羽.png" >
                    <p class="name">關羽</p>
                </div>
                <div  class="box" >
                    <img src="img/劉備.png" >
                    <p class="name">劉備</p>
                </div>
                <div  class="box" >
                    <img src="img/華佗.png" >
                    <p class="name">華佗</p>
                </div>
            </div>

            <div id="vs"><p>VS</p></div>

            <div class="inner2">
                <div  class="box" >
                    <img src="img/呂布.png" >
                    <p class="name">呂布</p>
                </div>
                <div  class="box" >
                    <img src="img/諸葛亮.png" >
                    <p class="name">諸葛亮</p>
                </div>
                <div  class="box" >
                    <img src="img/華佗.png" >
                    <p class="name">貂蟬</p>
                </div>
            </div>
        </div>
</body>
</html>

我註釋了這個第二個盒子inner2的類選擇器內容，爲了體現剛剛咱們理解的兩個塊級元素不就各自獨佔一行的思想

我們看下結果，因爲，div1盒子裏面的盒子開啓浮動，只要存在開啓浮動的盒子都有文檔流影響，所以需要清除文檔流影響

將註釋的代碼，取消註釋

清除inner2 第二個大盒子受到所有文檔流的影響。大家觀察到VS依然存在問題，回頭看下代碼
發現vs 也是一個盒子，所以也需要消除文檔流，哪是不是還需要寫一個選擇器再寫clear:both
太麻煩了，如果有好多盒子，要寫一堆clear:both！！！往後看

第一種方法
我們想想，如果第一行盒子無論裏面還是外面開啓了浮動，就有文檔流影響，
前面的解決方法是第二個盒子寫入選擇器 clear：both 就能消除文檔流影響，是不是這個道理？
第二種方法
哪我寫一個空盒子，在需要消除浮動的地方一放不就美滋滋？
改造代碼

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

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box{
            width: 150px;
            border: 1px black solid;
            background: black;
            border-radius: 20px;
            color: white;
            float: left;
            margin-left: 20px;
        }
        .box>img{
            margin: 0 18px;
        }
        .name{
            text-align: center;
            font-size: 20px;
        }
        #vs{
            font-size: 50px;
            margin: auto 240px;
        }
        .clean{
            clear: both;
        }

    </style>
</head>
<body>
        <div id="outer">
            <div class="inner1">
                <div  class="box" >
                    <img src="img/關羽.png" >
                    <p class="name">關羽</p>
                </div>
                <div  class="box" >
                    <img src="img/劉備.png" >
                    <p class="name">劉備</p>
                </div>
                <div  class="box" >
                    <img src="img/華佗.png" >
                    <p class="name">華佗</p>
                </div>
            </div>
            
            <div class="clean"></div>
            
            <div id="vs"><p>VS</p></div>
            
             <div class="clean"></div>
            
            <div class="inner2">
                <div  class="box" >
                    <img src="img/呂布.png" >
                    <p class="name">呂布</p>
                </div>
                <div  class="box" >
                    <img src="img/諸葛亮.png" >
                    <p class="name">諸葛亮</p>
                </div>
                <div  class="box" >
                    <img src="img/華佗.png" >
                    <p class="name">貂蟬</p>
                </div>
            </div>
        </div>
</body>
</html>

可以看到效果一樣，這樣還更好用！！！

3、文字環繞

使用的時候換成你們自己的圖片，即可測試
其實文字環繞，在前文浮動特性中的左右浮動已經提到了，這裏就簡單說明下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 500px;
        }
         #div1 img{
             float: right;
         }

    </style>
</head>
<body>
    <div id="div1">
        李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。是屈原之後最具個性特色、最偉大的浪漫主義詩人。有“詩仙”之美譽，與杜甫並稱“李杜”。<img src="./img/toudianping.jpg">其詩以抒情爲主，表現出蔑視權貴的傲岸精神，對人民疾苦表示同情，又善於描繪自然景色，表達對祖國山河的熱愛。詩風雄奇豪放，想像豐富，語言流轉自然，音律和諧多變，善於從民間文藝和神話傳說中吸取營養和素材，構成其特有的瑰瑋絢爛的色彩，達到盛唐詩歌藝術的巔峯。存世詩文千餘篇，有《李太白集》30卷李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。李白（701～762），字太白，號青蓮居士。。
    </div>
</body>
</html>

3.清除浮動的三種方式總結

浮動已經在上面的 清楚浮動【清除文檔流】那節已經講了兩種方法，也就是第二和第三種，所以不詳細講了，另外補充第三種方式一個案例。

1、給父類元素設置固定高度

缺點:如背景顏色造成的樣式和內容大小不貼切

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            background-color: red;
            color: white;
            /*height: 40px;*/
        }
        #div2 {
            float: left;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            你好你好你好
        </div>
    </div>
</body>
</html>

可以看到沒有任何東西

改造代碼，給外層盒子設置高度

可以看到出來了。缺點:如背景顏色造成的樣式和內容大小不貼切

2、通過編寫選擇器

通過編寫選擇器，裏面加入clear:both
這個方法在前面已經提到了，三國殺案例
就是在需要清除浮動的地方，編寫類選擇器，缺點:如果多個盒子需要編寫好多選擇器。

3、使用成熟的清除浮動樣式

分爲兩種，第一種編寫一個div盒子，編寫選擇器內容如

在需要清除浮動的地方加入盒子即可，參考案例三國殺，也是在前面，已經非常詳細的說明了。

第二種，更加成熟的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        ul {
            list-style: none;
            width: 800px;
            margin: 0 auto;
            background-color: chartreuse;

        }

        li {
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            float: left;
        }

        /*清除子浮動對父高度的影響0*/
        /*.clearfix:after{
            content: "";
            display: table;
            clear: both;
        }*/
    </style>
</head>
<body>
<ul class="clearfix">
    <li>首頁</li>
    <li>登錄</li>
    <li>註冊</li>
</ul>
</body>
</html>

可以看代碼，我們設置li標籤浮動，產生了文檔流影響
裝載li標籤的ul標籤盒子，兩個都是塊級元素，li設置了，但是ul沒有開啓浮動，應該是這樣的，背景顏色看不到
因爲浮動影響。

於是，你想哎哎清除浮動影響，可以設置開啓浮動影響父級元素設置個高度不就可以了嗎，也就是第一種方法
好那麼，我們設置一個高度
改造代碼

發現背景顏色，跟裏面的不貼切，豈不是你要調試半天？？？？？

所以引入固定格式
取消這邊註釋代碼

觀察這裏的代碼，這兩搭配

發現完美的貼切

對比這兩種方法，其實第一種設置空div代碼多起來也比較繁瑣，但是容易懂，可以作爲2個陣營劃分時候用

第二中更加成熟的方法，僞類選擇器，比較成熟，只是難以理解而已。

4.總結方法【應用場景】

一定要弄清楚文檔流，以及三種清楚浮動【文檔流影響】方式

場景可以參考我的三國殺案例

編寫此文章，花費了好4個小時，還沒有算上寫思維導圖。希望大家給贊就好了！QAQ

十、定位

我們在前面知道了浮動，浮動可以解決左右佈局問題，但是在頁面佈局過程當中，會遇到特定位置，這個時候需要用定位。在之前可以通過background-position給背景定位，現可以通脫position，css通用定位。

定位置選項	說明
relative	相對定位，參照物是父元素
absolute	絕對定位，參照物是整個頁面
fixed	固定定位，參照物是瀏覽器窗口
static	默認值，沒有定位，遵循文檔流

1. 相對定位

相對定位參照物是父元素 relative 沒有脫離文檔流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            margin:  0 auto;
            border: 1px solid red;
        }
        div img{
            position: relative;
            left: 100px;
            top: 100px;
        }
    </style>

</head>
<body>
    <div>
        <img src="../toudianping.jpg">
        <p>我是不可能打工的......</p>
    </div>
</body>
</html>

來看按下代碼說明

可以看到的確是居中的，子元素圖中照片只有開啓了定位，使用top和left就能產生特定的定位，子元素現在是相對於父元素紅色框，可以設置左邊距。和上間距。

2. 絕對定位

絕對定位參照是整個頁面 absolute 脫離文檔流
脫離文檔流，文字直接上去第一行開始

1、相對body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            margin:  0 auto;
            border: 1px solid red;
        }
        div img{
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>

</head>
<body>
    <div>
        <img src="../toudianping.jpg">
        <p>我是不可能打工的....................看我！</p>
    </div>
</body>
</html>

2、相對div 父子設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            margin:  0 auto;
            border: 1px solid red;
            position: relative;
        }
        div img{
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>

</head>
<body>
    <div>
        <img src="../toudianping.jpg">
        <p>我是不可能打工的....................看我！</p>
    </div>
</body>
</html>

3. 固定定位

固定定位參照物是瀏覽器窗口 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 5000px;
            margin:  0 auto;
            border: 1px solid red;
            /*position: relative;*/
        }
        div img{
            position: fixed;
            left: 100px;
            top: 100px;
        }
    </style>

</head>
<body>
    <div>
        <img src="../toudianping.jpg">
        <p>我是不可能打工的....................看我！</p>
    </div>
</body>
</html>

不太好說明，可以動手試試，就像我們平時瀏覽網頁，右下角總有廣告，我們怎麼上下滑動都在右下角

4. 默認定位 static 與 z-index

默認值，沒有定位，元素出現在正常的文檔流中，相當於取消定位屬性或者不設置定位屬性 static 這個沒有什麼好說的

定位元素層級:定位元素是浮動的正常的文檔流之上的，可以用z-index屬性來設置元素的層級，後面會用到，比如圖片切換，我們是不是可以設置一個z-index屬性，就能輪流置於頂層。

尾聲

後端工程師必備知識CSS到這裏寫完，關於文章我會持續更新。目前更新了HTML,和CSS，下一篇Javascript

如果本文出現不對的地方，歡迎各位評論指正

CSS_後端工程師必備知識-從入門到勸退詳解-嘔心瀝血撰寫（滑稽）