CSS進階知識掃盲

SS其實遠比我們想象的更復雜、他的任意一個點拿出來可能都可以寫出一篇篇幅不小的文章，往往就能見微知著。所以CSS不僅僅局限于他的名字，層疊樣式表，更像是一個世界，一個網頁中必不可少的重要組成。

圍繞著上面的CSS體系，當然上面的圖可能還不夠全面，但是也能說明CSS的主要構成了。我們簡單說下可能其中一些不為人知的“隱藏屬性”，先留下一個大體的印象，拓展自己的CSS學習體系，后續才能慢慢深入其中。

本篇也是筆者結合《CSS世界》、《CSS權威指南》上下冊、《CSS揭秘》后，總結的一些平時自己忽略的，或者說根本就不了解的地方，實地敲代碼在瀏覽器中實踐而來。

文本排版

先來說字體，聲明字體很簡單，font-family聲明就完事了，但是有時我們可能會看到這樣的聲明：

h1 {
  font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial;
}

這么一大串到底是幾個意思呢，其實只要知道這個font-faimly屬性中包含兩種類型值就能明白了，一種是字體名稱，一種叫做字體族。顧名思義，字體族就是所有字體的一個分類，在CSS世界中一般有以下幾種字體族：

襯線字體。指的就是筆畫開始、結束處有額外的裝飾，并且筆畫粗細不同。
無襯線字體。就是沒有裝飾，筆畫粗細相同。
等寬字體。字形的寬度都相等。
草書字體。模仿人類手寫的字體。
奇幻字體。沒有歸于以上四類字體的其他字體。

所以諸如上面的聲明中的sans-serif、Helvetica指的是字體族，前者是襯線字體，后者是無襯線字體。那么這其中的意思就很明確了，如果系統中有前面的字體，那就使用前面的字體，如果沒有的話，嘗試使用后面的襯線字體，如果沒有，則繼續往后面的聲明中尋找可用字體。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

繼承

一般文本類的屬性都是可以繼承的，例如color，font-size，font-family等。

與之對應有些屬性時不能繼承的，例如border，padding，margin，background等。其實也很好理解這些屬性為何不能繼承，因為一旦這些屬性可以繼承，那么會影響到了整個布局，例如，我們在父元素上加個邊框，但是其子元素，后代元素都繼承了邊框，那就不得不去寫更多的代碼來消除繼承的影響，這樣的結果肯定不是CSS設計的初衷。

line-height

首先需要明確的是line-height是作用在行內元素或者是行內塊級元素上的，我們聲明在塊級框上的line-height實際也是作用于塊級框中的內容的，因此經常可能看到會這么使用：

div {
  line-height: 100px;
  font-size: 20px;
}

于是看到了這樣的效果：

可能下意識的就以為line-height就是作用在塊級盒子上的。實際上呢，他是作用于塊級盒子中的文本上的，如果去除 div 中的文本就會看到其高度就沒有 100px 了，文本也是行內元素，這點想必都是清楚的。

另外則是line-height的值可以為數值、百分比以及長度值，長度值也包括例如em這樣的相對單位。當值不是具體長度值的時候，也就是為數值或者是百分比的時候，相對計算的是其font-size屬性，如果font-size的值為16px，則line-height: 1.5的值就為16 * 1.5，就是24px，百分比值的時候也是這么計算的，不過需要注意的是，百分比值在繼承的時候，會相對當前的font-size來計算，也就是說如果父子元素的font-size值不同，那么line-height計算出來的值也是不一樣的。如果數值的話則沒有這個問題，始終都是相對于數值來計算的。

另外經常會看到這樣的用法，讓文字垂直居中：

div {
  line-height: 100px;
  height: 100px;
}

實際就是只需要line-height就能實現垂直居中，和下面的高度沒有什么關系，而為什么這么設置可以垂直居中呢？這就要來看line-height設置的屬性究竟如何作用的。還是來看上面的圖，當設置line-height的時候，div 的高度就被設置為了 100px，但是這個值是這么分配的，用100px - 1em得到的值分成兩份，分別加到字體的上部分和下部分的區域，這樣字體就平分上下區域，形成一種垂直居中的情況，1em就是字體的大小。當然這里其實是近似的垂直，因為不同字體實際占據的1em的大小是不一樣的，因此分配上下半行高的時候，會有存在偏差，除此之外，下面說的一種屬性也會影響到這種情況。

strut(支柱)

這是個在CSS中看不見，但卻無處不在，有些書中將之稱為空白節點。他是支撐內聯文本存在的支柱。可以通過這種方法來看到他：

.line1 {
  line-height: 0;
  border: 1px solid red;
  font-size: 20px;
}

根據上面學到的關于line-height的知識，當設置為 0 時，文本行高為 0，那么外面的包含塊，也就是父元素理論上也應該是 0，但是我們發現這里的高度是 2，其實這就是所謂支柱的存在了，存在于每個內聯盒子的前面，先記住他，下面會用到。

vertical-align

<div class="line3">
  <img src="../../../assets/css_mindgraphy.png" width="100">
</div>

于是我們發現圖片的下面出現了一點間隙，針對這種情況，vertical-align就可以出場了，只要將vertical-align設置為除默認值之外的位置值就可以了。

.line3 > img {
  vertical-align: top;
}

可以看到圖片下面的間隙沒有了，當然這里除了使用vertical-align以外，還可以設置line-height: 0、font-size: 0都能去解決這個問題。原因就在于上面說到strut，圖片是內聯元素，因此其也存在一個看不見的文本節點，相當于這樣

噢~這樣就知道應該是默認的行高起的作用，對了，還有vertical-align的作用，因為其默認值是baseline也就是基線對齊，可以看到圖片底部可以文本的底部對齊了，那么當設置vertical-align: top、line-height: 0或者font-size: 0，前者相當于將基線對齊變成了頂部對齊，自然不會出現下面的間隙了，后兩者則是將行高去掉，另外則是隱藏了文本大小，那么自然間隙也都不存在了。

除此之外，我們還有一種方法能夠解決這個問題，就是直接改變圖片的display值，將其設置為塊級元素，那么上面所說的空白節點strut自然就不存在了，也能解決這個問題。不過這里改變了display值，可能會影響到布局，所以還是推薦使用上面幾種辦法。

vertical-align除了設置位置值，也就是除了top，middle，bottom這些關鍵字，還可以設置具體的數值，百分數，也可以設置負數值，負數值其實就是向下偏移指定的值，百分數就是相對line-height的值設定。

CSS的全局關鍵字

全局關鍵字就是所有的屬性都能使用的屬性值，總共是有三個inherit，initial，unset。這些關鍵字是CSS3才出現的，在IE11以前和Opera Mini是不支持的。

inherit 就是打破了上面的繼承限制，只要屬性值設置為 inherit，那么就能從父元素繼承這個屬性。

initial 則是將屬性設置為初始值，主要是用于那些沒有預定義的初始值的屬性，例如 color 屬性，默認是取決于用戶代理，就是用戶設置的某個顏色值，而設置為 initial 則會將字體顏色變成黑色。

unset 則是前兩個關鍵字的替代，就是對于繼承的屬性來說，unset 就表示 inherit，而對于不繼承的屬性則表示 initial。

還有一個特殊屬性 all 就只支持這三個關鍵字。all 表示除了 direction 和 unicode-bidi 之外的所有的屬性。因此如果設置了 all: inherit 則表示除了上述兩個屬性外，其他所有的CSS屬性都從其父元素繼承。

選擇符

這里選擇符，就是平常所說的選擇器。選擇器的種類非常多，但大多就是上面列舉的幾種，除此之外，還有一些平時可能忽略的通用選擇符：

* {
  box-sizing: border-box;
}

看起來非常的簡單，但是濫用他會造成一些意向不到的結果。首頁就是他會給所有的元素都添加上對應的屬性，即使這個元素壓根就用不到這個屬性，這樣就造成了一定的性能浪費，另外一點則是非常容易忽視的地方在于他的優先級，也是我們說的特指度，通用選擇器的特指度為0，結合上面的繼承來說，繼承是沒有特指度的，因此你如果用了通用選擇符，然后指望元素通過繼承獲得父元素的繼承屬性，卻會發現不起作用。來看個

* {
  color: green;
}
div#page {
  color: black;
}

<div id="page">
  我是CSS世界的小<em>菜雞</em>
</div>

很明顯，最終看到的菜雞是綠色的。因此這也是非常容易讓人困惑的地方，所以推薦是盡量不要過度使用

盒模型

塊級盒子

我們都知道BFC、IFC這樣的名詞，也知道他們的定義，比如BFC，就是塊級格式化上下文，表示塊級盒子定義的區域，擁有自己的渲染規則，并且盒子之間不會相互影響等。但是具體包含了哪些渲染規則以及如何渲染可能知道的比較模糊，這里也是說下容易忽略的地方。

在說這些渲染規則之前，先來說下一些概念，理解了這些概念，才能更好的理解盒模型。

塊級框，div 等塊級元素生成的框體就是塊級框
行內框，同理，span 這樣的行內元素生成的框體就是行內框
行內塊級框，即 display: inline-block的行內塊級元素生成的框體就是行內塊級框。
容納快，就是包含當前元素的父級框體，簡單來說，塊級元素的容納塊就是塊級框，行內元素的容納塊就是行內框，當然也有可能是塊級框。

而BFC、IFC這樣的格式化上下文就是在容納塊中定義的。先從橫向布局開始說起，看下面的

.line8 > .child1 {
  width: auto;
  margin-left: 50px;
  margin-right: 20px;
}
.line8 > .child2 {
  width: 300px;
  margin-left: auto;
  margin-right: 150px;
}
.line8 > .child3 {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.line8 > .child4 {
  width: 300px;
  margin-left: auto;
  margin-right: -200px;
}

得到的結果如下：

從中也不難看出：

橫向布局時，外邊距不會發生折疊
包含一個auto值時，用整個容納塊的寬度減去設置的寬度，剩下的寬度分配給設置給auto的元素，因為外邊距可以是負值，因此對于負值而言，也同樣適用上述規則，可以看到第四個div就是負值外邊距的情況。
包含兩個auto值時，就是將剩余距離平分為兩份，每個auto值各占一半，這也是我們平時經常使用margin: 0 auto;居中的原理是一樣的。

需要注意的時，這里關于塊級盒子的一些屬性，如外邊距，內邊距，邊框，輪廓等，除了外邊距可以設置為負值，其他設置為負值的時候，瀏覽器會忽略掉整條規則，并且auto值也只有寬高、外邊距以及輪廓屬性可以設置，其他設置auto值都是無效的，會被瀏覽器忽略掉。

再說縱向布局會產生margin折疊，折疊的規則就是取大值，也就是對于兩個縱向布局的元素，margin-bottom和margin-top發生重疊，那么誰的值大就取誰的值作為折疊后的外邊距的值。如果margin為負值的話，則取其絕對值大的那個值為折疊后的邊距，如下所示：

.line8 > .child5 {
  margin-bottom: 10px;
}
.line8 > .child6 {
  margin-top: -50px;
}

行內盒子

行內元素分為兩個，一個是非置換元素，一個是置換元素。這兩個元素在布局上也是有所不同的。

老規矩，先來說些概念：

匿名文本，就是不包含標簽的文本，比如之前例子中我們給 span 元素前面加上了x-height這樣的文本就是匿名文本。
字體框，顧名思義，就是font-size屬性決定的字體占據的框
行距，就是line-height屬性設置的值減去font-size的值就是行高，除以2分配和字體上下兩端，則是半行距。
行內框，就是行距加上內容區，也就是字體文本的區域，對行內非置換元素來說，就是line-height設置的值，對于置換元素來說，就是他的內容區。
行框，經過一行內所有的行內框的最高點到一行內行內框的最低點之間的距離。

下面是他的示意圖

非置換元素結合上面的概念，來看個

.line10 {
  border: 1px solid red;
}
.line10 > p {
  font-size: 12px;
  line-height: 12px;
}
.line10 > p::first-line {
  border: 1px solid #ccc;
  background: #f2f2f2;
}
.line10 > p > strong {
  font-size: 24px;
}

得到如下的顯示：

可以看出來，加粗文本那段明顯超出了內容區，即便如此，文本也都還是默認對齊的，下面改變一下強調文本，添加一些樣式：

.line10 > p > em {
  padding: 20px;
}
.line10 > p > em {
  border: 20px solid blue;
}
.line10 > p > em {
  margin: 20px;
}

這里 1 像素的藍色邊框是為了能夠看清強調文本所占據的范圍，通過這幾個結果對比，我們能看到，對于行內元素來說，無論是padding、border、還是margin對于行框來說完全沒有影響，也就是縱向距離保持不變，不過文本的左右還是會產生了間距，同理對于負margin來說，行框大小依然不變，不過左右會產生重疊。

那么既然行內元素縱向布局不受這些組成盒模型的屬性所影響，那么到底什么屬性影響行框大小呢，試試這個屬性：

.line10 > p > strong {
  font-size: 24px;
  vertical-align: 4px;
}

可以看到行框的高度比之前多出了4px，這也就是說vertical-align會影響到縱向布局。在前一部分的時候說過，vertical-align計算是會受到line-height影響的，并且對于下面說到的置換元素而言，line-height就是置換元素的內容區，所以我們知道，影響行內元素縱向布局的主要屬性就是這兩個了。

置換元素置換元素的布局則又不同了，還是看個

.line11 {
  font-size: 15px;
  line-height: 18px;
  border: 1px solid red;
}
.line11 > img {
  height: 30px;
  /* margin: 20px; */
  /* border: 0; */
  /* padding: 0; */
}

展示的結果其實和我們上面介紹圖片間隙的例子是一樣的，現在來看看對布局的影響，上面注釋的三個屬性，一個一個嘗試一下，會發現都會對行內框的高度有影響，這是和非置換元素完全不同的表現。這里就不展示具體的結果了，可以自己去嘗試看看。

行內塊級元素這里將行內塊級元素放在這里是因為行內塊級元素可以看做是置換元素，因此他們的布局影響是一樣的，盒模型的屬性都會對上下左右產生影響，因此不再贅述。

原文鏈接：https://juejin.im/post/6866789805615742989

言

相信做過網頁的對Css都不是很陌生，它可以幫助我們重鑄網頁中很多絢麗的特效，尤其是現在Css已經發展3.0版本，很多功能更是豐富多彩，讓我們的開發時間不僅大大縮短，而且還可以輕松做出許多華麗的特效，需要注意的是，Css相當于Html的一個美化裝置，所以它必須依賴于Html才能發揮作用，那么今天我們就來深入了解下它吧。

一、Css的用法

1.如何使用Css

要想使用Css來增加Html的美觀，有三種方式：

1).頭部文件中定義

<style>
    標簽的Css屬性
</style>

2).導入Css文件

創建一個Css文件，里面寫入樣式，然后導入
<link rel="stylesheet" type="text/Css" href="1.Css">

3).直接在標簽中定義

<div style='width:120px;height:60px;background-color:red'></div>Css注釋
注：與Html 不同，它的注釋方式是：/* Css語句*/

2.Css的選擇器

為什么一開始要講選擇器了，因為我們要想精確修改的Html中的某個元素的屬性，就必須使用選擇器，它可以通過選擇器定位到某個元素上然后修改元素的樣式。

1).id和class選擇器

id選擇器必須現在標簽中的定義，然后在在頭部標簽的style標簽中用“#”來表示：

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css"> 
     #dv{
       background: red 更改div的背景顏色為紅色
     }
</style>
</head>
<body>
<div id='dv'>fd</div> 定義一個id為dv的div
</body>
</Html>

class選擇器和id選擇器差不多，只不過class選擇器用”.“來表示：

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
     .dv{
       background: red
     }
</style>
</head>
<body>
<div class='dv'>fd</div>
</body>
</Html>

2).元素選擇器

就是指直接聲明標簽名為選擇器，然后更改樣式

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
     div{
       background: red
     }
</style>
</head>
<body>
<div>fd</div>
</body>
</Html>

或者聲明所有標簽名為選擇器

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
    Html，head，body，div{
       background: red
     }
</style>
</head>
<body>
<div>fd</div>
</body>
</Html>

也可以使用元素加選擇器更加精確的定位到該元素

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
   div#er{
       background: red
     }
</style>
</head>
<body>
<div id='df'>fd</div>
<p>fhsjak</p>
<div id='er'>re</div>
</body>
</Html>

3).后代選擇器

訪問一個元素內的其它元素，可以是元素內的任意元素

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
     div span{
       background: red
     }
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
</body>
</Html>

4).子元素選擇器

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
     div>p{
       background: red
     }
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
</body>
</Html>

5).兄弟選擇器

位于元素的下一個元素，不在元素內

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
     div+big{
       background: red
     }
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
<big>borther</big>
</body>
</Html>

6).偽類選擇器

偽類選擇器可分為三類

1)).錨偽類，用于檢測鼠標的懸停狀態。

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
     a:link{    /* 未訪問的鏈接 */
       background: red
     }
     a:visited{    /* 已訪問的鏈接 */
      background: green
     }
     a:hover{  /* 鼠標移動到鏈接上 */
      background: blue
     }
     a:active{  /* 選定的鏈接 */
      background: yellow
     }
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</Html>

注:a:hover必須置于a:link和a:visited 之后，才是有效的。a:active必須被置于a:hover 之后，才是有效的。

2)). ：first-child偽類

匹配第一個匹配到的標簽

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
     p:first-child{  匹配第一個p標簽
       background: red
     }
     div:first-child{ 匹配第一個div標簽
      background: blue
     }
</style>
</head>
<body>
<div id='dv'>
<p class='fd'>fdaf
<div id='gfd'>grerg</div>
</p>
<div class='gf'>fsdjkfhkj
<a href="https://www.baidu.com">baidu</a>
</div>
</div>
</body>
</Html>

3)). ：lang偽類

<Html>
<head>
  <title>Css應用</title>
  <style type="text/Css">
  q:lang(hw)  短引用利用偽類
   {
   quotes: "^" "^"
   }
</style>
</head>
<body>
<div id='dv'>
<p>hw<q lang="hw">任性的90后boy</q></p> 必須要用短引用
</div>
</body>
</Html>
<Html>
<head>

總結

這篇文章主要講述了CSS的基礎用法，講述了如何定義頭文件，導入CSS文件，id和class選擇器，元素選擇器，后代選擇器，子元素選擇器，兄弟選擇器，偽類選擇器等等，希望讓大家對CSS選擇器有個簡單的認識和了解。

****看完本文有收獲？請轉發分享給更多的人****

IT共享之家

入群請在微信后臺回復【入群】

想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/

ss進階

原文出處>>>

https://blog.csdn.net/u014158743/article/details/136240947

01-復合選擇器

定義：由兩個或多個基礎選擇器，通過不同的方式組合而成。

作用：更準確、更高效的選擇目標元素（標簽）。

后代選擇器

后代選擇器：選中某元素的后代元素。

選擇器寫法：父選擇器子選擇器 { CSS 屬性}，父子選擇器之間用空格隔開。

<style>
  div span {
    color: red;
  }
</style>
<span> span 標簽</span>
<div>
  <span>這是 div 的兒子 span</span >
</div>

子代選擇器

子代選擇器：選中某元素的子代元素（最近的子級）。

選擇器寫法：父選擇器 > 子選擇器 { CSS 屬性}，父子選擇器之間用 > 隔開。

<style>
  div > span {
    color: red;
  }
</style>

<div>
  <span>這是 div 里面的 span</span>
  <p>
    <span>這是 div 里面的 p 里面的 span</span>
  </p>
</div>

并集選擇器

并集選擇器：選中多組標簽設置相同的樣式。

選擇器寫法：選擇器1, 選擇器2, …, 選擇器N { CSS 屬性}，選擇器之間用 , 隔開。

<style>
  div,
  p,
  span {
    color: red;
  }
</style>

<div> div 標簽</div>
<p>p 標簽</p>
<span>span 標簽</span>

交集選擇器

交集選擇器：選中同時滿足多個條件的元素。

選擇器寫法：選擇器1選擇器2 { CSS 屬性}，選擇器之間連寫，沒有任何符號。

<style>
  p.box {
  color: red;
}
</style>

<p class="box">p 標簽，使用了類選擇器 box</p>
<p>p 標簽</p>
<div class="box">div 標簽，使用了類選擇器 box</div>

注意：如果交集選擇器中有標簽選擇器，標簽選擇器必須書寫在最前面。

偽類選擇器

偽類選擇器：偽類表示元素狀態，選中元素的某個狀態設置樣式。

鼠標懸停狀態：選擇器:hover { CSS 屬性 }

<style>
  a:hover {
    color: red;
  }
  .box:hover {
    color: green;
  }
</style>

<a href="#">a 標簽</a>
<div class="box">div 標簽</div>

超鏈接偽類

選擇器作用:link選擇尚未被訪問的超鏈接。:visited選擇已被訪問過的超鏈接。:hover鼠標懸停在超鏈接上時應用的樣式。:active超鏈接被點擊時應用的樣式，通常用于短暫的樣式變化，以示被點擊。:focus超鏈接獲取焦點時應用的樣式，通常用于鍵盤導航時給予用戶視覺反饋。

提示：如果要給超鏈接設置以上四個狀態，需要按 LVHA 的順序書寫。
經驗：工作中，一個 a 標簽選擇器設置超鏈接的樣式， hover狀態特殊設置

a {
  color: red;
}

a:hover {
  color: green;
}

02-CSS特性

CSS特性：化簡代碼 / 定位問題，并解決問題

繼承性
層疊性
優先級

繼承性

繼承性：子級默認繼承父級的文字控制屬性。

描述屬性效果設置文字大小font-size控制文字的大小。設置文字樣式font-style控制文字的樣式，如斜體（italic）或正常（normal）。設置行高line-height控制行與行之間的距離，實現單行文字的垂直居中。設置字體族font-family指定用于顯示文本的字體系列，可以是單個字體名稱或一系列備選字體。設置文字對齊方式text-align控制文本在盒子中的水平對齊方式，如左對齊、右對齊、居中等。設置文本縮進text-indent控制段落的首行縮進。設置文本修飾線text-decoration添加文本的修飾線，如下劃線、刪除線等。設置文字顏色color控制文本的顏色。

層疊性

特點：

相同的屬性會覆蓋：后面的 CSS 屬性覆蓋前面的 CSS 屬性
不同的屬性會疊加：不同的 CSS 屬性都生效

<style>
  div {
    color: red;
    font-weight: 700;
  }
  div {
    color: green;
    font-size: 30px;
  }
</style>

<div>div 標簽</div>

注意：選擇器類型相同則遵循層疊性，否則按選擇器優先級判斷。

嘗試一下>>>

優先級

優先級：也叫權重，當一個標簽使用了多種選擇器時，基于不同種類的選擇器的匹配規則。

<style>
  div {
    color: red;
  }
  .box {
    color: green;
  }
</style>

<div class="box">div 標簽</div>

基礎選擇器

規則：選擇器優先級高的樣式生效。

公式：通配符選擇器 < 標簽選擇器 < 類選擇器 < id選擇器 < 行內樣式 < !important

（選中標簽的范圍越大，優先級越低）

復合選擇器-疊加

疊加計算：如果是復合選擇器，則需要權重疊加計算。

公式：（每一級之間不存在進位）

(行內樣式，id選擇器個數，類選擇器個數，標簽選擇器個數)

規則：

從左向右依次比較選個數，同一級個數多的優先級高，如果個數相同，則向后比較
!important 權重最高
繼承權重最低

練習：

<!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>權重疊加鞏固練習</title>
  <style>
    /* (0, 0, 2, 1) */
    .c1 .c2 div { 
   color: blue;
  }
  
    /* (0, 1, 0, 1) */
  div #box3 {
   color:green;
  }
  
    /* (0, 1, 1, 0) */
  #box1 .c3 {
   color:orange;
  }
  </style>
</head>
<body>
  <div id="box1" class="c1">
  <div id="box2" class="c2">
   <div id="box3" class="c3">
    這行文本是什么顏色的？
   </div>
  </div>
 </div>
</body>
</html>

嘗試一下>>>

03-Emmet 寫法

Emmet寫法：代碼的簡寫方式，輸入縮寫 VS Code 會自動生成對應的代碼。

以下是關于HTML標簽的Emmet寫法的表格：

說明標簽結構Emmet寫法創建一個div標簽<div></div>div創建一個帶有class的div標簽<div></div>div.classname創建一個帶有id的div標簽<div id="idname"></div>div#idname創建一個段落標簽<p></p>p創建一個帶有文本內容的段落標簽<p>Text</p>p{Text}創建一個帶有鏈接的標簽<a href="#"></a>a[href="#"]創建一個列表項標簽<li></li>li創建一個無序列表標簽<ul></ul>ul創建一個有序列表標簽<ol></ol>ol創建一個圖片標簽<img src="" alt="">img[src=""][alt=""]

這些Emmet寫法可以幫助快速生成HTML標簽結構。

以下是關于CSS的Emmet寫法的表格：

說明CSS結構Emmet寫法創建一個帶有class的樣式表<link rel="stylesheet" href="style.css">link:css創建一個內聯樣式表<style></style>style創建一個選擇器為.classname的樣式規則.classname {}.classname創建一個選擇器為#idname的樣式規則#idname {}#idname創建一個選擇器為tagname的樣式規則tagname {}tagname向選擇器為.classname的樣式規則中添加屬性.classname { property: value; }.classname { property: value; }向選擇器為#idname的樣式規則中添加屬性#idname { property: value; }#idname { property: value; }向選擇器為tagname的樣式規則中添加屬性tagname { property: value; }tagname { property: value; }

這些Emmet寫法可以幫助快速編寫CSS樣式規則。

04-背景屬性

背景圖

網頁中，使用背景圖實現裝飾性的圖片效果。

屬性名：background-image（bgi）
屬性值：url(背景圖 URL)

div {
  width: 400px;
  height: 400px;

  background-image: url(./images/1.png);
}

提示：背景圖默認有平鋪（復制）效果。

平鋪方式

屬性名：background-repeat（bgr）

屬性值效果repeat默認值，背景圖像在水平和垂直方向上重復。repeat-x背景圖像在水平方向上重復，垂直方向不重復。repeat-y背景圖像在垂直方向上重復，水平方向不重復。no-repeat背景圖像不重復，僅在盒子內顯示一次。space背景圖像沿著盒子的邊緣平鋪，且圖像之間有空白間隔，使得圖片不會重疊。round背景圖像沿著盒子的邊緣平鋪，且圖像會被縮放以適應整數倍的尺寸。

div {
  width: 400px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);

  background-repeat: no-repeat;
}

背景圖位置

屬性名：background-position（bgp）

屬性值：水平方向位置垂直方向位置

關鍵字

以下是關于背景圖位置的關鍵字的表格：

關鍵字位置top圖片頂部對齊bottom圖片底部對齊left圖片左側對齊right圖片右側對齊center圖片居中對齊top left圖片左上角對齊top right圖片右上角對齊bottom left圖片左下角對齊bottom right圖片右下角對齊

這些關鍵字可以幫助你控制背景圖在元素中的位置。

坐標

水平：正數向右；負數向左
垂直：正數向下；負數向上

div {
  width: 400px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);
  background-repeat: no-repeat;

  background-position: center bottom;
  background-position: 50px -100px;
  background-position: 50px center;
}

提示：
關鍵字取值方式寫法，可以顛倒取值順序
可以只寫一個關鍵字，另一個方向默認為居中；數字只寫一個值表示水平方向，垂直方向為居中

背景圖縮放

作用：設置背景圖大小

屬性名：background-size（bgz）

常用屬性值：

關鍵字

cover：等比例縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見
contain：等比例縮放背景圖片以完全裝入背景區，可能背景區部分空白

百分比：根據盒子尺寸計算圖片大小
數字 + 單位（例如：px）

div {
  width: 500px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);
  background-repeat: no-repeat;
  
  background-size: cover;
  background-size: contain;
}

提示：工作中，圖片比例與盒子比例相同，使用 cover 或 contain 縮放背景圖效果相同。

背景圖固定

作用：背景不會隨著元素的內容滾動。

屬性名：background-attachment（bga）

屬性值：fixed

body {
  background-image: url(./images/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

背景復合屬性

屬性名：background（bg）

屬性值：背景色背景圖背景圖平鋪方式背景圖位置/背景圖縮放背景圖固定（空格隔開各個屬性值，不區分順序）

div {
  width: 400px;
  height: 400px;

  background: pink url(./images/1.png) no-repeat right center/cover;
}

嘗試一下>>>

05-顯示模式

顯示模式：標簽（元素）的顯示方式。

作用：布局網頁的時候，根據標簽的顯示模式選擇合適的標簽擺放內容。

塊級元素

特點：

獨占一行
寬度默認是父級的100%
添加寬高屬性生效

行內元素

特點：

一行可以顯示多個
設置寬高屬性不生效
寬高尺寸由內容撐開

行內塊元素

特點：

一行可以顯示多個
設置寬高屬性生效
寬高尺寸也可以由內容撐開

轉換顯示模式

屬性：display

以下是關于轉換顯示模式的表格：

屬性值效果block將元素顯示為塊級元素，使元素呈現為一個塊，獨占一行，可以設置寬度和高度，可容納其他元素。inline將元素顯示為內聯元素，使元素呈現為行內元素，不獨占一行，只占據內容所需的空間，不可設置寬高。inline-block將元素顯示為內聯塊元素，元素呈現為行內元素但可以設置寬度和高度，與其他行內元素在一行顯示。none隱藏元素，使元素不可見且不占據空間。flex將元素設置為彈性容器，使其子元素成為彈性項目，可利用彈性布局方式控制元素的排列和對齊方式。grid將元素設置為網格容器，使其子元素成為網格項目，可利用網格布局方式控制元素的排列和對齊方式。inline-flex將元素設置為內聯彈性容器，使其子元素成為彈性項目，可利用彈性布局方式控制元素的排列和對齊方式。inline-grid將元素設置為內聯網格容器，使其子元素成為網格項目，可利用網格布局方式控制元素的排列和對齊方式。

這些屬性值可用于控制元素的顯示模式，從而實現不同的布局效果。

在線咨詢

上一篇：css基礎樣式中的padding樣式
下一篇：淘寶視頻怎么制作？尺寸要求是多少？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS進階知識掃盲

文本排版

繼承

line-height

strut(支柱)

vertical-align

CSS的全局關鍵字

選擇符

盒模型

塊級盒子

行內盒子

言

一、Css的用法

1.如何使用Css

1).頭部文件中定義

2).導入Css文件

3).直接在標簽中定義

2.Css的選擇器

1).id和class選擇器

2).元素選擇器

3).后代選擇器

4).子元素選擇器

5).兄弟選擇器

6).偽類選擇器

1)).錨偽類，用于檢測鼠標的懸停狀態。

2)). ：first-child偽類

3)). ：lang偽類

總結

ss進階

您的項目需求