前言：這篇隨筆是為了准備后面的面試而整理的，網上各種面試題太多了，但是我感覺很多太偏了，而且實際開發過程中並不會遇到，因此這里我整理一些比較常用的，或者是相對比較重要的知識點，每個知識點都會由淺入深，把相關的都放在一起，便於自己復習，感興趣的朋友也可以一起學習收藏。
（題目的順序不重要，比較隨意，但是會分類整理，集中復習）
一，CSS Box相關
（基本都會問這題，必考）
1，怎么理解CSS里盒子（Box）的概念？
盒子（Box） 是 CSS 布局的對象和基本單位，一個頁面就是由N個盒子組合而成的，我們通過設置display以及元素類型來決定這個box的類型。
2，解釋一下盒模型？有哪些類型？
一個基本的盒模型，包括content(width/height)，padding，border，margin
目前有兩種盒子模型，IE盒模型和W3C標准盒模型，兩者的區別是，W3C標准盒模型，寬高是只有內容content，沒有padding和border的，像這樣：
而IE盒模型，寬高不光有content，還包含了padding和border，像這樣：
3，如何設置兩者？
box-sizing: content-box; // W3C標准盒模型（默認情況下）
box-sizing: border-box; // IE盒模型
（這個也比較好記，標准的就是只有內容，就是content，而IE就是有border的）
4，如何獲取盒子的寬高？
我們用得最多的就是dom.offsetWidth/offsetHeight，這個包含了width/height，padding和border，是項目中最常用的，兼容性也最好，記住這個就行了
（為什么我用dom.style.width/height，獲取到的是空，因為這個style.width只能獲取到行內樣式，對於style標簽中的和link外鏈的樣式都無法獲取到，所以還是用offsetWidth好點）
5，盒子（Box）常見定位方案？
普通文檔流、浮動流、絕對定位流
6，我們常說的BFC、IFC、GFC、FFC是什么？
剛剛上面講了盒模型，講了盒子的定位方案，那盒子內部是如何渲染排列的呢？答案就是Formatting context（格式化上下文）。
Formatting context（格式化上下文）是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。
而題中所提到的BFC、IFC、GFC和FFC都是屬於Formatting context（格式化上下文），它們的全稱是
【Block formatting context】(BFC) 塊級格式化上下文
【Inline formatting context】(IFC) 內聯格式化上下文
【Grid formatting context】(GFC) 網格布局格式化上下文
【Flex formatting context】(FFC) 自適應格式化上下文
這里重點先講一下BFC
BFC的特性是什么？
- 盒子從頂部開始垂直排列
- 兩個相鄰的盒子之間的垂直距離由外邊距（既margin）決定
- 塊級格式化上下文中相鄰的盒子之間的垂直邊距折疊
- 每個盒子的左外邊與容器的左邊接觸（從右到左的格式化則相反），即使存在浮動也是如此，除非盒子建立了新的塊格式化上下文
- 形成了BFC的區域不會與float box重疊
- 計算BFC的高度時，浮動子元素也參與計算
- 根元素（html）或其他包含它的元素
- 浮動元素
- 絕對定位元素
- 非塊級盒子的塊級容器（inline-blocks, table-cells, table-captions等）
- overflow不為visiable的塊級盒子
（這里我們不用死記硬背，我們重點看一下平時開發中BFC會遇到哪些問題，以及如何利用BFC去解決這些問題）
問題一：同一個BFC中相鄰的盒子之間（垂直方向）的margin（上一個盒子的margin-bottom和下一個盒子的margin-top）重疊
<!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>防止margin重疊</title> </head> <style> *{ margin: 0; padding: 0; } p { color: #f55; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } </style> <body> <p>看看我的 margin是多少</p> <p>看看我的 margin是多少</p> </body> </html>
生成的效果是這樣的：
原因是margin重疊了。
那解決方案就是讓它們不要在同一個BFC中就行了，改成這樣：
<!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>防止margin重疊</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
overflow: hidden;
}
</style>
<body>
<p>看看我的 margin是多少</p>
<div>
<p>看看我的 margin是多少</p>
</div>
</body>
</html>
效果如圖：
成功了！
問題二：對於使用了float的盒子，如何避免左側貼邊重疊？
<!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>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
效果如圖：
因為第一個left元素用了float，所以脫離了普通文檔流，而right元素因為在BFC內，自動貼到左側，所以重疊了。
解決方案是，利用BFC這一特性：
· 形成了BFC的區域不會與float box重疊
所以讓right也形成BFC就行了：
<!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>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
overflow: hidden;
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
效果如圖：
解決了！
問題三：如何解決float元素無法撐起外層容器的高度問題？這也是個典型的清除浮動問題
代碼如下：
<!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>清除浮動</title>
</head>
<style>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
效果如圖：
因為內部兩個子元素脫離了文檔流，所以無法撐起。
解決方案是利用BFC特性的最后一條：
- 計算BFC的高度時，浮動子元素也參與計算
因此將父元素設為BFC：
<!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>清除浮動</title>
</head>
<style>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
overflow: hidden;
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮動</title>
</head>
<style>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
}
// 這里是為了兼容IE6，IE7，但是現實需求中沒有那么低版本的瀏覽器，所以可不寫
.clearfix {
zoom: 1;
}
</style>
<body>
<div class="par clearfix">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
====
總結：
上面的幾個案例，基本都是通過添加overflow: hidden; 屬性來創建BFC，這個也是比較常見的方式。
二，選擇器相關
1，偽類和偽元素
簡單說，偽類就是單冒號，偽元素就是雙冒號
2，列舉一些常用的偽類或偽元素？
偽類：（大部分都是CSS 3里新增的）
: hover 鼠標hover
: nth-child(n) 選中父元素下的第n個子元素
: not() 不是什么什么
: first-child 第一個子元素
: last-child 最后一個子元素
: checked 單選框或復選框被選中的
偽元素：（說實話就用兩個）
:: before
:: after
3，選擇器權重計算比較？
一般討論四種選擇器：
元素或偽元素(::) （x，x，x，0）
class選擇符或偽類(:) （x，x，0，x）
id選擇符 （x，0，x，x）
標簽內選擇符 （0，x，x，x）
通常計算方法就是每出現一個，就在對應的權位上加1，不可進位，兩個選擇器比較權重就是從首位開始比較，數字相同的話就比較下一個。
!important 權位最高，不在討論范圍內，可以理解為 （1，x，x，x，x）
相同都有 !important，就看誰在后面
三，圖片相關
1，png，jpg，jpeg，gif，webp，bmp。。。怎么選擇圖片類型？有哪些優缺點？
首先jpg和jpeg就可以理解為同一個東西，這里就只講jpg。
jpg：
優點：就是圖片壓縮后不至於太失真，色彩還原度較高
缺點：無法做透明圖，就是沒辦法摳出一個圖片
適用場景：基本上網頁上的大圖都是jpg
png：
優點：能做透明圖
缺點：體積大，如果色彩較多的，是同等jpg的5-6倍
適用場景：網頁上的圖標，一般都是用png24，png8有點半透明
gif：
優點：支持動畫
缺點：顏色種類有限
適用場景：各種小動畫。。
webp:
優點：簡單說就是壓得更小，圖片質量卻不差
缺點：兼容性差，IE和Safari不支持
適用場景：指定瀏覽器環境下可用
bmp：
優點：高質量圖片
缺點：太大了
適用場景：Windows桌面壁紙
2，聊聊Base 64圖片
優點：減少http請求，因為圖片被base64編碼進了 css文件中（一般是進css文件）
缺點：如果加進css文件中去，css體積會增大，而且會阻塞渲染，（普通圖片加載是異步的）
使用方法：可以配置webpack，借助url-loader
module: {
rules: [
{
test: /\.(gif|png|jpg|woff|svg|ttf|eot)$/ ,
use:[{
loader:'url-loader',
options: {
limit:500,
outputPath: 'images/',
name:'[name].[ext]'
}
}]
}
]
}
如果圖片低於500 byte，就會自動轉成base 64格式
適用場景：適用於一些體積較小的圖片
四，字體相關
1，怎么在Chrome寫出小於12px的字體？
谷歌瀏覽器能支持的最小字體大小是12px，想要縮小字體，借助CSS3 transform來縮小，類似於做一個1px的發絲線
如果是10px，就是給20px的字體容器上，加一個 transform: scale(0.5) 屬性，注意，容器一定要是塊級元素或者行內塊級元素
2，如何自定義字體？
（持續更新。。。）