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