css相關
本文總結了前端面試題中，關於css部分 ，掌握這些 ，對你面試會有很大幫助。關於JS，瀏覽器，框架等後續會有更新呦，需要的小可愛可以關注一下，真的全是乾貨，不要錯過哦！♥♥♥
文章目錄
1. 萬能居中
1.margin: 0 auto;水平
2.text-align: center;水平
3.行高，垂直
4.表格，center,middle；水平垂直
5.display:table-cell；模擬表格，
6.絕對定位，50%減自身寬高
7.絕對定位，上下左右全0，margin:auto
8.絕對定位加相對定位。不需要知道寬高
9.IE6，IE7：給父元素設一個font-size:高度/1.14,vertical-align:middle
2. BFC優化
塊格式化上下文, 特性:
- 使
BFC內部浮動元素不會到處亂跑； - 和浮動元素產生邊界。
3. 盒模型哪兩種模式？什麼區別？如何設置
標準模式: box-sizing: content-box; 寬高不包括內邊距和邊框
怪異模式: box-sizing: border-box
4. 常用清除浮動的方法，如不清除浮動會怎樣？
當父元素不給高度的時候，內部元素不浮動時會撐開, 而浮動的時候，父元素變成一條線, 造成塌陷.
- 額外標籤法（在最後一個浮動標籤後，新加一個標籤，給其設置
clear：both；）（不推薦） - 父元素添加
overflow:hidden;(觸發BFC) - 使用
after僞元素清除浮動（推薦使用） - 使用
before和after雙僞元素清除浮動
5. 刪格化的原理
比如antd的row和col, 將一行等分爲24份, col是幾就佔幾份, 底層按百分比實現; 結合媒體查詢, 可以實現響應式
6. 純css實現三角形
// 通過設置border
.box
{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}
7. 高度不定，寬100%，內一p高不確定，如何實現垂直居中？
verticle-align: middle;- 絕對定位50%加translateY(-50%)
- 絕對定位，上下左右全0，margin:auto
8. 至少兩種方式實現自適應搜索
- rem, em
- 百分比
- 媒體查詢
- bs, antd等的柵格佈局
9. 設置一段文字的大小爲6px
- 谷歌最小12px, 其他瀏覽器可以更小
- 通過transform: scale實現
10. css菊花圖
四個小圓點一直旋轉
// 父標籤
animation: antRotate 1.2s infinite linear;
// 子標籤
animation: antSpin 1s infinite linear;
@keyframe antSpin {
to {
opacity: 1
}
}
@keyframe antRotate {
to {
transform: rotate(405)
}
}
// animation-delay: 逐個延遲0.4s
11. 關於em
<p style="font-size: 20px">
123
<p style="font-size: 2em;width: 2em">456</p>
</p>
// 此時子元素的font-size爲40px, 寬度爲80px(還要乘以子元素font-size的係數)
12. 關於vh, vw
- vw：viewpoint width，視窗寬度，1vw等於- 視窗寬度的1%。
- vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
- vmin：vw和vh中較小的那個。
- vmax：vw和vh中較大的那個。
13. Flex佈局
flex-direction控制主副軸flex-wrap控制換行(默認不換行)flex-flow是上兩個的結合justify-content主軸對齊方式align-items交叉軸對齊方式
14. overflow原理
overflow: hidden能清除塊內子元素的浮動影響. 因爲該屬性進行超出隱藏時需要計算盒子內所有元素的高度, 所以會隱式清除浮動- 創建BFC條件(滿足一個):
float的值不爲none；
overflow的值不爲visible；
position的值爲fixed / absolute；
display的值爲table-cell / table-caption / inline-block / flex / inline-flex。
15. 實現自適應的正方形:
使用vw, vh
width百分比, height: 0, padding-top(bottom): 50%
16. 標準模式和怪異模式
document.compatMode屬性可以判斷是否是標準模式，當 document.compatMode爲“CSS1Compat”，是標準模式，“BackCompat”是怪異模式。
怪異模式是爲了兼容舊版本的瀏覽器, 因爲IE低版本document.documentElement.clientWidth獲取不到
怪異模式盒模型: box-sizing: border-box; 標準模式: box-sizing: content-box
17. CSS3實現環形進度條
兩個對半矩形遮罩, 使用rotate以及overflow: hidden進行旋轉
18. css優先級
選擇器的特殊性值表述爲4個部分，其權重用0,1,10,100,1000,10000表示。
- ID選擇器的特殊性值，權重100。
- 類選擇器、屬性選擇器或僞類，權重10。
- 元素和僞元素，權重1。
- 通配選擇器*對特殊性沒有貢獻，權重0。
- 最後比較特殊的一個標誌!important（權- 重），它沒有特殊性值，但它的優先級是最高的，爲了方便記憶，可以認爲它的特殊性 權重10000。