CSS面试题汇总（四）

往期点这里：↓
CSS面试题汇总（一）
CSS面试题汇总（二）
CSS面试题汇总（三）

31. 什么是 FOUC? 如何避免

参考答案：

1. 什么是 Fouc(文档样式短暂失效)？

在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 windows 下的 ie 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOCU。

2. 原因大致为：

• 使用 import 方法导入样式表
• 将样式表放在页面底部
• 有几个样式表，放在 html 结构的不同位置。

3. 其实原理很清楚：当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

4. 解决方法：

使用 link 标签将样式表放在文档 head 中。

32. css3 有哪些新特性

参考答案：

1. 选择器

扫描二维码关注公众号，回复： 13269745 查看本文章

• 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 属性

10. 盒阴影

/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */

11. 盒子大小

CSS3 box-sizing 属性

12. 媒体查询

CSS3 @media 查询

13. CSS3 动画

@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 */

14. 渐变效果

background-image: -webkit-gradient(linear,
    0% 0%,
    100% 0%,
    from(#2a8bbe),
    to(#fe280e));

15. CSS3 弹性盒子模型

• 弹性盒子是 CSS3 的一种新的布局模式。
• CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

16. CSS3 过渡

div {
    
    
    transition: width 2s;
    -moz-transition: width 2s;
    /* Firefox 4 */
    -webkit-transition: width 2s;
    /* Safari 和 Chrome */
    -o-transition: width 2s;
    /* Opera */
}

17. CSS3 变换

• 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

解析：参考