CSS面试题汇总（四）
往期點這里：↓
CSS面試題匯總（一）
CSS面試題匯總（二）
CSS面試題匯總（三）
31. 什么是 FOUC? 如何避免
參考答案：
1. 什么是 Fouc(文檔樣式短暫失效)？
在引用 css 的過程中，如果方法不當(dāng)或者位置引用不對，會導(dǎo)致某些頁面在 windows 下的 ie 出現(xiàn)一些奇怪的現(xiàn)象，以無樣式顯示頁面內(nèi)容的瞬間閃爍，這種現(xiàn)象稱之為文檔樣式短暫失效，簡稱 FOCU。
2. 原因大致為：
- 使用 import 方法導(dǎo)入樣式表
- 將樣式表放在頁面底部
- 有幾個樣式表，放在 html 結(jié)構(gòu)的不同位置。
3. 其實原理很清楚：當(dāng)樣式表晚于結(jié)構(gòu)性 html 加載，當(dāng)加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現(xiàn)了短暫的花屏現(xiàn)象。
4. 解決方法：
使用 link 標(biāo)簽將樣式表放在文檔 head 中。
32. css3 有哪些新特性參考答案：
1. 選擇器
- E:last-child 匹配父元素的最后一個子元素 E。
- E:nth-child(n)匹配父元素的第 n 個子元素 E。
- E:nth-last-child(n) CSS3 匹配父元素的倒數(shù)第 n 個子元素 E。
2. RGBA
回答此問題，面試官很可能繼續(xù)問：rgba()和 opacity 的透明效果有什么不同？
3. 多欄布局
<div class="mul-col"><div><h3>新手上路</h3><p>新手專區(qū) 消費警示 交易安全 24小時在線幫助 免費開店</p></div><div><h3>付款方式</h3><p>快捷支付 信用卡 余額寶 螞蟻花唄 貨到付款</p></div><div><h3>淘寶特色</h3><p>手機(jī)淘寶 旺信 大眾評審 B格指南</p></div> </div> .mul-col {column-count: 3;column-gap: 5px;column-rule: 1px solid gray;border-radius: 5px;border: 1px solid gray;padding: 10px; }4. 多背景圖
/* backgroundimage:url('1.jpg),url('2.jpg') */5. CSS3 word-wrap 屬性
p.test {word-wrap: break-word; }6. 文字陰影
text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);7. @font-face 屬性
Font-face 可以用來加載字體樣式，而且它還能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。
@font-face {font-family: BorderWeb;src: url(BORDERW0.eot); }@font-face {font-family: Runic;src: url(RUNICMT0.eot); }.border {font-size: 35px;color: black;font-family: "BorderWeb"; }.event {font-size: 110px;color: black;font-family: "Runic"; }/* 淘寶網(wǎng)字體使用 */@font-face {font-family: iconfont;src: url(//at.alicdn.com/t/font_1465189805_4518812.eot); }8. 圓角
border-radius: 15px;9. 邊框圖片
CSS3 border-image 屬性
CSS3 box-sizing 屬性
CSS3 @media 查詢
@keyframes
@keyframes abc {from {transform: rotate(0);}50% {transform: rotate(90deg);}to {transform: rotate(360deg);} }animation 屬性
/* animation ： name duration timing-function delay interation-count direction play-state */- 彈性盒子是 CSS3 的一種新的布局模式。
- CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/li>
- 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。
- rotate()旋轉(zhuǎn)
- translate()平移
- scale( )縮放
- skew()扭曲/傾斜
- 變換基點
- 3d 轉(zhuǎn)換
參考
33. display 有哪些值？說明他們的作用參考答案：
display： none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
解析：
默認(rèn)值：inline
none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間 inline： 指定對象為內(nèi)聯(lián)元素。 block： 指定對象為塊元素。 list-item： 指定對象為列表項目。 inline-block： 指定對象為內(nèi)聯(lián)塊元素。（CSS2） table： 指定對象作為塊元素級的表格。類同于html標(biāo)簽<table>（CSS2） inline-table： 指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2） table-caption： 指定對象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2） table-cell： 指定對象作為表格單元格。類同于html標(biāo)簽<td>（CSS2） table-row： 指定對象作為表格行。類同于html標(biāo)簽<tr>（CSS2） table-row-group： 指定對象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2） table-column： 指定對象作為表格列。類同于html標(biāo)簽<col>（CSS2） table-column-group： 指定對象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2） table-header-group： 指定對象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2） table-footer-group： 指定對象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2） run-in： 根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3） box： 將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3） inline-box： 將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3） flexbox： 將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3） inline-flexbox： 將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3） flex： 將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3） inline-flex： 將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）參考
34. display:inline-block 什么時候不會顯示間隙？(攜程)
參考答案：
inline-block 布局的元素在編輯器里寫在同一行
35. PNG, GIF, JPG 的區(qū)別及如何選
參考答案：
GIF：
- 1：256 色
- 2： 無損，編輯 保存時候，不會損失。
- 3：支持簡單動畫。
- 4：支持 boolean 透明，也就是要么完全透明，要么不透明
JPEG：
- 1：millions of colors
- 2： 有損壓縮， 意味著每次編輯都會失去質(zhì)量。
- 3：不支持透明。
- 4：適合照片，實際上很多相機(jī)使用的都是這個格式。
PNG：
-
1：無損，其實 PNG 有好幾種格式的，一般分為兩類：PNG8 和 truecolor PNGs；
-
與 GIF 相比：
- 它通常會產(chǎn)生較小的文件大小。
- 它支持阿爾法（變量）透明度。
- 無動畫支持
-
與 JPEG 相比：
- 文件更大
- 無損
- 因此可以作為 JPEG 圖片中間編輯的中轉(zhuǎn)格式。
-
結(jié)論：
- JPEG 適合照片
- GIF 適合動畫
- PNG 適合其他任何種類——圖表，buttons，背景，圖表等等。
參考
36. 行內(nèi)元素 float:left 后是否變?yōu)閴K級元素？
參考答案：
- 行內(nèi)元素設(shè)置成浮動之后變得更加像是 inline-block
- 行內(nèi)塊級元素，設(shè)置成這個屬性的元素會同時擁有行內(nèi)和塊級的特性，最明顯的不同是它的默認(rèn)寬度不是 100%，行內(nèi)元素默認(rèn) 100%寬度占據(jù)一行
- 這時候給行內(nèi)元素設(shè)置 padding-top 和 padding-bottom 或者 width、height 都是有效果的
37. 在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？
參考答案：應(yīng)該使用偶數(shù)字體
1. 比例關(guān)系
相對來說偶數(shù)字號比較容易和頁面中其他部分的字號構(gòu)成一個比例關(guān)系。如我使用 14px 的字體作為正文字號，那么其他部分的字體（如標(biāo)題）就可以使用 14×1. 5 =21px 的字體，或者在一些地方使用到了 14×0. 5=7px 的 padding 或者 margin，如果你是在用 sass 或者 less 編寫 css，這時候用處就凸顯出來了。
2. UI 設(shè)計師的緣故
大多數(shù)設(shè)計師用的軟件如 ps 提供的字號是偶數(shù)，自然到了 前端那邊也是用的是偶數(shù)。
3. 瀏覽器緣故
其一是低版本的瀏覽器 ie6 會把奇數(shù)字體強(qiáng)制轉(zhuǎn)化為偶數(shù)，即 13px 渲染為 14px。
其二是為了平分字體。偶數(shù)寬的漢字，如 12px 的漢子，去掉 1 像素的字體間距，填充了的字體像素寬度其實就是 11px，這樣的漢字中豎線左右是平分的，如“中”子，左右就是 5px 了。
4. 系統(tǒng)差別
Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。
而在 Linux 和其他手持設(shè)備上，奇數(shù)偶數(shù)的渲染效果其實相差不大。
解析：參考
38. CSS 合并方法
參考答案：
@import url(css 文件地址)
39. 列出你所知道可以改變頁面布局的屬性
參考答案：
width、height、float、position、等
40. CSS 在性能優(yōu)化方面的實踐
參考答案：
1. 內(nèi)聯(lián)首屏關(guān)鍵 CSS（Critical CSS）
內(nèi)聯(lián) CSS 能夠使瀏覽器開始頁面渲染的時間提前，只將渲染首屏內(nèi)容所需的關(guān)鍵 CSS 內(nèi)聯(lián)到 HTML 中
2. 異步加載 CSS
3. 文件壓縮
4. 去除無用 CSS
解析：參考
總結(jié)
以上是生活随笔為你收集整理的CSS面试题汇总（四）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 会议升降计算机主机,升降式无纸化多媒体会
- 下一篇： 59道CSS面试题(附答案)