css预处理器面试考吗,CSS面试复习题目和答案

您的位置：首页 - 教程 - CSS - 正文

CSS面试复习题目和答案

1、有哪项方式可以对一个DOM设置它的CSS样式？答案：外部样式表，引入一个外部css文件 内部样式表，将css代码放在 标签内部 内联样式，将css样式直接定义在 HTML 元素内部

2、CSS都有哪些选择器？答案：派生选择器(用HTML标签申明)id选择器(用DOM的ID申明)类选择器(用一个样式类名申明)属性选择器(用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了)除了前3种基本选择器，还有一些扩展选择器，包括后代选择器(利用空格间隔，比如div .a{ })，群组选择器(利用逗号间隔，比如p,div,#a{ })

3、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？答案：最基本的： 设置display属性为none，或者设置visibility属性为hidden。技巧性： 设置宽高为0，设置透明度为0，设置z-index位置在-1000。

4、超链接访问过后hover样式就不出现的问题是什么？如何解决？答案：被点击访问过的超链接样式不在具有hover和active了，解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)

5、什么是Css Hack？ie6,7,8的hack分别是什么？答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

6、描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？答案：重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西(如粗体的标题)。 在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

7、Sass、LESS是什么？大家为什么要使用他们？答案：他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。 为什么要使用它们？结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

8、display:none与visibility:hidden的区别是什么？答案：display : 隐藏对应的元素但不挤占该元素原来的空间。 visibility: 隐藏对应的元素并且挤占该元素原来的空间。即是，使用CSS display:none属性后，HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素(对象)仅仅是在视觉上看不见(完全透明)，而它所占据的空间位置仍然存在。

9、知道css有个content属性吗？有什么作用？有什么应用？答案：知道css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

10、rgba()和opacity的透明效果有什么不同？答案：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果！)

11、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？答案：垂直方向：line-height 水平方向：letter-spacing

评论：