傳送門：

WEB前端面試知識梳理 - CSS部分
WEB前端面試知識梳理 - JS部分

最近在看大廠的一些面試題，發現很多問題都是平時沒有在意的，很多知識都是知道一點但又很模糊說不出個所以然來，反思自己這幾年來貌似只是為了工作而工作，忽略了很多本該了解的基礎知識，基礎知識不牢固導致進步很慢，借這次機會空閑的時候惡補一下，慢慢梳理并記錄下來。

=================================================

盒模型

概念

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，有W3C標準盒模型和IE怪異盒模型兩種，由里到外分別包含：content(內容)，padding(內邊距)，border(邊框)，margin(外邊距)

標準模型和怪異模型

區別：兩種盒模型的內容計算方式不同

• w3c標準盒模型：
  總元素寬度 = content部分的寬度
  總元素高度 = content部分的高度
• IE（怪異）盒模型：
  總元素寬度 = content + padding + border 這三個部分的寬度
  總元素高度 = content + padding + border 這三個部分的高度

開發中常用哪種模型？為什么？

常用IE盒模型，因為使用了IE盒模型的布局更可控。
舉例1：因為如果想保持一個盒子的真實占有寬度不變，那么加width的時候就要相應的減少左右的padding。加padding的時候就要相應的減少width，不然就會導致盒子真實占有寬度增加，導致布局發生改變，比如同一行的盒子因為寬度超出被擠下去了。

舉例2：移動端布局采用百分比的情況很常見，如果有兩個div寬度分別為50%，橫向排列，這時候如果給其中一個div加固定的border值（非百分比），還要保證兩個div橫向排列不掉下來，并且真實占有寬度不發生改變，這種情況下如果用IE盒模型就方便的多，不用過多調整，直接加border值就好。

改變容器的盒模型組成方式

借助css3的box-sizing屬性

??

box-sizing: content-box; //W3C盒模型 box-sizing: border-box; //IE盒模型

BFC

BFC: 一個獨立的渲染區域，它規定了內部的塊級盒子如何布局，并且與這個區域外部毫不相干，在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。

BFC布局特點：

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
• 每個元素的最左邊，與包含塊的最左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
• BFC的區域不會與浮動盒子重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。 計算BFC的高度時，浮動元素也參與計算

哪些元素會生成BFC?

• float屬性不為none
• position為absolute或fixed
• display為inline-block, table-cell, table-caption, flex, inline-flex
• overflow不為visible

應用

　　1. 自適應兩欄布局
　 2. 清除內部浮動
　　3. 防止垂直 margin 重疊

關于定位

position定位的幾種方式以及主要區別？

• static(靜態定位)：默認值，不脫離文檔流
• relative(相對定位)：元素相對自身偏移某個位置定位，不脫離文檔流，會引起
• absolute(絕對定位)：相對于其最近的父級塊元素定位，脫離文檔流
• fixed(固定定位)：相對于可視窗口定位，脫離文檔流

relative和translate都是基于自身的移動，有什么區別？

• translate不會引起頁面的重排，但relative會引起重排

link 與 @import 的區別

擴展：文章傳送門

• 從屬關系區別：
  link是HTML標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。
  @import是CSS語法，只有導入樣式表的作用；
• 加載順序區別
  link標簽引入的 CSS 被同時加載；
  @import引入的 CSS 將在頁面加載完畢后被加載。
• 兼容性區別
  link標簽作為 HTML 元素，不存在兼容性問題。
  @import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；
• DOM可控性區別
  通過JavaScript可以動態創建或者刪除<link>標簽，進而操作CSS
  @import不支持。

總結

以上是生活随笔為你收集整理的【持续..】WEB前端面试知识梳理 - CSS部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。