『轉載』CSS 重點知識彙總

阿新 • • 發佈：2021-06-11

CSS 重點知識彙總

來啦，前面介紹了 JS重點知識與 http重點知識，今天給大家帶來了 css 重點知識，希望大家多多收藏點贊

CSS 權重及引入方式
標籤全部作用
用CSS畫三角形
元素水平垂直居中的方案
元素固定寬高
元素不固定寬高
元素種類的劃分
盒子模型及其理解
margin塌陷及合併問題
浮動模型及清除浮動的方法
IFC與BFC
聖盃佈局與雙飛翼佈局
聖盃佈局
雙飛翼佈局
Flex 佈局
容器的屬性
專案的屬性
px,em,rem的區別
媒體查詢
HTML5 新特性
理解 BFC
Grid 佈局
行內元素的間距怎麼解決
偽類和偽元素有什麼不同

1. CSS 權重及引入方式

CSS權重可以分為四個等級：

內聯樣式，如 style=xxx，權重為 1000
id選擇器，權值為 100
class、偽類和屬性選擇器，如 .content, :hover, [attribute]，權值為 10
元素選擇器和偽元素選擇器，權值為 1

需要注意的是：通用選擇器(*)，子選擇器(>)和相鄰同胞選擇器(+)並不在這四個等級中，所以它們的權重都為 0。

權重大的選擇器優先順序也越高，相同權重的優先順序又遵循後定義覆蓋前面定義的情況。

偽類和偽元素：

一個 : 的為偽類: :hover,:focus,:first-of-type,:first-child

兩個 :: 為偽元素::: before

,::after

2. 標籤全部作用

超連結
錨鏈接
打電話，發郵件

3. 用CSS畫三角形

實現原理：

首先來看一下我們平時為一個盒子新增border的情況：

div {
    width: 100px;
    height:100px;
    border: 4px solid blue;
}

效果如下：

這是我們平時使用 border 最常見的場景——往往只給border一個較小的寬度；然而這樣的日常用***讓我們對border的形成方式產生誤解，即認為border是由四個矩形邊框拼接而成的。

然而事實並不是如此。實際上，border是由三角形組合而成的。為了說明這個問題，我們可以增大border的寬度，併為他們設定不同的顏色：

div {
    width: 100px;
    height:100px;
    border: 40px solid;
    border-color: blue red yellow pink;
}

效果如下：

由此我們可以看出，border確實是由三角形組成的。那麼我們把元素的內容尺寸設為0會發生什麼呢？

div {
    width:0;
    height:0;
    border: 40px solid;
    border-color: blue red yellow pink;
}

效果如下：

這樣我們就得到了四個三角形，如果想要其中一個，只需要把另外三個的顏色都設為 transparent:

div {
    width:0;
    height:0;
    border: 40px solid;
    border-color: transparent red transparent transparent;
}

效果如下：

不過其他隱藏的左邊框依然佔據著空間，因此我們可以把左邊框的 border-width 設為 0 ：

div {
    width:0;
    height:0;
    border-style: solid;
    border-width: 40px 40px 40px 0;
    border-color: transparent red transparent transparent;
}

4. 元素水平垂直居中的方案

1. 元素固定寬高

定位 + 負margin

.wrapper {
    height: 900px;
    background-color: gray;
    position: relative;
}
.content {
    width: 400px;
    height: 400px;
    background-color: red;
}
.content {
    position: absolute;
    /\* top-left 相對於第一個 position 不為 static 的父元素的 height-width 定位 \*/
    left: 50%;
    top: 50%;
    /\* 相對於元素自己的 height-width 定位 \*/
    margin-left: -200px;
    margin-top: -200px;
}
<div class="wrapper">
    <div class="content">
    </div>
</div>

2. 元素不固定寬高

方案一：定位 + transform

.wrapper {
    height: 900px;
    background-color: gray;
    position: relative;
}
.content {
    background-color: red;
    width: 400px;
    height: 400px;
}
.content {
    position: absolute;
    left: 50%;
    top: 50%;
    /\* 相對於元素的自身寬高進行平移 \*/
    transform: translate(-50%, -50%);
}

方案二：定位 + margin:auto

.wrapper {
    height: 900px;
    background-color: gray;
    position: relative;
}
.content {
    background-color: red;
    width: 300px;
    height: 300px;
}
.content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

方案三：display:flex

.wrapper {
    height: 900px;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content {
    background-color: red;
    width: 300px;
    height: 300px;
}

方案四：display:table-cell + vertical-align:middle 需要父元素固定寬高

.wrapper {
    width: 900px;
    height: 900px;
    background-color: gray;
    display: table-cell;
    vertical-align: middle;

}
.content {
    background-color: red;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

對於display: tabel-cell的元素，height和padding同時設定會出現問題：

當padding與內容高度超過設定的高度時，元素的高度取決於padding和內容的高度，最初為元素設定的高度就不生效了；
當padding與內容的高度小於設定的高度時，元素的高度取決於設定的高度；

5. 元素種類的劃分

CSS元素可分為行內元素，行內塊級元素以及塊級元素。

行內元素設定寬高無效，可以設定左右外邊距，上下外邊距無效。如：span，a，em，label，strong

行內塊級元素可以設定寬高，可以設定外邊距。如：img，input，video，audio

塊級元素獨佔一行。如：div，p，ul，li，h1-h6，table，form

通過 display 可以更改元素的表現形式

5. 盒子模型及其理解

CSS盒模型包含了元素內容區域（content）、邊框（border）、內邊距（padding）、外邊距（margin）。在標準盒模型中，元素的width和height屬性為元素的content的寬高。但是在實踐中發現，當我們想要一個固定寬高的盒子，並給元素增加padding之後，元素的實際寬高會變大，需要我們自己去手動修改height和width的值，很不方便。因此在 CSS3 中提供了 box-sizing 屬性用來改變標準盒模型。

box-sizing: content-box：元素的height和width為元素content區域的寬高

box-sizing: border-box：元素的height和width為元素 content+padding+border的寬高，當設定padding或border時，內容content會自動縮小

box-sizing: inherit

6. margin塌陷及合併問題

margin塌陷：父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值.

如下所示：

.parent {
    width: 300px;
    height: 300px;
    background-color: red;
    margin-top: 100px;
}
.child {
    background-color: blue;
    width: 50px;
    height: 50px;
}
<div class="parent">
    <div class="child"></div>
</div>

當給子元素設定 margin-top: 150px 的時候，子元素會帶著父元素往下移動50px。

正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。

解決方法：

position:absolute/fixed
float:left/right
display:inline-block
overflow:hidden

這四種方法都能觸發BFC，但是使用的時候會帶來不同的麻煩，需要根據具體情況解決 margin 塌陷。

margin合併：兩個兄弟結構的元素在垂直方向上的 margin 是合併的

如下所示：

.div1 {
    height: 200px;
    margin: 20px 0;
    background-color: red;
}
.div2 {
    height: 100px;
    margin: 10px 0;
    background-color: blue;
}
<div class="div1"> </div>
<div class="div2"></div>

div1 與 div2 的之間的 margin 取兩者的最大值。

參考文章

7. 浮動模型及清除浮動的方法

父元素新增 overflow:hidden

在父元素新增最後一個子元素，並設定 clear:both

<style>
    .parent p {
      clear:both
    }
    .left {
      float: left;
      height: 200px;
      width: 100px;
      background-color: red;
    }
    .right {
      float: right;
      height: 200px;
      width: 100px;
      background-color: blue;
    }
</style>
<body>
  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <p></p>
  </div>
</body>

通過偽元素清除浮動

<style>
    .parent::after {
      content: "";
      display: block;
      clear: both;
    }
    .left {
      float: left;
      height: 200px;
      width: 100px;
      background-color: red;
    }
    .right {
      float: right;
      height: 200px;
      width: 100px;
      background-color: blue;
    }
</style>
<body>
  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

通過BFC的方式清除浮動
- position:absolute/fixed，不為 static 或 relative
- float:left/right
- display:inline-block，table-cell
- overflow:hidden，scroll，不為 visible

8. IFC與BFC

9. 聖盃佈局與雙飛翼佈局

聖盃佈局與雙飛翼佈局是為了實現一個兩側固定寬度，中間自適應的三欄佈局。兩者需要遵循以下要點：

兩側固定寬度，中間自適應
中間部分在DOM結構上優先，以便先行渲染
允許三列中的任意一列成為最高列
只需要使用一個額外的 div 標籤

核心是左邊的 div margin-left:-100%。

參考文章

除此之外，兩者還可以用 flex 佈局實現。

聖盃佈局

<!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>Document</title>
  <style>
    body {
      min-width: 500px;
      margin: 0;
      padding: 0;
    }
    .container {
      padding: 0 200px 0 150px;
      overflow: hidden;
    }
    .center {
      background-color: blue;
      height: 800px;
      width: 100%;
    }
    .left {
      background-color: yellow;
      width: 150px;
      height: 200px;
      margin-left: -100%;
      position: relative;
      left: -150px;
    }
    .right {
      background-color: red;
      width: 200px;
      height: 200px;
      margin-right: -200px;

    }
    .container > div {
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

聖盃佈局的flex實現：

<!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>聖盃佈局的flex實現</title>
  <style>
    \*{
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
    }
    .center {
      background-color: blue;
      height: 800px;
      flex: 1;
    }
    .left {
      background-color: red;
      height: 400px;
      width: 200px;
      order: -1;
    }
    .right {
      background-color: yellow;
      height: 400px;
      width: 150px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

雙飛翼佈局

<!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>
    \*{
      margin: 0;
      padding: 0;
    }
    body {
      min-width: 500px;
    }
    .left {
      background-color: red;
      width: 150px;
      height: 150px;
      margin-left: -100%;
    }
    .right {
      background-color: yellow;
      width: 200px;
      height: 150px;
      margin-left: -200px;
    }
    .container {
      width: 100%;

    }
    .center {
      margin-left: 150px;
      margin-right: 200px;
      height: 300px;
      background-color: blue;
    }
    .column {
      float: left;
    }
  </style>
</head>
<body>
  <div class="container column">
    <div class="center"></div>
  </div>
  <div class="left column"></div>
  <div class="right column"></div>
</body>
</html>

10. Flex 佈局

flex 佈局意為“彈性佈局”，用來為盒模型提供最大的靈活性。任何一個元素都可以指定為 flex 佈局。

注意，設為 flex 佈局以後，子元素的 float、clear、vertical-align 屬性將失效。

容器的屬性

屬性	描述
flex-direction	決定主軸的方向，即專案的排列方向。row
flex-wrap	預設情況下專案都在一條軸線上，該屬性定義，如果一行排不下，該如何換行。 wrap
flex-flow	是 flex-direction 和 flex-wrap 的簡寫形式，預設為 row nowrap
justify-content	定義專案在主軸上的對齊方式：flex-start
align-items	定義專案在交叉軸上如何對齊：flex-start
align-content	定義了多根軸線的對齊方式。flex-start

專案的屬性

屬性	描述
order	定義專案的排列順序。預設為0，數值越小，排列越靠前。
flex-grow	定義專案的放大比例，預設為0，即如果存在剩餘空間也不放大。
flex-shrink	定義專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis	定義在分配多餘空間之前，專案佔據的主軸空間。他可以設為跟width一樣的屬性值，則專案將佔據固定空間。
flex	是flex-grow、flex-shrink、flex-basis的簡寫，預設值為 0 1 auto。
align-self	屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋`align-items`屬性。預設值為`auto`，表示繼承父元素的`align-items`屬性。

11. px,em,rem的區別

px：畫素px是相對於顯示器螢幕解析度而言的。

em：相對於當前父元素的字型大小

rem：rem相對於根元素設定字型大小

對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可

對於需要適配各種移動裝置，使用rem

12. 媒體查詢

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

13. HTML5 新特性

音訊、視訊、地理位置、localStorage、sessionStorage

14. 理解 BFC

參考文章

15. Grid 佈局

Flex 佈局是軸線佈局，只能指定”專案“針對軸線的位置，可以看作是一維佈局。

Grid 佈局則是將容器劃分為 ”行“ 和 ”列“，產生單元格，然後指定專案所在的單元格，可以看作是二維佈局。

16. 行內元素的間距怎麼解決

行內元素寫在一行，中間不留空格
父元素 font-size 設為 0
使用 float

17. 偽類和偽元素有什麼不同

偽類用於當已有元素處於的某個狀態時，為其新增對應的樣式，這個狀態是根據使用者行為而動態變化的，比如說，當用戶懸停在指定的元素時，我們可以用:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素新增樣式，但是它只有處於dom樹無法描述的狀態下才能為元素新增樣式，所以將其稱為偽類。

偽元素不是 DOM 中的真實元素，但是存在於最終的渲染樹中，可以為其新增樣式，比如說，我們可以通過：before來在一個元素前增加一些文字。

本文轉自 https://www.nowcoder.com/discuss/642120，如有侵權，請聯絡刪除。

『轉載』CSS 重點知識彙總

CSS 重點知識彙總

目錄

1. CSS 權重及引入方式

2. 標籤全部作用

3. 用CSS畫三角形

4. 元素水平垂直居中的方案

1. 元素固定寬高

2. 元素不固定寬高

5. 元素種類的劃分

5. 盒子模型及其理解

6. margin塌陷及合併問題

7. 浮動模型及清除浮動的方法

8. IFC與BFC

9. 聖盃佈局與雙飛翼佈局

聖盃佈局

雙飛翼佈局

10. Flex 佈局

容器的屬性

專案的屬性

11. px,em,rem的區別

12. 媒體查詢

13. HTML5 新特性

14. 理解 BFC

15. Grid 佈局

16. 行內元素的間距怎麼解決

17. 偽類和偽元素有什麼不同

相關推薦