[深入18] CSS-interview

woow_wu7發表於2020-03-15

[深入01] 執行上下文
 [深入02] 原型鏈
 [深入03] 繼承
 [深入04] 事件迴圈
 [深入05] 柯里化偏函式函式記憶
 [深入06] 隱式轉換和運算子
 [深入07] 瀏覽器快取機制（http快取機制）
[深入08] 前端安全
 [深入09] 深淺拷貝
 [深入10] Debounce Throttle
[深入11] 前端路由
 [深入12] 前端模組化
 [深入13] 觀察者模式釋出訂閱模式雙向資料繫結
 [深入14] canvas
[深入15] webSocket
[深入16] webpack
[深入17] http 和 https
[深入18] CSS-interview
[react] Hooks

[部署01] Nginx
[部署02] Docker 部署vue專案
 [部署03] gitlab-CI

前置知識

一些單詞

sticky：粘性
triangle：三角形
rectangle：矩形
alternate：輪流的
orient：方向，朝向
複製程式碼

vh 和 vw

vh：表示瀏覽器視口高度
vw：表示瀏覽器視口寬度
注意：vh 和 vw 包括滾動條的寬度和高度
- 需要滿屏時，記得減去瀏覽器滾動條的寬和高

sticky-footer (三種方法)

sticky-footer效果：是在內容不足一屏時，footer固定在底部，內容超出一屏時，在內容最底部

(1) margin 和 padding 組合

適用性：適用於footer固定的情況，相容性好
原理
- content
  - padding-bottom: 50px; 保證空出footer的高度距離，避免footer擋住了content的內容
  - min-height: 100%; 保證內容不足時，撐滿螢幕
    - 注意min-height: 100%是針對父元素來說的
    - 所以要將content的父元素，父父元素，body，html的height都設定成100%
  - box-sizing: border-box; 保證width,height包括content,padding,border
- footer
  - margin-top: -50px; 為負數，保證往上移動50px在內容不足時，正好在螢幕底部

方法1
- margin pading組合
- 適用於 footer固定的情況，相容性較好

- footer
  - margin-top: -50px;
  - 因為內容區設定了
    - min-height: 100%；在內容不足時候，沾滿整個網頁
    - padding-bottom: 50px; 主要是為了防止footer往上移動到可視區域底部後，內容區的內容被footer遮擋
    - footer的margin-top的負值則是往上移動，正好和padding-bottom區域重合
- content 
  - min-height：100%，保證內容不全時，沾滿整個網頁
  - 注意：min-height: 100%是根據父元素計算的，和父元素高度一樣，所以content-wrap的所有外層元素都要設定height: 100%
- 注意清掉所有預設樣式的padding和margin


- 程式碼
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .wrap {
      height: 100%;
    }
    .content {
      min-height: 100%; // 內容不足佔滿整個內容空間
      padding-bottom: 60px; // 避免content被footer覆蓋而看不到內容
      box-sizing: border-box; // width,height包括content,padding,border
      background: blueviolet;
    }
    .footer {
      margin-top: -60px; // 當content內容不足，佔滿螢幕後，margin-top則讓footer顯示在底部
      height: 60px;
      background: red;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
      <!-- <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> -->
    </div>
    <div class="footer">footer</div>
  </div>
</body>
</html>
複製程式碼

(2) flex佈局

固定footer通常不太好，不太靈活
所以flex佈局能讓footer不固定的情況下實現 sticky-footer 佈局
wrap
- display: flex;
- flex-direction: column; // 縱向排列
content
- flex: 1; // 表示放大比例，在存在剩餘空間時，放大佔滿剩餘空間

2. flex佈局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .wrap {
      /* height: 100%; */
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    .content {
      /* min-height: 100%; */
      flex: 1;
      /*
      padding-bottom: 60px;
      box-sizing: border-box;
      */
      background: yellow;
    }
    .footer {
      /* margin-top: -60px; */
      height: 60px;
      background: blue;
    }
  </style>
</head>
<body>
  // 在最層元素上設定 min-height: 100% 內容不住沾滿空間
  // 在最層元素上設定flex作為容器，注意flex-direction: column豎直方向為主軸
  // 讓content專案的flex: 1; 這樣就能讓cotent佔滿主軸的剩餘空間，即除了footer以外的所有高度，主軸方向min-height: 100%
  <div class="wrap">
    <div class="content">
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
    </div>
    <div class="footer">footer</div>
  </div>
</body>
</html>
複製程式碼

(3) calc屬性

calc(表示式)
- 以一個表示式為引數，表示式的 ( 結果 ) 作為 ( 值 )
- 表示式可以是：任意 + - * / 的組合
- 注意：+ - 的運運算元之間必須有空格，* / 不必有空格
calculate：是計算的意思

方法三
- calc屬性
- calculate: 計算

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
     * {
       margin: 0;
       padding: 0;
     }
     .content {
       min-height: calc(100vh - 30px) // 引數是表示式，可以使用 + - * /
     }
     .footer {
       height: 30px;
       background: black;
       color: white;
     }
   </style>
 </head>
 <body>
  <div class="content">
    content <br><br><br><br>
    content <br><br><br><br>
    content <br><br><br><br>
  </div>
  <div class="footer">
    footer
  </div>
 </body>
 </html>
複製程式碼

清除浮動

BFC

BFC ( Block Formatting Context ) 塊級格式化上下文，是一種特性
- BFC指頁面的一塊渲染區域，並有一套渲染規則，它決定了其子元素如何定位，以及和其他元素的關係和相互作用
- 具有BFC元素特性的元素，可以看作是隔離了的獨立元素，容器裡的元素不會在佈局上影響其他元素
如何觸發BFC特性
- 根元素
- 浮動 flot
- 絕對定位 position: absolute 和 fixed
- display 為 inline-block、table-cells、flex
- overflow 除了 visible 以外的值( hidden, auto, scroll )
BFC佈局規則
- margin摺疊
  - 屬於同一個BFC的兩個相鄰塊級元素會發生margin摺疊
- 獨立容器
  - 容器裡面的元素不會相應到元素外面的元素
利用BFC清除浮動的原理
- 具有BFC特性的元素在計算高度時，包含所有子元素 ( 包括浮動元素 )
- 所以能解決 ( 浮動 ) 造成的 ( 父元素高度塌陷 ) 的問題
為什麼要清楚浮動
- 原因：浮動元素脫離文件流後，造成父元素高度塌陷 ( 在父元素沒有設定高度時 )
- 解決辦法：觸發BFC特性，或者在浮動元素的兄弟元素使用 clear 屬性

清除浮動的方法 - 解決父元素高度塌陷

(1) overflow: hidden

方法：在浮動元素的父元素上設定overflow: hidden
原理：觸發BFC，具有BFC特性的元素在計算高度時，會把所有子元素計算在內，報錯浮動的元素，則不會高度塌陷
所以：overflow: hidden scroll auto都可以，只要不是 ( overflow: visible ) 都可以
哪些屬性可以觸發BFC，即都可以用來清除浮動
- 根元素
- 浮動
- 絕對定位：absolute fixed
- overflow: hidden/auto/scroll, 不是visible就行
- display: inline-block/flex/table-cell

(2) 偽元素 ( ::before ) ( ::after )

方法：給浮動元素的父元素，新增偽元素
原理：
- 1.偽元素是當前元素的子元素，再給偽元素設定 clear 屬性，注意 clear 屬性只適用於塊級元素
  - 注意區分偽元素和偽類
    - 偽元素：是一個元素 ::after ::before
    - 偽類：是一個class類 :hover :link ...
- 2.給浮動元素的父元素新增偽元素，然後設定clear:both，相當於浮動元素的兄弟元素設定clear屬性

(3) 給浮動元素的父元素插入一個子元素，比如span,在設定clear屬性，display要為block

和新增偽元素是一個道理，用子元素去撐開父元素的高度

(4) 把浮動元素的父元素也設定浮動，從而觸發BFC (重複了，但是容易忘記寫上把)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      background: yellow;
      padding: 30px;
      position: relative;
      /* float: left; */
      /* position: absolute; */
      /* overflow: hidden; */
      /* display: inline-block; */
    }
    .father::before {
      content: '.';
      height: 100PX;
      width: 100PX;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      background: greenyellow;
      clear: both;
    }
    .brother {
      height: 200px;
      width: 200px;
    }
    .child {
      height: 200px;
      width: 200px;
      background: red;
      float: left;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child">child</div>
    <div class="brother"></div>
  </div>
</body>
</html>
複製程式碼

css選擇器

元素選擇器
關係選擇器
屬性選擇器
偽類選擇器
偽物件選擇器

元素選擇器

選擇器	名稱	描述
*	萬用字元選擇器	選擇所有元素
E	元素選擇器	選擇指定元素
#idName	id選擇器	選擇id屬性等於idName的元素
.className	類選擇器	選擇class屬性等於className的元素

關係選擇器

選擇器	名稱	描述
E>F	子選擇器	子選擇器只能選中子元素，不能選中孫子元素，孫孫子元素
E F	後代選擇器	除了能選擇子元素外，還能選中孫子元素，孫孫子元素
E+F	相鄰選擇器	相鄰選擇器只能選中符合條件的相鄰的兄弟元素
E~F	兄弟選擇器	兄弟選擇器會選中符合條件的所有兄弟元素，不強調相鄰

屬性選擇器

選擇器	描述
`E[att]`	選擇具有att屬性的E元素
`E[att="val"]`	選擇att屬性值為val的E元素
`E[att~="val"]`	選擇具有att屬性且屬性值其中一個等於val的E元素（包含只有一個值且該值等於val的情況）
`E[att^="val"]`	選擇具有att屬性且屬性值為以val`開頭`的字串的E元素
`E[att$="val"]`	選擇具有att屬性且屬性值為以val`結尾`的字串的E元素
`E[att*="val"]`	選擇具有att屬性且屬性值為`包含`val的字串的E元素

E[att|="val"] 選擇具有att屬性且屬性值為以val開頭並用連線符-分隔的字串的E元素，如果屬性值僅為val，也將被選擇

偽類選擇器

E:link 設定超連結a在未被訪問前的樣式
E:visited 設定超連結a在其連結地址已被訪問過時的樣式
E:hover 設定元素滑鼠在其懸停時的樣式
E:active 設定元素在被使用者啟用（在滑鼠點選與釋放之間發生的事件）時的樣式
E:focus 設定元素在成為輸入焦點（該元素的onfocus事件發生）時的樣式。(一般應用於表單元素)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div[class~="xy"] div[class$="2"]{ 
    // ------------------------------------- 屬性選擇器，後代選擇器
    // div[class~="xy"] -------------------- div屬性是class,並且class的值其中一個是xy的div,即(father)
    // div[class~="xy"] div[class$="2"] ---- 後代選擇器，包括子元素，孫子元素，孫孫子元素
    // div[class$="2"] --------------------- div的class屬性的值以2結尾的div被選中，即（child2，children2）
      border: 2px solid red;
      margin: 10px;
    }
    div[class="child4"]+div {
    // ------------------------------------- 相鄰選擇器，(區分兄弟選擇器)
      background: blue;
    }
  </style>
</head>
<body>
  <div class="father xy">
    <div class="child1">
      <div class="children1">children1</div>
      <div class="children2">children2</div>
    </div>
    <div class="child2">child2</div>
    <div class="child3">child3</div>
    <div class="child4">child4</div>
    <div class="child5">child5</div>
  </div>
</body>
</html>
複製程式碼

偽類和偽元素

偽類

偽類：和class一樣是一個類，表示一些動態狀態------------------------- 偽類是一個類，一個冒號:

偽元素

偽元素：是一個元素，不再DOM文件中，( 當前元素的子元素 ) --------- 偽元素是一個元素，兩個冒號::
- 注意：偽元素是當前元素的子元素，並且不再DOM文件中，無法用js獲取，可以用來做效能優化，比如分割線等

偽類和偽元素

1.
偽類：和class一樣，是一個類，表示一些動態狀態 --------------------------------- 偽類是一個類，一個冒號:
偽元素：是一個元素，不在dom文件樹中，( 當前元素的子元素 ) ---------------------- 偽元素是一個元素，兩個冒號::


2. 
偽類一個冒號，偽元素兩個冒號


3.常見的偽類和偽元素
偽類：
:hover 
:active 
:focus  ------------- 設定輸入框的樣式，比如改變背景顏色
:visited 
:link 
:firsh-child .....
偽元素： 
::before 
::after
::first-letter  ------------ 選取指定選擇器得首字母
::first-line --------------- 選取指定選擇器得首行
::selection ---------------- 匹配使用者選取得部分，比如選取文字得背景顏色等
::placeholder -------------- 設定placeholder的樣式


4.總結：
- 偽類是一個類，定義的是狀態:hover，:active，:focus，:visited，:link，:first-child，:last-child等等
- 偽元素是元素的子元素，不在DOM樹中，無法用js獲取
- 偽元素是行內元素，設定寬高無效，當可以是指display:block改變

例項：
1. 偽元素動畫
- 當設定position: absolute後，元素的的display會變成 ----  display:inline-block
- float和position都會改變 display
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
.pseudo {
  height: 150px;
  width: 300px;
  background: rgb(3, 173, 185);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative; // ---- 作為絕對定位的定位點
}
.pseudo::after { ------------ 偽元素是當前元素的子元素
  content: ''; -------------- 必須設定內容，這裡內容為空
  position: absolute; ------- 絕對定位會改變display 為 inline-block
  left: 50%; // ------------- 絕對定位把left和right都設定為50%，即寬度被壓縮成一點，在居中位置
  right: 50%;
  bottom: 0;
  height: 2px;
  background: rgb(255, 230, 0);
  transition: all .3s; // --- 定義transition，狀態改變變化時觸發
}
.pseudo:hover::after { // ---- 注意給偽元素::after新增偽類:hover的寫法是：  ( .pseudo:hover::after )
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: rgb(255, 230, 0);
  left: 0; // ---------------- hover時展開，狀態觸發transition
  right: 0;
}
.pseudo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: rgb(255, 0, 0);
  top: 50%;
  bottom: 50%;
  transition: all .3s;
}
.pseudo:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: rgb(255, 0, 0);
  top: 0;
  bottom: 0;
}
</style>
<body>
  <div class="pseudo">偽類和偽元素</div>
</body>
</html>
複製程式碼

衝擊波動效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button {
      margin: 200px;;
      width: 100px;
      height: 40px;
      background: black;
      border-radius: 30px;
      text-align: center;
      line-height: 40px;
      color: white;
      position: relative;
    }
    .button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); // --------------------- 居中
      width: 200px;
      height: 200px;
      opacity: 0;
      background: white;
      border-radius: 50%;
      z-index: 9999;
      transition: all .5s; // ---------------------------------- 0.5s過度動畫
    }
    .button:active::before { // -------------------------------- 偽類:active => 點選改變狀態
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
      width: 0;
      height: 0;
      opacity: 1;
      background: white;
      border-radius: 50%;
      z-index: 9999;
      transition-duration: 0s; 
      // ------------------------------------------------------ active時持續時間為0，瞬間改變到active時的狀態
      // ------------------------------------------------------ 即瞬間透明度1到0；大小從200到0
      // ------------------------------------------------------ 點選完成時，則執行.5秒的過度動畫
      
      // --------------------------- 觸發時的狀態，用transition-duration: 0s; 立即結束掉，原始狀態 --> 目標狀態
    }
  </style>
</head>
<body>
  <div class="button">button</div>
</body>
</html>
複製程式碼

css畫三角形

triangle：三角形

css畫三角形

1.寬高都設定為0，border的四邊用不同顏色區分，將出現四個三角形
2.為什麼會出現4個三角形，因為四個border相互遮擋了
3.#b是向上的三角形
  - 三角形底邊長度是border的兩倍 ( border-left+border-right的長度 )
  - 三角形高都就是border-bottom的值，所以改變border-bottom就能得到高度不同的三角形
4.其他方向的三角形同理


5. 例項
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .triangle { // --------------------------------- 三角形，把div寬高都設定為0；四個border就是四個三角形
      width: 0;
      height: 0;
      border: 100px solid transparent; // ----------- 四個邊設定為透明，用底邊覆蓋後，就顯示向上的三角形，其他方向同理
      border-bottom: 100px solid red; //------------- 向上三角形的底邊=left+right的長度，高就是bottom的長度
    }
    .rectangle {
      width: 200px;
      height: 200px;
      background: blue;
    }
  </style>
</head>
<body>
  <div class="triangle"></div>
  <div class="rectangle"></div>
</body>
</html>
複製程式碼

visibility:hidden 和 display:node 的區別

visibility:hidden 隱藏後，會佔據原來的位置
display:none 隱藏後，不會佔據原來的位置
但是他們都還是會在DOM節點中

display: inline-block存在間隙的原因和解決辦法

原因：標籤之間有空白字元
解決辦法：

父元素設定font-size=0;然後再在各個子元素中設定自己需要的大小(因為是字元，所以font-size可以改變字元的大小)
各個標籤之間不要換行，而是僅僅貼合在一起<div>1</div><div>2</div>

@media媒體查詢

@media 查詢，可以針對不同的螢幕尺寸定義不同的樣式。
使用：
- 可以在link標籤中
- 可以在css中

(1) @media語法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}


1.媒體型別
mediatype：媒體型別
- screen：電腦，平板，手機
- print：印表機
- all：所有裝置


2.媒體特性
media feature：媒體特性
- 每條媒體特性表示式都必須用括號括起來。


3. 邏輯操作符
- and
    - and運算子用於將多個媒體功能組合到一個媒體查詢中
    - 要求每個連結功能都返回true才能使查詢為true // --------------------------- 要都為tru才會為true
    - 它還用於將媒體功能與媒體型別結合在一起。
- not
- only



4.程式碼
@media screen and (max-width: 300px) { // ----- 文件寬度小於 300 畫素則修改背景顏色(background-color)
    body {
        background-color:lightblue;
    }
}


@media only screen and (min-width: 640px) and (max-width: 1136px) {
    // 表示( 媒體型別僅僅是screen ) 並且 ( 裝置寬度在 640px-1136px之間 ) 就會命中
}


@media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) {
    aside {
        display: none;
    }
    // 表示 ( 螢幕寬小於680px ) 或者 ( 螢幕寬小於750px並且橫屏 ) 時觸發
    // 逗號 ， 就是或者的意思
}
複製程式碼

在link標籤中使用媒體查詢

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

<link 
  rel="stylesheet"
  media="screen and (min-width:600px) and (max-width:900px)"
  href="style.css"
  type="text/css" 
/>
表示：螢幕寬度大於600px並且小於900px時，使用style.css檔案
複製程式碼

在css中使用媒體查詢

        @media only screen and (max-width: 765px) {
            .media {
                background: red;
            }
        }
        @media only screen and (min-width: 1200px) {
            .media {
                background: yellow;
            }
        }
        @media only screen and (min-width: 766px) and (max-width: 1199px) {
            .media {
                background: blueviolet;
            }
        }

表示：螢幕寬度
（1）小於765px，背景色red
（2）大於1200px,背景色yellow
（3）在766px-1199px之間，背景色blueviolet
複製程式碼

em

em是相對單位，em作為font-size的單位時，表示父元素的字型大小；em作為其他屬性單位時，表示自身字型大小
em佈局的缺點
- em做彈性佈局的缺點在於牽一髮而動全身，一旦某個節點的字型大小發生變化，那麼其後代元素都得重新計算

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      font-size: 20px;
    }
    .child {
      font-size: 5em;  // ----------- 當em是font-size的單位時，1em表示的是父元素的font-size的大小 ( 100px )
      width: 5em; // ---------------- 當em是其他屬性的單位時，表示的是自身font-size的大小 ( 100 * 5 = 500px )
      height: 5em;
      background: red;
    }
  </style>
</head>
<body>
  <div class="father">
    <div>father</div>
    <div class="child">child</div>
  </div>
</body>
</html>
複製程式碼

rem

原理：根據根元素的font-size的大小來計算，1rem=根元素的字型大小

css畫素，物理畫素，倍屏(畫素比)

物理畫素 = css畫素(裝置獨立畫素) * 畫素比(幾倍屏)

rem佈局

px絕對單位
em,rem,vw等都是相對單位

動態設定html的font-size大小
將px和rem做適當的比例換算（比如讓1px=1rem）
font-size的大小可以繼承，為了避免設定html的font-size影響後代的font-size，不要在body上重新設定font-size

設計稿：750px為基準的前提下


1. 動態設定html的font-size大小
2. 將px和rem做適當的比例換算（比如讓1px=1rem）
3. font-size的大小可以繼承，為了避免設定html的font-size影響後代的font-size，不要在body上重新設定font-size



1和2. 
動態設定html的font-size大小 ----------- (可以用js實現，也可以用css的calc方法實現)
(1) js
document.documetElement.style.fontSize = document.documetElement.client / 750 + 'px'
- 即一個等式：裝置實際寬度deviceWidth / 設計稿寬度750 = 某個元素的實際寬度x / 某個元素的設計稿寬度designWidth
- 得出結果：x = deviceWidth/750 * designWidth
- 最終結果：x = 1rem * designWidth = designWidth rem
(2) css-calc()
.html {
    font-size: calc(100vw / 750);
}

3. body
body {
    font-size: 16px; // 瀏覽器預設字型大小是 16px
}
複製程式碼

rem佈局 - 例項1 - 手動

rem佈局：
- 原理：rem是根據html的font-size的大小來計算元素的大小，1rem = html的font-size的大小
- 方法：用js或者css的calc()動態設定html的font-size的大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {  
      /* font-size: calc(100vw / 750); */
      // -------------------------------- 用css的calc()動態設定html的font-size
      // -------------------------------- 注意單位vw，vw表示視口的寬度，即瀏覽器的視口總寬度是100vw
      // ------ calc(100vw / 750)表示把瀏覽器寬度分成750份，設計稿基於750px設計
      // ------ 1rem = calc(100vw / 750)
      // ------ 根據公式：裝置實際寬度deviceWidth / 設計稿寬度750 = 某個元素的實際寬度x / 某個元素的設計稿寬度designWidth
      // ------ 如果：設計稿上有一個 div=100px
      // ------ 開發：div=100rem 就是該div在螢幕中實際的大小
      
    }
    body {
      font-size: 16px; // -------------- 重設font-size避免繼承html的font-size影響後代元素
    }
    .father {
      width: 100rem; // ---------------- 1：1的關係
      height: 100rem;
      background: goldenrod;
      font-size: 50rem;
    }
  </style>
</head>
<body>
  <div class="father">father</div>
  <script>
    document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) + 'px';
  </script>
</body>
</html>
複製程式碼

rem佈局 - 例項2 - 如何直接寫px達到實際是rem單位的效果，即在開發時還是使用px為單位

自己寫一個pxtorem的函式，轉換
利用第三方依賴 (postcss-pxtorem)

(1) 
// 定義 px 轉化為 rem 的函式
@function px2rem ($px) {
    @return $px + rem; // ----------- 按照上面的設定，px和rem其實就是1：1的關係了
}
.demo {
    width: px2rem(100);
    height: px2rem(100);
}






(2) 外掛
postcss-pxtorem
地址：https://github.com/cuth/postcss-pxtorem

如果是基於webpack的專案，則可以新建postcss.config.js檔案

-------------- app.vue -------------- 
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: calc(100vw / 750);
}

--------------- postcss.config.js ---------------
--------------- 也可以在vue.config.js中配置 ---------------
module.exports = {
  plugins: {
    'autoprefixer': {------------------ 解決瀏覽器字首的相容性
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': { // ------------ 自動轉換，注意該外掛只是將px轉成rem，還是要動態設定html的font-size大小
        rootValue: 1, // 基數，即1px = 1rem
        unitPrecision: 5,
        propList: ['*'],
        selectorBlackList: [],
        replace: true,
        mediaQuery: false,
        minPixelValue: 0,
        exclude: /node_modules/i
    }
  }
}


--------------- ue.config.js ---------------
module.exports = {
  lintOnSave: true,
  css: {
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-pxtorem')({
                      rootValue : 1, // 換算的基數
                      selectorBlackList  : ['weui','mu'], // 忽略轉換正則匹配項
                      propList   : ['*'],
                  }),
              ]
          }
      }
  },
}
複製程式碼

animation

animation: name duration timing-function delay iteration-count animation-direction;
animation: 動畫名持續時間速度曲線延時執行播放次數是否輪流反向執行;
iteration-count: n | infinite 播放的次數
animation-direction: normal|alternate; 是否輪流反向執行
alternate：是輪流的意思

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes go { // -------------------------------------------------- @keyframes
      from {
        left: 0;
      }
      to {
        left: 100px;
      }
    }
    .father {
      width: 200px;
      height: 200px;
      background: red;
      position:relative;
      animation: go 1s ease-in-out 2s infinite alternate; // ------------- animation
    }
  </style>
</head>
<body>
  <div class="father">father</div>
</body>
</html>
複製程式碼

1畫素物理邊框

利用 ( 偽元素, 媒體查詢, transform, 裝置畫素比 ) 實現1物理畫素邊框
裝置畫素比： window.devicePixelRatio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .one-px-border {
      height: 200px;
      width: 200px;
      position: relative;
    }
    .one-px-border::before { // ------------------------- 偽元素，當前元素的子元素，不在DOM中，提升效率
      content: ''; // ----------------------------------- 必須設定content
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: red;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2) { // ---------------- 畫素比是2，則縮放y方向的尺寸為0.5
      .one-px-border::before {
        transform: scaleY(0.5);
      }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {// ---------------- 畫素比是3，則縮放y方向的尺寸為0.333
      .one-px-border::before {
        transform: scaleY(0.33333);
      }
    }
  </style>
</head>
<body>
  <div class="one-px-border"></div>
</body>
</html>
複製程式碼

元素水平垂直居中

絕對定位
- 已知盒子寬高，margin為負的一半
- 為止盒子寬高，transform:translate(-50%, -50%)
- flex佈局
- grid佈局
- table-cell佈局

table-cell佈局


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 300px;
      width: 300px;
      border: 1px solid black;
      display: table-cell; // ----------------------------- 父元素   display: table-cell
      vertical-align: middle; // -------------------------- 垂直居中 vertical-align: middle 
      text-align: center; // ------------------------------ 水平居中 text-align: center
      // 注意：
      // 1. 如果子元素的 ( 寬高已知 )，那麼不需要( 父元素text-align: center )，而直接 ( 子元素margin: 0 auto );
      // 2. 如果子元素的 ( 寬高未知 )，( 父元素text-align: center )；並且子元素設定 ( display: inline-block; )
    }
    .child {
      // height: 100px;
      // width: 100px;
      background: red; 
      display: inline-block; 
      // --------------------------- 注意: 這裡的display: inline-block是必須的，因為寬高未知
      // --------------------------- 寬高已知，就用margin: 0 auto;而且父元素也不需要text-align:center;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child">child</div>
  </div>
</body>
</html>
複製程式碼

table-cell佈局 - 不知道子元素的寬高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 300px;
      width: 300px;
      border: 1px solid black;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .child {
      background: red; 
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child">child</div>
  </div>
</body>
</html>

複製程式碼

單行省略號和多行省略號

單行省略號 和 多行省略號

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content1 { // ------------------------------------------ 單行省略號
      background: yellow;
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .content2 { // ------------------------------------------ 多行省略號
      background: red;
      width: 100px;
      overflow: hidden;
      display: -webkit-box; // ------------------------------ display: -webkit-box
      -webkit-box-orient: vertical; // ---------------------- 方向
      -webkit-line-clamp: 2; //------------------------------ 行數
    }
  </style>
</head>
<body>
  <div class="content1">
    單行省略號
    單行省略號
    單行省略號
    單行省略號
    單行省略號
  </div>
  <div class="content2">多行省略號,多行省略號,多行省略號,多行省略號</div>
</body>
</html>
複製程式碼

word-wrap 和 word-break 的區別

word-wrap: break-word --------------------- 整個單詞一次換行
word-break: break-all ----------------------- 單詞內換行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .word-wrap {
      word-wrap: break-word;
      width: 120px;
      background: yellow;
      margin: 10px;
    }
    .word-break {
      word-break: break-all;
      width: 120px;
      background: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="word-wrap">abcdefgh go home sdfasdfasdfadfasdfasdfadfafd</div>
  <div class="word-break">abcdefgh go home sdfasdfasdfadfasdfasdfadfafd</div>
</body>
</html>
複製程式碼

block，inline，inline-block

常見的塊級元素： div, form, table, p, pre, h1~h6, dl, ol, ul,li等；
常見的內聯元素有 span, a, img, input, textarea, i,strong, em, lable, select, br 等


1. block
  - 塊級元素，獨佔一行
  - block元素可以設定寬，高等屬性
  - block可以設定margin，padding屬性
  - 預設情況下，block元素的寬度自動填滿其父元素的寬度

2. inline
  - 不獨佔一行，多個相鄰行內元素排列在同一行，直到排不下才換行
  - inline元素設定width和height無效
  - inline元素設定margin，在水平方向有效，在垂直方向無效
  - inline元素設定padding對自身有效，但是在垂直方向上不能撐開父元素

3. inline-block
  - 同時具有block的特性可以設定寬度和高度屬性，又具有line元素的不佔一行的屬性
複製程式碼

雙欄佈局 - 左側固定，右側自適應

float
flex
絕對定位

(1) 左側固定，右側自適應 - float佈局
- 左側flot: left; width = 200px;
- 右側無需設定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
    }
    .left {
      background: red;
      height: 100%;
      float: left; // ------------------------ float: left
      width: 200px;
    }
    .right { // ------------------------------ 右側無需設定
      background: yellow;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>
複製程式碼

(2)左側固定，右側自適應 - flex佈局


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .left {
      width: 200px;
      flex: 0 0 200px;
      background: red;
      height: 100%;
    }
    .right {
      flex: 1;
      background: yellow;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>
複製程式碼

(3) 絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .left {
      background: red;
      height: 100%;
      width: 200px;
      position: absolute;
    }
    .right {
      position: absolute;
      left: 200px;
      right: 0;
      background: yellow;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>
複製程式碼

三欄佈局 - 聖盃佈局

flex
絕對定位
浮動

聖盃佈局 - flex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .left {
      height: 100%;
      background: red;
      flex: 0 0 200px;
    }
    .center {
      height: 100%;
      background: blue;
      flex: 1;
    }
    .right {
      height: 100%;
      background: yellow;
      flex: 0 0 200px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>
</html>
複製程式碼

聖盃佈局 - 浮動


<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div> ## main放最後
</div>

.left {
    float: left;
    width: 100px;
}
.right {
    width: 200px;
    float: right;
}
.main {
    margin-left: 120px;
    margin-right: 220px;
}
## 或者 觸發bfc，BFC區域，不會與浮動元素重疊
.main {
    overflow: hidden;
}

複製程式碼

position

static inherit absolute relative fixed
static ：預設值，沒有定位的意思
- static：是靜止的意思
inherit：規定應該從父元素繼承 position 屬性的值
- inherit：是繼承的意思
absolute
- 絕對定位，必須要有 ( 參照物 )，脫離文件流
- 該 ( 參照物 ) 必須具有 ( 定位屬性 )，並且兩者要具有 ( 包含 ) 關係
- 如果找不到具有定位屬性且是包含關係的參照物，則會相對於瀏覽器視窗進行定位
relative
- 相對定位，參照物是元素偏移前的位置，左右 margin為auto仍然有效、並且不會脫離文件流
fixed
- 視窗定位
absolute 和 fixed 的區別：
- 當出現滾動條時，fixed定位的元素不會跟隨滾動條滾動，absolute絕對定位會跟隨滾動條滾動。

盒模型

分為標準盒模型，ie盒模型
box-sizing
- content-box 標準盒模型 --- 寬高包括：content
- border-box ie盒模型 ------- 寬高包括：content，padding，border
- inherit 繼承

資料

sticky-footer juejin.im/post/5cbbfd…
sticky-footer aotu.io/notes/2017/…

BFC zhuanlan.zhihu.com/p/25321647
BFC juejin.im/entry/584e4…
BFC www.w3ctrain.com/2016/03/28/…
BFC www.jianshu.com/p/7e04ed3f4…
CSS選擇器 juejin.im/entry/587c4…
偽元素偽類動畫 (全) zhuanlan.zhihu.com/p/36502282
偽元素偽類動畫 www.haorooms.com/post/css_wl…
偽元素偽類動畫 segmentfault.com/a/119000000…
行內塊級元素有間隙 juejin.im/post/5c7007…
媒體查詢 zhuanlan.zhihu.com/p/26882107
rem佈局：juejin.im/post/5b90e0…
rem佈局原理：juejin.im/entry/59eff…
rem不不不巨巨巨：juejin.im/post/5d7074…
rem juejin.im/post/5cf0d8…
rem可用：juejin.im/post/5df591…
兩欄三欄佈局：juejin.im/post/5e68a6…

SQL之18深入group by
2007-04-10
SQL
intent深入學習2018/8/9 am
2018-08-09
Intent
WWDC 2018：iOS 記憶體深入研究
2018-06-16
iOS記憶體
2018深入解析Android熱修復技術
2018-11-15
Android
iOS記憶體的深入探究（WWDC 2018 session 416）
2019-01-08
iOS記憶體Session
深入深入再深入 js 深拷貝物件
2018-04-18
JS物件
夯實Java基礎系列18：深入理解Java內部類及其實現原理
2019-10-08
Java
深入理解JAVA虛擬機器學習筆記18——位元組碼指令2(運算指令)
2018-06-20
Java虛擬機機器學習筆記
2018跳槽面試必備之深入理解 Java 多執行緒核心知識
2018-04-02
面試Java執行緒
18_深入解析Oracle undo原理(2)_undo表空間使用率100%問題處理
2020-03-15
Oracle
【恩墨學院】深入解讀Oracle 18c對於DBA的影響及應對措施
2018-03-21
Oracle
深入Flutter
2020-05-17
Flutter
深入mysql
2021-09-09
MySql
深入 Promise
2018-09-10
Promise
PHPzendframeworkphpunit深入
2014-12-30
PHPFramework
深入淺出FE（十四）深入淺出websocket
2020-11-29
Web
深入Java單例模式----絕對最深入
2014-04-13
Java單例模式
CPG2018核心打造資訊化平臺攜藍月亮、珀萊雅深入IT業務轉型之路
2018-03-07
深入理解javascript原型和閉包（18）——補充：上下文環境和作用域的關係
2014-09-29
JavaScript原型
深入剖析Kafka
2020-01-17
Kafka
[譯]深入Flutter
2020-05-16
Flutter
深入Windows APC
2022-02-04
Windows
深入解析Scheduler
2021-08-24
Promise深入探索
2018-12-05
Promise
深入Flutter TextField
2018-12-14
Flutter
Zookeeper深入原理
2020-11-30
深入解析AsyncTask
2013-11-18
深入掌握service
2024-05-20
[.net 物件導向程式設計深入]（18）實戰設計模式——設計模式使用場景及原則
2017-03-11
物件程式設計設計模式
深入理解javascript系列(十六):深入高階函式
2018-06-19
JavaScript函式
JDK 18：Java 18預覽 -infoworld
2021-11-02
JDKJava
深入理解Isolate
2020-01-21
深入淺出——MVC
2020-05-26
MVC
深入淺出mongoose
2019-03-03
Go
深入vuex原理(上)
2019-02-28
Vue
HTTP深入淺出
2019-04-05
HTTP
Node 深入 HTTP 模組
2019-03-18
HTTP
Node 深入TCP模組
2019-03-11
TCP

[深入18] CSS-interview

導航

前置知識

一些單詞

vh 和 vw

sticky-footer (三種方法)

(1) margin 和 padding 組合

(2) flex佈局

(3) calc屬性

清除浮動

BFC

清除浮動的方法 - 解決父元素高度塌陷

(1) overflow: hidden

(2) 偽元素 ( ::before ) ( ::after )

(3) 給浮動元素的父元素插入一個子元素，比如span,在設定clear屬性，display要為block

(4) 把浮動元素的父元素也設定浮動，從而觸發BFC (重複了，但是容易忘記寫上把)

css選擇器

元素選擇器

關係選擇器

屬性選擇器

偽類選擇器

偽類和偽元素

偽類

偽元素

衝擊波動效

css畫三角形

visibility:hidden 和 display:node 的區別

display: inline-block存在間隙的原因和解決辦法

@media媒體查詢

在link標籤中使用媒體查詢

在css中使用媒體查詢

em

rem

css畫素，物理畫素，倍屏(畫素比)

rem佈局

rem佈局 - 例項1 - 手動

rem佈局 - 例項2 - 如何直接寫px達到實際是rem單位的效果，即在開發時還是使用px為單位

animation

1畫素物理邊框

元素水平垂直居中

單行省略號 和 多行省略號

word-wrap 和 word-break 的區別

block，inline，inline-block

雙欄佈局 - 左側固定，右側自適應

三欄佈局 - 聖盃佈局

position

盒模型

資料

相關文章

單行省略號和多行省略號