CSS面试题汇总（三）

21. li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

参考答案：浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

解决方案：

方法一：既然是因为 <li> 换行导致的，那就可以将 <li> 代码全部写在一排，如下

<div class="wrap">
    <h3>li标签空白测试</h3>
    <ul>
        <li class="part1"></li>
        <li class="part2"></li>
        <li class="part3"></li>
        <li class="part4"></li>
    </ul>
</div>

方法二：我们为了代码美观以及方便修改，很多时候我们不可能将 <li> 全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将 <ul> 内的字符尺寸直接设为 0，将下面样式放入样式表，问题解决。

.wrap ul {
    
    
    font-size: 0px;
}

但随着而来的就是 <ul> 中的其他文字就不见了，因为其尺寸被设为 0px 了，我们只好将他们重新设定字符尺寸。
方法三：本来以为方法二能够完全解决问题，但经测试，将 li 父级标签字符设置为 0 在 Safari 浏览器依然出现间隔空白；既然设置字符大小为 0 不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是 li 内的字符间隔也被设置了，我们需要将 li 内的字符间隔设为默认。

.wrap ul {
    
    
    letter-spacing: -5px;
}

之后记得设置 li 内字符间隔

.wrap ul li {
    
    
    letter-spacing: normal;
}

22. 设置元素浮动后，该元素的 display 值是多少？

参考答案：

自动变成 display:block

23. 怎么让 Chrome 支持小于 12px 的文字？

参考答案：

css3 的 transform 属性，设置值为 scale(x, y) 定义 2D 缩放转换

示例：

-webkit-transform: scale(0. 50);

24. display:inline-block 什么时候会显示间隙？

参考答案：

间隙产生的原因是因为，换行或空格会占据一定的位置

推荐解决方法：

父元素中设置

font-size:0; letter-spaceing:-4px;

25.png、jpg、gif 这些图片格式解释一下，分别什么时候用？，webp 呢

参考答案：

gif 图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有 256 种颜色

jpg 支持上百万种颜色，有损压缩，压缩比可达 180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画

png 为替代 gif 产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8 简单说是静态 gif，也只有 256 色，png24 不透明，但不止 256 色。

webp 谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C 浏览器才支持，google39+，safari7+

26. style 标签写在 body 后与 body 前有什么区别？

参考答案：

从上向下加载，加载顺序不同

27. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

参考答案：

被点击访问过的超链接样式不在具有 hover 和 active 了, 解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link, visited, hover, active）

28. 什么是 Css Hack？ie6, 7, 8 的 hack 分别是什么？

参考答案：

针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。

示例如下：

#test {
    
    
    width: 300px;
    height: 300px;
    background-color: blue;/_firefox_/ background-color: red\9;/_all ie_/ background-color: yellow;/_ie8_/+background-color: pink;/_ie7_/ \_background-color: orange;/_ie6_/
}

:root #test {
    
    
    background-color: purple\9;
}

/*ie9*/

@media all and (min-width:0px) {
    
    
    #test {
    
    
        background-color: black;
    }
}

/*opera*/

@media screen and (-webkit-min-device-pixel-ratio:0) {
    
    
    #test {
    
    
        background-color: gray;
    }
}

/*chrome and safari*/

29. 重置（resetting）CSS 和标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？

参考答案：

重置（Resetting）：重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像 margin 、 padding 、 font-size 这些样式全部置成一样。你将必须重新定义各种元素的样式。
标准化（Normalizing）：标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。

当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。

解析：参考

30. css sprite 是什么, 有什么优缺点

参考答案：

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。

优点：

减少 HTTP 请求数，极大地提高页面加载速度。
增加图片信息重复度，提高压缩比，减少图片大小。
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。

缺点：

图片合并麻烦。
维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

おすすめ