一、css sprite優(yōu)缺點(diǎn)
- css sprite：將多個圖片拼接在一張圖中，通過background-position和元素尺寸調(diào)節(jié)圖片位置
- 優(yōu)點(diǎn)：減少http請求、增加圖片壓縮比，減少圖片大小、更換風(fēng)格方便
- 缺點(diǎn)：維護(hù)麻煩、圖片合成麻煩
二、link 和 @import的區(qū)別
Link 是html格式，@import是css格式 link支持并行下載， @import支持串行下載
三、FOUC是什么？怎么避免
- FOUC：flash of unstyled content—用戶定義樣式表加載之前瀏覽器使用默認(rèn)樣式顯示文檔，用戶樣式加載渲染之后再重新顯示文檔，造成的頁面閃爍
- 解決：樣式表放在<head>部分
四、如何創(chuàng)建塊級格式上下文，作用是什么
- 塊級格式上下文—block formatting context
- 創(chuàng)建規(guī)則：根元素、浮動元素、絕對定位、display取值為inline-block,table-cell等、overflow不取值為visible的值
- 作用：可以包含浮動元素、不被浮動元素覆蓋、阻止父子元素之間的margin折疊
五、清除浮動的方法
- 父級div設(shè)置高度
- 結(jié)尾處加空div設(shè)置clear:both
- 父級div設(shè)置偽元素:after和zoom
- 父級div也浮動，設(shè)置寬度
- 父級div設(shè)置overflow:hidden
- 結(jié)尾處加br設(shè)置clear:both
六、css3新特性
- css選擇器
- 多列布局
- 陰影和反射
- 文字特效text-shadow
- 線性漸變
- 旋轉(zhuǎn)transform
- 圓角border-radius
七、display-line什么時候不顯示間隙
- 移除空格
- margin負(fù)值
- font-size為0
- word-spacing
- letter-spacing
八、css在性能方面的優(yōu)化
- css壓縮與合并
- gzip壓縮
- css文件放在head里，不用@import
- 盡量用縮寫，合理使用選擇器
九、如何垂直居中一個<img>
#container{
display: table-cell;
text-align: center;
vertical-align: middle;
}
如何垂直居中一個浮動元素
#div{
Width:200px; height:200px; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px;
}
#div{
Width:200px; height:200px; position:absolute; margin:auto; top:0; left:0; bottom:0; right:0;
}
十、水平居中
- 行內(nèi)元素，使用text-align：center
- 固定寬度，設(shè)置margin:auto
- 絕對定位，父元素設(shè)置relative, left:0,right:0, margin:auto
- flex布局，justify-content: center
- display設(shè)置table-cell
十一、垂直居中
- 絕對定位，top：0，bottom: 0, margin:auto
- 絕對定位中固定高度，top:50%，margin-top;-高度的一半值
- Display: table-cell, vertical-align:middle
- flex布局，align-item: center
- 文本居中，設(shè)置line-height和height相同的值
十二、重排和重繪是什么，如何避免
- 重排：dom的變化影響到了元素的幾何屬性（寬高），瀏覽器重新計算寬高，其他元素的幾何屬性也會受到影響，瀏覽器重新構(gòu)造渲染樹，這個過程稱為重排
- 重繪：受到影響的元素要重新繪制在屏幕上的過程叫做重繪
- 避免：使用fragment、使用classname一次性改變屬性、對于多次重排的元素，如動畫，使用絕對定位脫離文檔流，讓他的改變不影響其他元素、不在布局信息改變時查詢dom
