當(dāng)前位置：首頁 > news >正文

天津單位網(wǎng)站建設(shè)獲取排名

news 2025/7/10 10:04:30

天津單位網(wǎng)站建設(shè),獲取排名,云南省建設(shè)交易中心網(wǎng)站,推廣營銷策劃文章目錄前言相關(guān)概念【了解】腳本語言什么是腳本語言腳本語言有什么特點常見的腳本語言什么是動態(tài)語言，什么是靜態(tài)語言動態(tài)語言和靜態(tài)語言兩者之間有何區(qū)別CSSCSS是什么CSS的特點一、CSS代碼怎么寫基本語法規(guī)則引入方式內(nèi)部樣式內(nèi)聯(lián)樣式表外部樣式代碼風(fēng)格二、CSS的…

文章目錄

- 前言
- 相關(guān)概念【了解】
- - 腳本語言
  - - 什么是腳本語言
    - 腳本語言有什么特點
    - 常見的腳本語言
    - 什么是動態(tài)語言，什么是靜態(tài)語言
    - 動態(tài)語言和靜態(tài)語言兩者之間有何區(qū)別
  - CSS
  - - CSS是什么
    - CSS的特點
- 一、CSS代碼怎么寫
- - 基本語法規(guī)則
  - 引入方式
  - - 內(nèi)部樣式
    - 內(nèi)聯(lián)樣式表
    - 外部樣式
  - 代碼風(fēng)格
- 二、CSS的選擇器
- - 基礎(chǔ)選擇器
  - - 1.標(biāo)簽選擇器
    - 2.類選擇器
    - 3.id選擇器
  - 復(fù)合選擇器
  - - 1.后代選擇器
    - 2.子選擇器
    - 3.并集選擇器
    - 4.偽類選擇器
- 三、CSS的常見元素屬性及值
- - 字體屬性
  - - 設(shè)置字體家族
    - 設(shè)置字體大小
    - 設(shè)置字體粗細(xì)
    - 設(shè)置文字傾斜
  - 文本屬性
  - - 設(shè)置文本顏色
    - 設(shè)置文本對齊
    - 設(shè)置文本裝飾
    - 設(shè)置文本縮進(jìn)
    - 設(shè)置文本行高
  - 背景屬性
  - - 設(shè)置背景顏色?
    - 設(shè)置背景圖片?
    - 設(shè)置背景平鋪
    - 設(shè)置背景位置
    - 設(shè)置背景尺寸
- 四、其他
- - 圓角矩形?
  - - 生成圓角矩形
    - 生成圓形
  - 元素的顯示模式
  - - 塊級元素
    - 行內(nèi)元素
  - CSS盒子模型
  - - 邊框（border）
    - 內(nèi)邊距（padding）
    - 外邊距
  - 彈性布局
- 五、小結(jié)
- 參考

前言

與html一樣，東西很多，比較零碎，但是比較散，不需要刻意去記

這里邊，對于后端學(xué)習(xí)，主要掌握類選擇器即可。

通過個人博客那里進(jìn)行練習(xí)、文字垂直居中

一、CSS代碼怎么寫

基本語法規(guī)則

選擇器+若干屬性聲明：

選擇器 + {一條/多條聲明}

選擇器決定針對誰修改
聲明決定修改啥. 聲明的屬性是鍵值對**. 使用 ; 區(qū)分鍵值對,** 使用 : 區(qū)分鍵和值.

css的注釋是/**/，這里邊的注釋是不能嵌套的。

CSS與HTML類似，都只是簡單的聲明有什么，但是沒有具體的邏輯。

那么css代碼寫到哪里呢？又是怎么運行的呢？

簡而言之，CSS代碼的執(zhí)行最終是需要內(nèi)嵌到html里邊的。所以問題就轉(zhuǎn)移到了我們怎么內(nèi)嵌這些代碼。

主要有三種方式，分為內(nèi)部樣式表、行內(nèi)樣式表、外部樣式。

實際開發(fā)中，一般使用外部樣式來寫CSS，讓html和CSS相互分離。而初學(xué)CSS，我們主要使用內(nèi)部樣式表，比較簡單方便。

引入方式

內(nèi)部樣式

使用stylr標(biāo)簽，直接把CSS寫到文件中。此時的style標(biāo)簽可以放到任意位置，一般建議放到head標(biāo)簽中。

優(yōu)點：能做到樣式與頁面結(jié)構(gòu)分離

缺點：當(dāng)css內(nèi)容較多時，分離不徹底。

例如：

<html><head></head><body><!--style標(biāo)簽可以放到代碼的任意部分--><style>p{color: red;}</style><p>這是一個段落</p></body>
</html>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-4FujrDzb-1678519214120)(F:\typora插圖\image-20230311084111813.png)]$
$再比如：[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-4U0C7m9T-1678519214121)(F:\typora插圖\image-20230311084321554.png)]$

內(nèi)聯(lián)樣式表

通過 style 屬性, 來指定某個標(biāo)簽的樣式

說明：只適合于寫簡單樣式. 只針對某個標(biāo)簽生效.

缺點: 不能寫太復(fù)雜的樣式.
這種寫法優(yōu)先級較高, 會覆蓋其他的樣式. 內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式

例如：

<html><head></head><body><!--style標(biāo)簽可以放到代碼的任意部分--><p style="color:green;font-size: 50px;">這是一個段落</p></body>
</html>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ejxOOq15-1678519214122)(F:\typora插圖\image-20230311084617817.png)]$

外部樣式

把css單獨創(chuàng)建一個 css 文件，使用 link 標(biāo)簽引入 css 。

這也是實際開發(fā)中使用最多的一種方式。

而當(dāng)前只是為了熟悉語法規(guī)則，所以使用的內(nèi)部樣式/內(nèi)聯(lián)樣式

<link rel="stylesheet" href="[CSS文件路徑]">

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS練習(xí)</title><link rel="stylesheet" href="style.css">
</head><body><!--style標(biāo)簽可以放到代碼的任意部分--><p>這是一個段落</p><p>這是另一個段落</p></body>
</html>

p{color: blue;font-size: 100px;
}

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-a7L29zGb-1678519214123)(F:\typora插圖\image-20230311085629843.png)]$
在這里插入圖片描述

代碼風(fēng)格

推薦使用展開風(fēng)格

緊湊風(fēng)格和展開的，更推薦使用展開的風(fēng)格。
```
p{ color: red; font-size: 30px;}
p {color: red;font-size: 30px;
}
```
大小寫不區(qū)分，但是開發(fā)統(tǒng)一使用小寫字母
空格規(guī)范：冒號后加空格、選擇器和{之間也加空格

css基本的代碼結(jié)構(gòu)組成——選擇器+屬性我們已經(jīng)知道，下邊就開始正式學(xué)習(xí)。

二、CSS的選擇器

選擇器的分類：CSS2標(biāo)準(zhǔn)下，分為基礎(chǔ)選擇器和復(fù)合選擇器兩大類。

基礎(chǔ)選擇器

1.標(biāo)簽選擇器

在{前邊寫標(biāo)簽名字，意味著選中當(dāng)前頁面中所有的指定標(biāo)簽！！

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-juJvRR35-1678519214125)(F:\typora插圖\image-20230226140419371-16784965045842.png)]$
$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-afj056TC-1678519214125)(F:\typora插圖\image-20230311090503170.png)]$

但是有很多時候，我們想要p標(biāo)簽中部分段落設(shè)置成這個屬性，這顯然不太合適，這個時候類選擇器的使用就非常有必要了。

2.類選擇器

可以手動創(chuàng)建CSS類，手定指定哪些元素應(yīng)用這個類（與java里的類不同，只是一個屬性的集合）

定義類需要使用.開頭；

引用這個類時，需要通過class這個屬性，不需要再加點。

例如：

<html><head></head><body><style>.one{color:red;}.two{color: green;}.three{color: pink;}</style ><div class="one">這是第一個div</div><div class="two">這是第二個div</div><div class="three">這是第三個div</div></body>
</html>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ndLPJwuA-1678519214126)(F:\typora插圖\image-20230311091129281.png)]$

注意：同一個div可以同時引用多個類，多個類之間使用空格分割，可以層疊（如果是同一個類型的，（都是顏色的話）最終效果是最后一個樣式）。

改動的代碼：

<div class="one four">這是第一個div</div>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-asNyRGlb-1678519214126)(F:\typora插圖\image-20230311091344556.png)]$

這里我們還可以通過瀏覽器的控制臺進(jìn)行查看

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-iAv4Olfl-1678519214127)(F:\typora插圖\image-20230311091731033.png)]$

3.id選擇器

HTML頁面中的每個元素都可以設(shè)置一個唯一的id，作為元素的身份標(biāo)識。

給元素安排id之后，就可以通過id選中對應(yīng)的元素了。

與類選擇器不同，id選擇器只針對唯一的元素生效，而類選擇器是可以讓多個元素應(yīng)用到同一個類的。

使用方式：定義時使用#表示id選擇器；使用時不用帶#

例如：

<html><body><style>#onediv{color: red;}#twodiv{color: greenyellow;}#threediv{color: blueviolet;}</style><div id="onediv">這是第一個div</div><div id="twodiv">這是第二個div</div><div id="threediv">這是第三個div</div><div id="onediv">這是第四個</div></body>
</html>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-zZ1dWWCA-1678519214132)(F:\typora插圖\image-20230311092537862.png)]$
$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-xg27MRik-1678519214134)(F:\typora插圖\image-20230311092710969.png)]$

復(fù)合選擇器

CSS除了支持簡單的基礎(chǔ)選擇器，還支持更復(fù)雜一些的“復(fù)合選擇器”，其實也就是將前邊的基礎(chǔ)選擇器進(jìn)行組合。

1.后代選擇器

把前邊的多個簡單的基礎(chǔ)選擇器，組合一下（可以是標(biāo)簽、類、Id的任意組合）

標(biāo)簽之間采用空格進(jìn)行分割。

例：標(biāo)簽+標(biāo)簽

<html>
<head></head><body></body><style>ul li{color:antiquewhite;}</style><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul></body>
</html>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-XnwnhAIv-1678519214135)(F:\typora插圖\image-20230311093257112.png)]$

這里的后代選擇器就是：先寫父標(biāo)簽、再寫子標(biāo)簽

注意：這里li只要是ul的后代即可，不一定是子元素，孫子也可以，重孫也可以……

例：類選擇器+標(biāo)簽

<html>
<head></head><body></body><style>/*ul li{color:antiquewhite;}*/.onediv li{color: red;}</style><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol><ul class="onediv"><li>aaa</li><li>bbb</li><li>ccc</li></ul></body>
</html>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-C6saXxIu-1678519214136)(F:\typora插圖\image-20230311093923407.png)]$

例：id選擇器+標(biāo)簽

<html>
<head></head><body></body><style>/*ul li{color:antiquewhite;}*/#onediv li{color: red;}</style><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol><ul id="onediv"><li>aaa</li><li>bbb</li><li>ccc</li></ul></body>
</html>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-xh7hHyxp-1678519214137)(F:\typora插圖\image-20230311094104038.png)]$

2.子選擇器

也是把多個簡單的基礎(chǔ)選擇器組合（標(biāo)簽類id選擇器任意組合）

使用>進(jìn)行分割

但是與后代選擇器有所區(qū)別的是：只找匹配的子元素，不找孫子元素

 <body>        </style><ol><li></li><li>bbb</li><li>ccc</li></ol><ul class="onediv"><li>aaa</li><li>bbb</li><li>ccc</li><ol><li>111</li><li>222</li><li>333</li></ol></ul></body>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-BWU7jGwl-1678519214138)(F:\typora插圖\image-20230311095013311.png)]$

3.并集選擇器

使用,進(jìn)行分割，也是將其他簡單選擇器進(jìn)行組合。

效果：多組選擇器，應(yīng)用了同樣的樣式

例如：

        <style>.two{color:green;}    .three{font-size:50px;}.two,.three{font-size:40px;}</style><div class="two three">這是一個段落</div><div class="two">這是另一個段落</div><div class="three">這是另另一個段落</div>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Iu5tKafj-1678519214138)(F:\typora插圖\image-20230311095653498.png)]$

4.偽類選擇器

前邊的選擇器是選中某個元素，偽類選擇器是選中某個元素的某個狀態(tài)。

偽類選擇器有很多，這里我們只介紹兩種：鼠標(biāo)懸停狀態(tài)、鼠標(biāo)點擊狀態(tài)

例如：

        <style>.one:hover{color:blue;font-size:50px;} .one:active{color: cadetblue;font-size: 30px;}</style><div class="one">這是一個段落</div>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Kyao6DkJ-1678519214138)(F:\typora插圖\image-20230311101700502.png)]$

三、CSS的常見元素屬性及值

CSS常見屬性，就是具體樣式的設(shè)置了。樣式涵蓋很多方面，包括不限于大小、位置、顏色、形狀、邊框、特殊濾鏡、過度效果、動畫等。

我們只需要記住些常用的，其他的用到之后再去查即可。

字體屬性

設(shè)置字體家族

eg:

font-family: '微軟雅黑';
font-family: 'Microsoft YaHei';

注意：

最好使用系統(tǒng)自帶的字體，否則還需自己裝上（瀏覽器請求指定的服務(wù)器，獲取指定字體文件，才能正確設(shè)置）
字體名稱可以使用中文，但不建議
如果字體有空格，需要加引號

設(shè)置字體大小

eg:

font-size: 20px;

瀏覽器的每個文字都可以視為一個方框。

若中文：一般是個正方形

若英文阿拉伯?dāng)?shù)字，方框比較窄

注意：當(dāng)我們?nèi)y量時（使用截圖工具），只有我們的瀏覽器縮放設(shè)置和顯示器的縮放設(shè)置都是100%時，才能得到正確結(jié)果，或者說你知道你這兩個設(shè)置的比率然后進(jìn)行計算也可以

注意：

不同的瀏覽器默認(rèn)字號不一樣, 最好給一個明確值. (chrome 默認(rèn)是 16px)
標(biāo)簽需要單獨指定大小

設(shè)置字體粗細(xì)

實際設(shè)置時，有兩種典型的設(shè)置風(fēng)格

1.使用單詞【normal\bold\lighter\bolder】 2.數(shù)字【范圍是1-100】

eg:

font-weight: bold;
font-weight: 700;

設(shè)置文字傾斜

eg:

font-style: italic;/*傾斜*/
font-style: normal;/*正常*/

通過這些樣式，我們其實就可以將一個普通段落設(shè)置h1的格式了

例：將普通段落不通過h1標(biāo)簽設(shè)置成h1的格式

文本屬性

背景知識：計算機(jī)如何表示顏色

顏色是不同波長的光，日?？吹降暮芏喙?#xff0c;都是混合成的，紅綠藍(lán)三原色等比例混合。

所以計算機(jī)表示顏色，可以通過一種典型方式RGB的表示方式。

前端中，給RGB各分配一個字節(jié)，每個字節(jié)的范圍都是0-255/00-FF

實際表示：color:rgb(xx,xx,xx);

通過這三個分量不同比例的搭配，就可以調(diào)和出不同的顏色。

實際上使用哪個顏色，有美工組，不用你操心。若沒有可以自己看到哪個顏色好看，去查它的參數(shù)，使用qq截圖下邊會顯示。例如：

這里邊的牛皮紙的顏色：就可以通過這里的rgb參數(shù)設(shè)置直接拿到

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-24fDAeMq-1678519214139)(F:\typora插圖\image-20230311105223196.png)]$

設(shè)置文本顏色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

其中如果十六進(jìn)制下，每個分量的兩個十六進(jìn)制都相同，就可以把16進(jìn)制縮寫成3位十六進(jìn)制。例如AABBCC==>ABC

不僅是color會遵守這套規(guī)則，其他跟顏色相關(guān)的屬性，也是這樣表示顏色的——單詞、十六進(jìn)制、rgb

設(shè)置文本對齊

text-align: [值];

靠左靠右居中，分別對應(yīng)三個單詞——left、right、center

設(shè)置文本裝飾

text-decoration: [值];

underline 下劃線. [常用]
none 啥都沒有. 可以給 a 標(biāo)簽去掉下劃線.
overline 上劃線. [不常用]
line-through 刪除線 [不常用]

設(shè)置文本縮進(jìn)

text-indent: [值];

單位可以使用 px 或者 em，使用 em 作為單位更好. 1 個 em 就是當(dāng)前元素的文字大小.【element】【可以說他倆都是相對單位】

縮進(jìn)可以是負(fù)的, 表示往左縮進(jìn),不過這樣會導(dǎo)致文字就冒出去了

設(shè)置文本行高

背景知識：通過行高間接設(shè)置行間距

行高=文字高度+行間距

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-fJOgjBX1-1678519214139)(F:\typora插圖\image-20230311111025522.png)]$

line-height: [值];

這里值使用的單位是px

這里我們通過瀏覽器控制臺那里查看效果

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-uI83l1sQ-1678519214139)(F:\typora插圖\image-20230311111520351.png)]$
$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-86dQgtjZ-1678519214140)(F:\typora插圖\image-20230311111559497.png)]$

這里我們設(shè)置可以通過鼠標(biāo)滾輪或者上下方向鍵直接調(diào)整這里的值，看一個動態(tài)的效果

背景屬性

設(shè)置背景顏色?

background-color: [指定顏色]

單詞、rgb、16進(jìn)制數(shù)
默認(rèn)是 transparent (透明) 的. 可以通過設(shè)置顏色的方式修改

設(shè)置背景圖片?

background-image: url(...);

絕對、相對、網(wǎng)絡(luò)路徑均可。url 上可以加引號, 也可以不加

設(shè)置背景平鋪

background-repeat: [平鋪方式]

取值有repeat: 平鋪、no-repeat: 不平鋪、repeat-x: 水平平鋪、repeat-y: 垂直平鋪

默認(rèn)是 repeat

設(shè)置背景位置

background-position: x y;

參數(shù)有三種風(fēng)格:

方位名詞: (top, left, right, bottom)
精確單位: 坐標(biāo)或者百分比(以左上角為原點)【計算機(jī)的坐標(biāo)體系，跟常用的有區(qū)別】
混合單位: 同時包含方位名詞和精確單位

設(shè)置背景尺寸

background-size: length|percentage;

這里可以填具體的數(shù)值: 如 40px 60px 表示寬度為 40px, 高度為 60px,也可以填百分比: 按照父元素的尺寸設(shè)置.

contain：是讓圖片盡可能變大盡量等比例放大

cover:是讓圖片鋪滿

因此，我們可以使用background系列屬性代替，img標(biāo)簽。

四、其他

圓角矩形?

html默認(rèn)都是尖角矩形，這里我們介紹css中圓角矩形的引入和使用。

border-radius: length;

length 是內(nèi)切圓的半徑. 數(shù)值越大, 弧線越強烈

生成圓角矩形

例如：

    <style>div {width: 200px;height: 100px;border: 2px solid green;background-color: #fab;line-height: 90px;text-align: center;border-radius: 10px;}</style><div>哈哈</div>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-pMaabep0-1678519214140)(F:\typora插圖\image-20230311114130716.png)]$

生成圓形

一直調(diào)整參數(shù)即可

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-suPGHq26-1678519214140)(F:\typora插圖\image-20230311114553967.png)]$

元素的顯示模式

塊級元素

display:block

行內(nèi)元素

display:line

任何一個html標(biāo)簽的顯示模式（塊級/行內(nèi)）都是可以設(shè)置的

關(guān)于塊級元素和行內(nèi)元素的區(qū)別：

跨級元素會獨占一行，行內(nèi)元素不獨占一行
塊級元素高度寬度內(nèi)外邊距都是可以設(shè)置的，行內(nèi)元素幺蛾子比較多
塊級元素默認(rèn)寬度是和父元素一樣寬，行內(nèi)元素默認(rèn)寬度和里邊一樣寬

沒必要記，這是前端的面試題，這里就記住一句話：塊級元素比較正常、行內(nèi)元素幺蛾子比較多。一般需要的話，需要把行內(nèi)元素轉(zhuǎn)成塊級元素。

CSS盒子模型

盒子模型描述了html元素基本的布局規(guī)則。

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-uWrznBou-1678519214141)(F:\typora插圖\image-20230311115517450.png)]$

這個盒子由這幾個部分構(gòu)成

邊框 border
內(nèi)容 content
內(nèi)邊距 padding
外邊距 margin

邊框（border）

其中邊框border屬性可以直接設(shè)置四個方向，也可以單獨設(shè)置某個屬性分別是border-left、border-right、border-top、border-bottom

設(shè)置邊框需要設(shè)置三個方面：

粗細(xì): border-width
樣式: border-style, 默認(rèn)沒邊框. solid 實線邊框 dashed 虛線邊框 dotted 點線邊框
顏色 border-color

設(shè)置完尺寸會改變的問題：

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-tTPofTd4-1678519214141)(F:\typora插圖\image-20230311120113042.png)]$

很多時候我們不希望撐大盒子，可能會影響該元素與其他元素的相對位置

解決辦法：使用專門的屬性防止盒子被撐大

box-sizing: border-box;

<style>div {width: 200px;height: 100px;border: 2px solid green;background-color: #fab;line-height: 90px;text-align: center;border-radius: 10px;/*box-sizing:border-box;*/border:10px green solid;/*順序最好不要變*/}</style><div>哈哈</div>

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-aFtoXKjm-1678519214141)(F:\typora插圖\image-20230311142259601.png)]$

內(nèi)邊距（padding）

使用方法有以下兩大種，其中直接寫padding的分支下邊又分為3種

eg:paddng-left/padding-right/padding-top/padding-bottom:10px
eg:padding:xxxxxxxx
1. padding: 10px【上下左右都是10px】
2. padding:10px 20px【上下都是10px,左右都是20px】
3. padding:10px 20px 30px 40 px【表示的順序依次是上右下左（順時針方向）】

只在原來的基礎(chǔ)上加上一個padding-left:10px

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-KGcmTaUZ-1678519214142)(F:\typora插圖\image-20230311142601844.png)]$

只在原來的基礎(chǔ)上加上一個padding:10px

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-UkUFOMX0-1678519214142)(F:\typora插圖\image-20230311142801357.png)]$

只在原來的基礎(chǔ)上加上一個padding:10px 20px

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-l8ZdM9xu-1678519214142)(F:\typora插圖\image-20230311142947212.png)]$

只在原來的基礎(chǔ)上加上一個padding:10px 20px 30px 40px

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-bzVEUlht-1678519214143)(F:\typora插圖\image-20230311143045542.png)]$

外邊距

設(shè)置的是元素跟元素之間的距離

margin的寫法跟padding差不多，也是可以分4個方向設(shè)置。不再演示

注意：這里有個特殊的用法，把margin-left和margin-right設(shè)置auto，實現(xiàn)元素居中

注意和前邊的元素里邊的文字居中設(shè)法text-align設(shè)置居中進(jìn)行區(qū)分。

這里設(shè)置水平居中：margin-left:center ;margin-right-center

那設(shè)置垂直居中是不是可以這樣設(shè)置呢？margin-top:center;margin-bottom:center;很遺憾不可以哦，至于怎么介紹后邊再說。

小結(jié)：

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-xInoOikQ-1678519214143)(F:\typora插圖\image-20230311145709661.png)]$

彈性布局

用來實現(xiàn)頁面布局的?！炯纯刂颇硞€元素放進(jìn)指定位置】

發(fā)展歷史：

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-bt49VvLf-1678519214144)(F:\typora插圖\image-20230311150059888.png)]$

用法：

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-97o01XJb-1678519214144)(F:\typora插圖\image-20230311151451255.png)]$
$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-iHC6HR8r-1678519214144)(F:\typora插圖\image-20230311150409493.png)]$

這里邊常用的屬性是justify-content、align-items

五、小結(jié)

選擇器：

? 簡單選擇器：

基礎(chǔ)選擇器	作用	特點
標(biāo)簽選擇器	能選中所有相同的標(biāo)簽	不能差異化選擇
類選擇器	能選出一個或多個標(biāo)簽	根據(jù)需求選擇最靈活最實用
id選擇器	能選出唯一的標(biāo)簽	同一個id在一個HTML中只能出現(xiàn)一次

? 后代選擇器：

選擇器	作用	注意事項
后代選擇器	選擇后代元素	可以是孫子元素
子選擇器	選擇子代元素	只能是親兒子，隔輩兒的孫子也不行
并集選擇器	選擇相同樣式的元素	更好的做到代碼復(fù)用
偽類選擇器	選擇被選中的元素	重點掌握a:hover的用法

參考

動態(tài)語言與靜態(tài)語言相關(guān)閱讀

CSS科普

查看全文

http://www.risenshineclean.com/news/53071.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网