加油！！！
1、實現一個div在不同分辨率下的水平垂直居中
.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid pink; width: 100px; height: 100px; }
2、左右固定，中間自適應樣式
<style> .box { display: flex; height: 200px; } .left { flex: 0 0 200px; background-color: pink; } .center { flex: 1; background-color: yellow; } .right { flex: 0 0 200px; background-color: skyblue; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body>
3、闡述清楚浮動的幾種方式（常見問題）
1、浮動的產生 float: left/right（設置后產生浮動） 初衷：浮動原先的設計初衷是為了實現文字環繞效果 結果：父元素高度塌陷，理解起來就是元素浮動飄起來了，失去高度，下面的元素會頂上來，就造成了原有的元素背景不見了，margin/padding也不能正常顯示 2、解決浮動的方法 （1）clear: both，在元素最后下加一個元素設置clear：both屬性，缺點是會增加多余無用的html元素 <div class="container"> <div class="left">left浮動</div> <div class="right">right浮動</div> <div style="clear:both;"></div> </div> （2）使用after偽元素 .box 父元素 .box::after { content: ' '; display: block; clear: both; } （3）給父元素設置明確的高度，缺點是並不是所有元素的高度都是固定 （4）給父級元素設置overflow:hidden, 缺點：不能和position配合使用
4、解釋css sprites ，如何使用？
1、什么是精靈圖
將一些小圖標放在一張圖上
2、精靈圖的優點
減少圖片的總大小
減少下載圖片資源請求，減小建立連接的消耗
3、精靈圖的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px 20px;
}
// 第一個數是x軸， 第二個數是y軸
5、box-sizing常用的屬性有哪些？分別有什么作用？
（1）content-box
寬高是元素本身的寬高 不包含border+padding
（2）border-box
元素的寬高已經包含了border+padding
（3）inherit
從父元素繼承box-sizing屬性
6、CSS樣式覆蓋規則
!important > 內聯樣式 > id選擇 > （class選擇 = 偽類選擇） > (標簽選擇 = 偽元素選擇)
7、請簡要描述margin重合問題，及解決方式
問題：相鄰兩個盒子垂直方向上的margin會發生重疊，只會取比較大的margin
解決：（1）設置padding代替margin
（2）設置float
（3）設置overflow
（4）設置position：absolute 絕對定位
（5）設置display： inline-block
8、對<meta></meta>標簽有什么理解
1、meta是html文檔頭部的一個標簽，這個標簽對用戶不可見，是給搜索引擎看的。
2、meta標簽屬性用法分成兩大類
3、<meta charset="UTF-8"> 使用的編碼格式，大部分是utf-8
9、display none visibility hidden區別？
10、重繪和回流（哪些情況重繪，哪些回流）
11、說說你對語義化的理解？
12、為什么要初始化css樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值不同，如果不初始化css，會導致不同瀏覽器頁面間的顯示差異。
13、移動端適配1px問題
* { margin: 0; padding: 0; } ul, li{ list-style: none; } .hairlines { width: 300px; margin: 100px auto; } .hairlines li{ position: relative; border:none; margin-top: 10px; } .hairlines li:after{ content: ''; position: absolute; left: 0; bottom: 0; background: #cccccc; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
14、居中為什么要使用transform（為什么不使用marginLeft/Top）
transform 屬於合成屬性，不會引起整個頁面的回流重繪，節省性能消耗，但是占用內存會大些
top/left屬於布局屬性，會引起頁面layout回流和repaint重繪。
15、介紹css3中position:sticky
說實話我沒有用過這個屬性也沒遇到過這個問題，但出於人道主義最后還是找一下答案吧
16、上下固定，中間滾動布局如何實現
方法一：利用定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> html, body { height: 100%; } .top, .bottom { width: 100%; height: 100px; background-color: pink; position: relative; top: 0; left: 0; } .bottom { bottom: 0; } .center { width: 100%; background-color: skyblue; height: calc(100% - 200px); overflow: auto; } </style> <body> <div class="top"></div> <div class="center"> <!-- 填充內容測試 --> </div> <div class="bottom"></div> </body> </html>
方法二：利用flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> html, body { padding: 0; margin: 0; height: 100%; } body { display: flex; flex-direction: column; } .top, .bottom { width: 100%; height: 100px; background-color: pink; } .center { width: 100%; background-color: skyblue; flex: 1; overflow: auto; } </style> <body> <div class="top"></div> <div class="center"> <!-- 填充內容測試 --> </div> <div class="bottom"></div> </body> </html>
17、css實現border漸變
18、純css實現一個高寬比為1：3的盒子 列舉幾種方式
19、 css實現一個旋轉的圓
20、BFC，IFC，FFC的區別
說真的，我去面試那么多家，只問到了BFC，其他兩個沒問到過。（以下是個人理解）
首先要知道頁面Box，頁面由很多個小盒子組成（腦部頁面布局划分，任何區域都可以是一個盒子,這個盒子不是塊元素的意思哦~）
FC理解成是渲染規則，就是如何在頁面上渲染盒子
所以這一套什么B\I\F 都可以理解成頁面得小盒子以什么樣得規則去渲染
BFC：塊狀元素參與的布局，形成它自己的一套規則，BFC布局將自己與外部隔離開，內外部的布局不會相互影響。
如何觸發BFC?
1、float不為none
2、overflow不為visible
3、display的值為table-cell、tabble-caption、inline-block
4、position值不為static、relative
IFC：行內元素參與的布局。
FFC:自適應的渲染規則，比如display：flex。
21、css3有哪些新特性
22、CSS3新增偽類有那些？
23、介紹一下標准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
盒子模型： content + border + padding + margin = 盒子大小 // 自己帶入一下上下左右的數據 盒子的寬等於content的寬 盒子的高等於content的高
低版本IE的盒子模型 （沒錯，就是面試中一直說的怪異盒子模型）
(content + border + padding) + margin = 盒子大小
盒子的寬等於 content的寬 + 左右border + 左右padding
盒子的高等於 content的高 + 上下border + 左右padding
24、display:inline-block 什么時候不會顯示間隙？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .left { display: inline-block; background-color: pink; } .center { display: inline-block; background-color: skyblue; } .right { display: inline-block; background-color: pink; } </style> <body> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </body> </html>
當設置了inline-block之后，元素之間多了一條縫隙哦
想要讓縫隙不存在，有幾個方法。
1、設置父元素font-size：0；再給對應的子元素設置font-size。但是太麻煩了
2、使用margin-left 負值把后面的元素往前面挪
3、直接換成flex布局不香嘛
4、換成float：left也行
25、行內元素float:left后是否變為塊級元素？
因為塊元素獨占一行，所以更像是變為行內塊元素（inline-block）
26、在網頁中的應該使用奇數還是偶數的字體？為什么呢？
實際上奇數偶數隨便用都可以，但是為了迎合設計規范，用偶數可能好一些。
27、::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用
單冒號 ':' 表示偽類 （即一種行為后的樣式） 雙冒號 '::' 表示偽元素（即不存在dom結構中的元素，但頁面依然可以呈現出效果） ::before 在元素之前添加一個偽元素 ::after 在元素之后添加一個偽元素
28、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）
恕菜雞無能，這題你們瞎掰扯一下吧
29、CSS3動畫（簡單動畫的實現，如旋轉等）
30、base64的原理及優缺點
優點：減少不必要的http開銷，本地預覽圖片等
缺點：消耗cpu編碼，內容編碼后體積變大，也就是說，也許會卡
原理：使用 64 個字符來對任意數據進行編碼
31、流體布局、聖杯布局、雙飛翼布局
這個小姐姐講的還不錯哦，可以借機鞏固一下~
聖杯布局：https://blog.csdn.net/qq_38128179/article/details/86533976
雙飛翼布局：https://blog.csdn.net/qq_38128179/article/details/86542447
不過現在flex布局幾乎萬能了，嗯，真香
32、stylus/sass/less區別
33、postcss的作用
34、垂直塌陷及解決方法
垂直塌陷其實就是正常垂直布局的兩個盒子，如果上面的盒子設置下邊距，下面的盒子設置上邊距，但是兩個盒子間實際的邊距是以最大的那個來確定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box { width: 200px; height: 100px; background-color: pink; margin-bottom: 10px; } .box1 { width: 200px; height: 100px; background-color: skyblue; margin-top: 20px; } </style> <body> <div class="box">我設置了10px的下margin</div> <div class="box1">我設置了20px的上margin</div> </body> </html>
而我們期望的是上下邊距相加，結果30px。解決方法如下：
1、給下邊的盒子設置float：left/right
2、給下邊的盒子設置position: absolute
3、給下邊的盒子設置display:inline-block