css面试.docVIP

百度、阿里巴巴和腾讯2014前端面试题（CSS篇） 2014年12月15日 16:48 新浪博客 ???下面都是从网上收集而来，自己收藏，并与大家分享。即使有些不是这些互联网大公司的试题，我也觉得这些题目相当不错。答案不一定正确，可以自行查询一下资料。 1、有哪项方式可以对一个DOM设置它的CSS样式？ （1）外部样式表，引入一个外部css文件 （2）内部样式表，将css代码放在?head 标签内部 （3）内联样式，将css样式直接定义在 HTML 元素内部 2、CSS都有哪些选择器？ （1）常见CSS选择器 ? ①派生选择器（用HTML标签申明） ? ②id选择器（用DOM的ID申明） ? ③类选择器（用一个样式类名申明） ?④属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了） 除了前3种基本选择器，还有一些扩展选择器，包括 ? ⑤后代选择器（利用空格间隔，比如div .a{?}） ? ⑥群组选择器（利用逗号间隔，比如p,div,#a{?}）　 （2）那么问题来了，CSS选择器的优先级是怎么样定义的？ ???基本原则：??? ???一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。 ???复杂的计算方法： ? ①用1表示派生选择器的优先级 ? ②用10表示类选择器的优先级 ??③用100标示ID选择器的优先级 ??④div.test1 .span var 优先级1+10 +10 +1? ??⑤span#xxx .songs li 优先级1+100+ 10 + 1? ??⑥#xxx li 优先级 100 +1 （3）那么问题来了，看下列代码， 标签内的文字是什么颜色的？ ???style ???????.classA{color:blue;}??? ???????.classB{color:red;}??? ???/style?? ???body?? ???????p class=classB classA123/p ???/body ???答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在/pclass=classB classA中的先后关系无关。 3、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？ （1）最基本的： ???设置display属性为none，或者设置visibility属性为hidden。 （2）技巧性： ???设置宽高为0，设置透明度为0，设置z-index位置在-1000 。 4、超链接访问过后hover样式就不出现的问题是什么？如何解决？ ???被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序:L-V-H-A（link,visited,hover,active）。 5、什么是CSSHack？IE6、7、8的hack分别是什么？ ???针对不同的浏览器写不同的CSS code的过程，就是CSS hack。 ??? 示例如下： ???#test{?????? ???????width:300px;?????? ???????height:300px;????????????? ???????background-color:blue;??????? ???????background-color:red\9;??????? ???????background-color:yellow\0;????? ???????+background-color:pink;????????? ???????_background-color:orange;?????? ???}????? ??? :root#test { background-color:purple\9}??? ??? @mediaall and (min-width:0px){#test{background-color:black\0;}}?? ??? @mediascreen and (-webkit-min-device-pixel-ratio:0){ #test{background-color:gray;}}?????? 6、请用CSS写一个简单的幻灯片效果页面 。 ???要用CSS3。使用animation动画实现一个简单的幻灯片效果。 ?? ???????div.ani??? ????????? ???????.ani{??? ?????????width:480px;??? ?????????height:320px;??? ?????????margin:50pxauto;??? ?????????overflow:hidden;??? ?????????box-sha