[禿破前端面試] —— CSS3

時間 2020-02-20

標籤前端面試 css3 css 欄目快樂工作简体版

原文原文鏈接

前言

年前年後跳槽季，準備從面試內容入手看看前端相關知識點，旨在探究一個系列知識點，能力範圍以內的深刻探究一下。重在實踐，針對初級前端和準備面試的同窗，爭取附上實際的代碼例子以及相關試題～系列名字就用【禿破前端面試】—— 由於圈內你們共識，技術與髮量成正比。😄但願你們早日禿破瓶頸css

關於面試題或者某個知識點的文章太多了，這裏筆者只是想把我的的總結用代碼倉庫的形式記錄下來並輸出文章，畢竟理論不等於實踐，知其然也要知其因此然，實踐用過才能真正理解～ html

相關係列文章：前端

什麼是 CSS3

CSS 都知道，是層疊樣式表（Cascading Style Sheets）的簡稱，是一種標記語言，由瀏覽器解釋執行用來使頁面變得更美觀。而 CSS3 是 CSS 的最新標準，CSS3 是向後兼容的，所以全部的 CSS1/2 的特性在 CSS3 裏都是可使用的。而 CSS3 也增長了不少新特性，爲開發帶來了極大地方便，值得咱們瞭解掌握。css3

關於向前兼容和向後兼容，一些文章寫錯了，CSS3 向後兼容，因此支持 CSS1/2 的寫法，在 CSS3 裏也能夠被使用。而 CSS3 若是是向前兼容，則表示 CSS1/2 能夠接受 CSS3 的寫法，實際上並非這樣的。因此 CSS3 是向後兼容的。 git

CSS3 新特性

CSS3 的更新包含諸多特性而且很是好用，具體來講包含以下幾個大模塊的更新，咱們將經過代碼一一介紹。github

選擇器

CSS3 新增了不少選擇器屬性，極大的簡化了代碼，而且大幅度提升了程序性能。好比一個變色的表格，使用 CSS3 很是的簡便：web

tbody tr:nth-child(odd) {
  background-color: aqua;
  opacity: 0.7;
}
tbody tr:nth-child(even) {
  background-color: orange;
  opacity: 0.7;
}
複製代碼

實際效果以下圖：面試

還有不少屬性，下面簡單列出一些，還有更多的能夠去查看相關文檔以及使用方法。canvas

Ele:nth-last-child(n) 
Ele:nth-of-type(n) 
Ele:nth-last-of-type(n) 
Ele:last-child 
Ele:first-of-type 
Ele:only-child 
Ele:only-of-type 
Ele:empty 
Ele:checked 
Ele:enabled 
Ele:disabled 
Ele::selection 
Ele:not(s)
複製代碼

盒模型

盒模型有三種：box-sizing:content-box|border-box|inherit，默認的是content-box。瀏覽器

以下面代碼，容器內包含兩張圖片，寬度都是 50%，可是圖片有 border，而元素盒模型默認是 content-box，因此圖片會折行，由於溢出了。

<style>
    .container img {
      width: 50%;
      border: 1px solid #111;
    }
</style>
<div class="container">
    <img src="./css3.jpg" /><img src="./css3.jpg" />
</div>
複製代碼

那麼如何讓兩張圖片不折行，在一行裏顯示，設置box-sizing:border-box，以下面所示：

.container img {
  box-sizing: border-box;
  width: 50%;
  border: 1px solid #111;
}
複製代碼

能夠看到，變成一行顯示了。由於 border-box 的計算方式是將 border 計算在 width 內部的。

佈局

CSS3 新增了不少佈局相關的屬性，好比 flex 佈局和多列布局。

Flex 佈局

Flex 佈局我的認爲真的是最方便最簡潔的佈局，Flex 的相關屬性特別多，記住也不太現實，面試的時候會經常使用的幾個就好了，具體的我以爲阮一峯的那篇文章寫得仍是不錯的，我這裏就不復制粘貼了。 —— 阮一峯 Flex 佈局

多列布局

多列布局是 CSS3 新增的屬性，在處理須要多列展現內容的時候，極其的方便。主要包括以下幾個屬性：

column-count：設置佈局的列數

<style>
    .column-2 {
      column-count: 2;
    }
    .column-3 {
      column-count: 3;
    }
</style>
複製代碼

以下圖所示，很是簡單的就實現了幾列的均勻佈局。

column-gap：規定列之間的間隔

.column-2 {
  column-count: 2;
  column-gap: 80px;
}
複製代碼

column-rule: 屬性設置列之間的寬度、樣式和顏色規則

.column-3 {
  column-count: 3;
  column-rule:3px outset #ff0000;
}
複製代碼

能夠看到，很是簡單的就實現了佈局，代碼極其的簡潔，而且兼容性也還不錯，基本如今主流瀏覽器都可以支持。

多列布局很是適合實現相似報紙、論文以及書本文章類型的佈局。

背景和邊框

CSS3 對元素的背景和邊框新增了一些屬性。

背景

background-clip: 規定背景的繪製區域

.container {
  border: 4px solid orchid;
  padding: 20px;
  width: 300px;
  height: 200px;
  background-image: url('./css3.jpg');
  background-clip: border-box; // 默認的，從border開始
}

<div class="container" />
複製代碼

.container {
  border: 4px solid orchid;
  padding: 20px;
  width: 300px;
  height: 200px;
  background-image: url('./css3.jpg');
  background-clip: content-box;
}
複製代碼

以下圖能夠看到，繪製的區域不包含 padding。

backround-origin: 規定背景圖片的定位區域

background-origin: border-box; 從 border. 開始計算 background-position;

background-origin: padding-box; 從 padding. 開始計算 background-position;

位置如上圖所示，從紅點處開始繪製。

background-origin: content-box; 從 content. 開始計算 background-position;

background-size: 規定背景圖片的尺寸

background-size: contain; 縮小圖片以適合元素（維持像素長寬比）

background-size: cover; 擴展元素以填補元素（維持像素長寬比）

background-size: 100px 100px; 縮小圖片至指定的大小 .

background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包含元素的尺寸 .

邊框

關於邊框就很是簡單了，就是幾個邊框特有的屬性，這裏就直接用代碼來講明。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background-color: gold;
      margin: 20px 0;
    }
    .radius {
      border-radius: 8px;
    }
    .half-radius {
      border-top-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    .shadow {
      box-shadow: 10px 10px 5px #888888;
    }
    .border-img {
      width: 200px;
      border:15px solid transparent;
      border-image: url(border.png) 30 30 round;
      -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
      -webkit-border-image: url(border.png) 30 30 round; /* Safari 和 Chrome */
      -o-border-image: url(border.png) 30 30 round; /* Opera */
    }
  </style>
</head>
<body>
  <div class="box radius">
    圓角
  </div>
  <div class="box half-radius">
    部分圓角
  </div>
  <div class="box shadow">
    邊框陰影
  </div>
  <div class="border-img">
    邊框背景圖
  </div>
</body>
</html>
複製代碼

具體效果如上圖所示，而且須要特別注意的是，邊框背景圖設置的時候，border 須要設置成透明～

文本效果

字體：font-face

第一種，若是你有字體文件，能夠經過下面這種方式全劇引入字體。

@font-face { 
  font-family: fontname; 
  src:url(font-name.eot); 
} 
複製代碼

第二種，CSS3 新增<font>標籤來進行字體的設置。

<p><font style="font-family: STKaiti">經過font標籤來設置字體</font></p>
複製代碼

text-overflow

.overflow {
  white-space: nowrap; 
  width: 100px;
  overflow: hidden;
  text-overflow:ellipsis;
}
<p class="overflow">
    粉色的來訪記錄開始你們分開了就是打開理解費拉達斯解放路口的時間見風使舵冷靜的思考了幾分短褲藍色粉色的看了飛機老師
</p>
複製代碼

text-shadow && word-wrap

文本陰影效果 && 文本換行效果

.shadow {
  width: 100px;
  text-shadow: 5px 5px 5px #FF0000;
}
.wordwrap {
  word-wrap: break-word;
}

<p class="shadow wordwrrap">
    粉色的來訪記錄開始你們分開了就是打開理解費拉達斯解放路口的時間見風使舵冷靜的思考了幾分短褲藍色粉色的看了飛機老師
</p>
複製代碼

2D/3D 轉換

CSS3 新增 2D/3D 轉換來讓咱們對元素進行移動、縮放、轉動、拉長或拉伸。經過 CSS 來設置性能要比 JS 設置性能更好，所以十分值得學習。

2D 轉換

2D 轉換就是對全部的操做都在一個平面內進行，經過對 X 和 Y 的操做來改變元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform</title>
  <style>
    .translate-2d {
      width: 100px;
      height: 100px;
      background-color: aqua;
      transform: translate(150px, 100px);
    }
    .rotate-2d {
      width: 100px;
      height: 100px;
      background-color: orange;
      transform: rotate(30deg);
    }
    .scale-2d {
      width: 100px;
      height: 100px;
      background-color: green;
      transform: scale(0.5, 2);
    }
    .matrix-2d {
      width: 100px;
      height: 100px;
      background-color: red;
      transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    }
  </style>
</head>
<body>
  <h1>2D 轉換</h1>
  <div class="translate-2d">
    距離左150
    <br/>
    距離頂部100
  </div>
  <div class="rotate-2d">
    旋轉30度
  </div>
  <div class="scale-2d">
    x縮小一倍
    <br />
    y擴大一倍
  </div>
  <div class="matrix-2d">
    matrix方法
  </div>
</body>
</html>
複製代碼

3D 轉換

3D 與 2D 的不一樣之處在於 3D 轉換是立體的，新增了 Z 軸，雖然也是對元素進行操做，可是效果與 2D 是有明顯不一樣的，而且全部的都是經過rotate+X/Y/Z來進行的。

經過一個簡單的小動畫來查看一下兩者的區別：

@keyframes animate-2d {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes animate-3d {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(360deg); }
}
複製代碼