您的位置:首页 - 教程 - 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

评论: