12题精选的CSS面试题（含解析）
本文收集整理了12道关于CSS的面试题，大家一起来看看吧。
1.在 css 选择器当中，优先级排序正确的是（）
A、id选择器>标签选择器>类选择器
B、标签选择器>类选择器>id选择器
C、类选择器>标签选择器>id选择器
D、id选择器>类选择器>标签选择器
4个等级的定义如下：
第一等：代表内联样式，如: style=””，权值为1000
第二等：代表ID选择器，如：#content，权值为100
第三等：代表类，伪类和属性选择器，如.content，权值为10
第四等：代表类型选择器和伪元素选择器，如div p，权值为1
2.下列定义的 css 中，哪个权重是最低的？（ ）
A、#game .name
B、#game .name span
C、#game div
D、#game div.name
权重越大，优先级越高
CSS选择器优先级是指基础选择器的优先级：
ID` > `CLASS` > `ELEMENT` > `*3、关于HTML语义化，以下哪个说法是正确的？（ ）
A、语义化的HTML有利于机器的阅读，如PDA手持设备、搜索引擎爬虫；但不利于人的阅读
B、Table 属于过时的标签，遇到数据列表时，需尽量使用 div 来模拟表格
C、语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化
D、header、article、address都属于语义化明确的标签
解析：
选D
1、什么是HTML语义化？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO ：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：
爬虫依赖于标签来确定上下文和各个关键字的权重；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化
4、CSS 样式，下面哪一个元素能够达到最大宽度，且前后各有一个换行？（ ）
A、Block Element
B、Square Element
C、Side Element
D、Box Element
解析：
选A
块级元素block element
行内元素 inline element
行内块元素inline-block element
5、放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？（ ）
A、文件头部位置
B、文件尾
C、<head>标签部分
D、<body>标签部分
解析：
选D
head部分中的JavaScripts会在被调用的时候才执行。
body部分中的JavaScripts会在页面加载的时候被执行。
6、下列说法正确的有：（ ）
A、visibility:hidden;所占据的空间位置仍然存在，仅为视觉上的完全透明；
B、display:none;不为被隐藏的对象保留其物理空间；
C、visibility:hidden;与display:none;两者没有本质上的区别；
D、visibility:hidden;产生reflow和repaint（回流与重绘）；
选A、B
visiblity:看不见，摸的着.
display:看不见，摸不着.
display是dom级别的，可以渲染和重绘。
visiblity不是dom级别的，不能重绘，只能渲染
7、新窗口打开网页，用到以下哪个值（ ）
A、_self
B、_blank
C、_top
D、_parent
解析：
选B
在html中通过<a>标签打开一个链接，通过 <a> 标签的 target
属性规定在何处打开链接文档。
如果在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架<frame>或者窗口.
在target中还存在四个保留的属性值如下，
_black：在新窗口中打开被链接文档
_self：默认。在相同的框架中打开被链接文档
_ parent：在父框架中打开被链接文档
_top：在整个窗口中打开被链接文档
framename：在指定框架中打开被链接文档
8、下列说法错误的是( )
A、设置display:none后的元素只会导致浏览器的重排而不会重绘
B、设置visibility:hidde后的元素只会导致浏览器重绘而不会重排
C、设置元素opacity:0之后，也可以触发点击事件
D、visibility:hidden的元素无法触发其点击事件
解析：
选A
设置display:none后的元素会导致浏览器的重排重绘
9、超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序？（ ）
A、a:link {} a:visited {} a:hover {} a:active {}
B、a:visited {} a:link {} a:hover {} a:active {}
C、a:active {} a:link {} a:hover {} a:visited {}
D、a:link {} a:active {} a:hover {} a:visited {}
解析：
选A
a:link`; `a:visited`; `a:hover`; `a:active;
a:hover必须放在a:link和a:visited之后；
a:active必须放在a:hover之后。
10、关于position定位，下列说法错误的是（ ）
A、fixed元素，可定位于相对于浏览器窗口的指定坐标，它始终是以 body 为依据
B、relative元素以它原来的位置为基准偏移，在其移动后，原来的位置不再占据空间
C、absolute 的元素，如果它的 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移
D、fixed 属性的元素在标准流中不占位置
解析：
选B
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，元素的位置通过left、top、right、以及bottom属性进行规定fixed：
生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right以及bottom属性进行规定relative：
生成相对定位的元素，相对于其正常位置进行定位，因此，left：20会向元素的LEFT位置添加20像素static：
默认值，没有定位，元素出现正常的流中（忽略top，bottom，left，right或者z-index声明）inherit：
规定应该从父元素继承position属性的值
11、css中哪些属性可以继承（ ）
A、font-size
B、color
C、font-family
D、border
解析：
选A、B、C
margin padding border display 不可以继承
12、css中clear的作用是什么？（ ）
A、清除该元素所有样式
B、清除该元素父元素的所有样式
C、指明该元素周围不可出现浮动元素
D、指明该元素的父元素周围不可出现浮动元素
解析：
选C
clear` : `none` | `left` | `right` | `both（推荐教程：CSS教程）
对于CSS的清除浮动(clear)， 这个规则只能影响使用清除的元素本身，不能影响其他元素
文章来源：公众号--前端人 作者：鬼哥
以上就是W3Cschool编程狮关于12题精选的CSS面试题（含解析）的相关介绍了，希望对大家有所帮助。