轉載自帥地部落格

1、css 優先順序

• !important 會覆蓋頁面內任何位置的元素樣式
• 內聯樣式，如 style=”color: green”，權值為 1000
• ID 選擇器，如#app，權值為 0100
• 類、偽類、屬性選擇器，如.foo, :first-child, div[class=”foo”]，權值為 0010
• 標籤、偽元素選擇器，如 div::first-line，權值為 0001

2、display的屬性值及其作用

• 作用：

display 屬性規定元素應該生成的框的型別，也就是說設定了display 屬性的元素會根據 display 的取值在瀏覽器中進行不同的顯示。

• 屬性值：

none：元素不顯示，並且會從文件流中移除

block：塊型別，預設寬度為父元素寬度，可設定寬高，換行顯示

inline：行內元素型別，預設寬度為內容寬度，不可設定寬高，同行顯示

inline-block：預設寬度為內容寬度，可以設定寬高，同行顯示

list-item：像塊型別元素一樣顯示，並新增樣式列表標記

table：此元素會作為塊級表格來顯示

inherit：規定應該從父元素繼承 display 屬性的值

3、display的block、inline和inline-block的區別

block：會獨佔一行，多個元素會另起一行，可以設定 width、height、margin 和 padding 屬性；

inline：元素不會獨佔一行，設定 width、height 屬性無效。但可以設定水平方向的 margin 和 padding 屬性，不能設定垂直方向的 padding 和 margin；

inline-block：將物件設定為 inline 物件，但物件的內容作為 block 物件呈現，之後的內聯物件會被排列在同一行內

4、行內元素和塊級元素的特點

• 行內元素

設定寬高無效

可以設定水平方向的 margin 和 padding 屬性，不能設定垂直方向的 padding 和 margin；

不會自動換行；

• 塊級元素

可以設定寬高；

設定 margin 和 padding 都有效；

可以自動換行；

多個塊狀，預設排列從上到下。

5、隱藏元素的方法

display:none：渲染樹不會包含該渲染物件，因此該元素不會在頁面中佔據位置，也不會響應繫結的監聽事件

visibility:hidden：元素在頁面中仍佔據空間，但是不會響應繫結的監聽事件

opacity: 0：將元素的透明度設定為 0，以此來實現元素的隱藏。元素在頁面中仍然佔據空間，並且能夠響應元素繫結的監聽事件

position: absolute：通過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏

z-index: 負值：來使其他元素遮蓋住該元素，以此來實現隱藏

6、link和@import的區別

兩者都是外部引用CSS的方式，它們的區別如下：

link引用CSS時，在頁面載入時同時載入；@import需要頁面網頁完全載入以後載入

link是XHTML標籤，無相容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支援

link支援使用Javascript控制DOM去改變樣式；而@import不支援

link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS

7、transition 和 animation 的區別

• transition：

是過渡屬性，強調過渡，它的實現需要觸發一個事件（比如滑鼠移動上去，焦點，點選等）才執行動畫。它類似於flash的補間動畫，設定一個開始關鍵幀，一個結束關鍵幀。

• animation：

是動畫屬性，它的實現不需要觸發事件，設定好時間之後可以自己執行，且可以迴圈一個動畫。它也類似於 flash 的補間動畫，但是它可以設定多個關鍵幀（用@keyframe定義）完成動畫

8、display:none 與 visibility:hidden 的區別

這兩個屬性都是讓元素隱藏不可見，兩者區別如下：

• 在渲染樹中

display:none會讓元素完全從渲染樹中消失，渲染時不會佔據任何空間；

visibility:hidden不會讓元素從渲染樹中消失，渲染的元素還會佔據相應的空間，只是內容不可見

• 是否是繼承屬性

display:none是非繼承屬性，子孫節點會隨著父節點從渲染樹消失，通過修改子孫節點的屬性也無法顯示；

visibility:hidden是繼承屬性，子孫節點消失是由於繼承了hidden，通過設定visibility:visible可以讓子孫節點顯示；

• 修改常規文件流中的元素

元素的display通常會造成文件的重排，但是修改visibility屬性只會造成本元素的重繪

9、偽元素和偽類的區別和作用

偽元素與偽類的根本區別在於：

操作的物件元素是否存在於原來的dom結構裡。

偽元素的操作物件是新生成的dom元素，而不是原來dom結構裡就存在的；

而偽類恰好相反，偽類的操作物件是原來的dom結構裡就存在的元素。

10、盒子模型

CSS3中的盒模型有以下兩種：標準盒子模型、IE盒子模型

盒模型都是由四個部分組成的，分別是 margin、border、padding 和 content。

標準盒模型和IE盒模型的區別在於設定width和height時，所對應的範圍不同

• 標準盒模型的 width 和 height 屬性的範圍只包含了 content，
• IE盒模型的 width 和 height 屬性的範圍包含了 border、padding 和 content

可以通過修改元素的 box-sizing 屬性來改變元素的盒模型：

• box-sizeing: content-box表示標準盒模型（預設值）
• box-sizeing: border-box表示 IE 盒模型（怪異盒模型）

11、li 與 li 之間有看不見的空白間隔是什麼原因引起的 如何解決

• 原因：

瀏覽器會把 inline 內聯元素間的空白字元（空格、換行、Tab等）渲染成一個空格。

為了美觀，通常是一個<li>放在一行，這導致<li>換行後產生換行字元，它變成一個空格，佔用了一個字元的寬度。

• 解決辦法：

消除<ul>的字元間隔 letter-spacing:-8px，不足：這也設定了<li>內的字元間隔，因此需要將<li>內的字元間隔設為預設 letter-spacing:normal

12、CSS3中有哪些新特性

• 新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）
• 圓角 （border-radius:8px）
• 多列布局 （multi-column layout）
• 陰影和反射 （Shadoweflect）
• 文字特效 （text-shadow）
• 文字渲染 （Text-decoration）
• 線性漸變 （gradient）
• 旋轉 （transform）
• 增加了旋轉,縮放,定位,傾斜,動畫,多背景

13、對line-height 的理解及其賦值方式

• line-height的概念

• line-height 的賦值方式

帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高

純數字：會把比例傳遞給後代。例如，父級行高為 1.5，子元素字型為 18px，則子元素行高為 1.5 * 18 = 27px

百分比：將計算後的值傳遞給後代

14、CSS 優化和提高效能的方法有哪些

15、單行、多行文字溢位隱藏

• 單行文字溢位

overflow: hidden;            // 溢位隱藏
text-overflow: ellipsis;      // 溢位用省略號顯示
white-space: nowrap;         // 規定段落中的文字不進行換行

• 多行文字溢位

overflow: hidden;            // 溢位隱藏
text-overflow: ellipsis;     // 溢位用省略號顯示
display:-webkit-box;         // 作為彈性伸縮盒子模型顯示
-webkit-box-orient:vertical; // 設定伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3;        // 顯示的行數

注意：由於上面的三個屬性都是 CSS3 的屬性，沒有瀏覽器可以相容，所以要在前面加一個-webkit-來相容一部分瀏覽器

16、對 CSS 工程化的理解

17、z-index屬性作用，在什麼情況下會失效

• 作用：

z-index元素的 position 屬性需要是 relative，absolute 或是 fixed

• z-index屬性在下列情況下會失效：

父元素 position 為 relative 時，子元素的 z-index 失效。解決：父元素 position 改為 absolute 或 static；

元素沒有設定 position 屬性為非 static 屬性。解決：設定該元素的 position 屬性為 relative，absolute 或是 fixed 中的一種；

元素在設定 z-index 的同時還設定了 float 浮動。解決：float 去除，改為 display：inline-block；

18、px、em、rem的區別及使用場景

• 三者的區別：

1. px是固定的畫素，一旦設定了就無法因為適應頁面大小而改變
2. em和rem相對於px更具有靈活性，他們是相對長度單位，其長度不是固定的，更適用於響應式佈局
3. em是相對於其父元素來設定字型大小，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小。而rem是相對於根元素，這樣就意味著，只需要在根元素確定一個參考值

• 使用場景：

1. 對於只需要適配少部分移動裝置，且解析度對頁面影響不大的，使用 px 即可
2. 對於需要適配各種移動裝置，使用 rem，例如需要適配 iPhone 和 iPad 等解析度差別比較挺大的裝置

19、兩欄佈局的實現

• 利用浮動，將左邊元素寬度設定為200px，並且設定向左浮動。將右邊元素的margin-left設定為200px，寬度設定為auto（預設為auto，撐滿整個父元素

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}

• 利用浮動，左側元素設定固定大小，並左浮動，右側元素設定 overflow: hidden; 這樣右邊就觸發了 BFC，BFC 的區域不會與浮動元素髮生重疊，所以兩側就不會發生重疊

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
.right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }

• 利用flex佈局，將左邊元素設定為固定寬度 200px，將右邊的元素設定為 flex:1

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}

• 利用絕對定位，將父級元素設定為相對定位。左邊元素設定為absolute定位，並且寬度設定為200px。將右邊元素的margin-left的值設定為200px

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}

• 利用絕對定位，將父級元素設定為相對定位。左邊元素寬度設定為200px，右邊元素設定為絕對定位，左邊定位為200px，其餘方向定位為0

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}

20、如何根據設計稿進行移動端適配

移動端適配主要有兩個維度：

• 適配不同畫素密度，針對不同的畫素密度，使用 CSS 媒體查詢，選擇不同精度的圖片，以保證圖片不會失真
• 適配不同螢幕大小，由於不同的螢幕有著不同的邏輯畫素大小，所以如果直接使用 px 作為開發單位，會使得開發的頁面在某一款手機上可以準確顯示，但是在另一款手機上就會失真。為了適配不同螢幕的大小，應按照比例來還原設計稿的內容

為了能讓頁面的尺寸自適應，可以使用 rem，em，vw，vh 等相對單位

21、對Flex佈局的理解及其使用場景

22、響應式設計的概念及基本原理

• 概念：

響應式網站設計（Responsive Web design）是一個網站能夠相容多個終端，而不是為每一個終端做一個特定的版本

• 原理：

基本原理是通過媒體查詢（@media）查詢檢測不同的裝置螢幕尺寸做處理；關於相容： 頁面頭部必須有mate宣告的viewport

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

23、為什麼需要清除浮動 清除浮動的方式

• 浮動的定義：

非IE瀏覽器下，容器不設高度且子元素浮動時，容器高度不能被內容撐開。 此時，內容會溢位到容器外面而影響佈局。這種現象被稱為浮動（溢位）

• 浮動的工作原理：

浮動元素脫離文件流，不佔據空間（引起“高度塌陷”現象）

浮動元素碰到包含它的邊框或者其他浮動元素的邊框停留

24、對BFC的理解，如何建立BFC

25、display、position、float的關係

• 首先判斷 display 屬性是否為 none，如果為 none，則 position 和 float 屬性的值不影響元素最後的表現
• 然後判斷 position 的值是否為 absolute 或者 fixed，如果是，則 float 屬性失效，並且 display 的值應該被設定為 table 或者 block，具體轉換需要看初始轉換值
• 如果 position 的值不為 absolute 或者 fixed，則判斷 float 屬性的值是否為 none，如果不是，則 display 的值則按上面的規則轉換。注意，如果 position 的值為 relative 並且 float 屬性的值存在，則 relative 相對於浮動後的最終位置定位
• 如果 float 的值為 none，則判斷元素是否為根元素，如果是根元素則 display 屬性按照上面的規則轉換，如果不是，則保持指定的 display 屬性值不變

總的來說，可以把它看作是一個類似優先順序的機制，'position:absolute' 和 'position:fixed' 優先順序最高，有它存在的時候，浮動不起作用，'display' 的值也需要調整

其次，元素的 'float' 特性的值不是 'none' 的時候或者它是根元素的時候，調整 'display' 的值；

最後，非根元素，並且非浮動元素，並且非絕對定位的元素，'display' 特性值同設定值

26、absolute 與 fixed 共同點與不同點

• 共同點：

改變行內元素的呈現方式，將 display 置為 inline-block

使元素脫離普通文件流，不再佔據文件物理空間

覆蓋非定位文件元素

• 不同點：

abuselute與fixed的根元素不同，abuselute的根元素可以設定，fixed根元素是瀏覽器。

在有滾動條的頁面中，absolute會跟著父元素進行移動，fixed固定在頁面的具體位置

27、margin和padding分別適合什麼場景使用

• 何時使用margin：

需要在border外側新增空白

空白處不需要背景色

上下相連的兩個盒子之間的空白，需要相互抵消時

• 何時使用padding：

需要在border內側新增空白

空白處需要背景顏色

上下相連的兩個盒子的空白，希望為兩者之和。

相容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決

28、列舉一些CSS框架

Bootstrap：基於HTML、CSS、JavaScript 開發，由動態 CSS 語言 Less寫成

React 元件

Layui：遵循原生 HTML/CSS/JS 的書寫與組織形式

ElementUI：基於 Vue 2.0的桌面端元件庫

29、overflow屬性在CSS中被用於什麼

• 作用：

overflow 屬性規定當內容溢位元素框時發生的事情

如果值為 scroll，不論是否需要，使用者代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條

• 可能的值：

overflow: auto：如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容

overflow: hidden：內容會被修剪，並且其餘內容是不可見的

overflow: scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。

overflow: visible：預設值。內容不會被修剪，會呈現在元素框之外

30、重排與重繪

• 重排 reflow（迴流）：當瀏覽器發現某個部分發生了變化影響了佈局，需要倒回去重新渲染

新增、刪除可見的 DOM 元素

元素位置改變、尺寸改變、內容改變

頁面初始化、resize 事件等

• 重繪 repaint：改變某個元素的背景色、文字顏色、邊框顏色等影響周圍或內部佈局的屬性時，螢幕的一部分要重畫，但元素的幾何尺寸不變

注意：

①迴流必定引起重繪，而重繪不一定會引起迴流

②display: none;的節點不會被加入渲染樹，而visibility: hidden;會被加入渲染樹

③display:none;會觸發迴流；visibility: hidden;會觸發重繪

31、position 中的 relative 和 absolute 的定位原點是什麼

• absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位

• fixed （老IE不支援）：生成絕對定位的元素，相對於瀏覽器視窗進行定位

• relative：生成相對定位的元素，相對於其正常位置進行定位

• static：預設值，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告）

• inherit：規定從父元素繼承 position 屬性的值


32、float的使用

33、flex彈性佈局

34、常見居中方案

35、製作一個訪問量很高的大型網站，你會如何來管理所有 CSS 檔案、js 與圖片

36、IE6 BUG的解決方法