关于CSS部分一些面试题的整理（自用）

CSS

1.1.1 CSS有哪些基本选择器？权重如何表示？

CSS基本选择器有：属性选择器，类选择器和ID选择器。

CSS选择器的权重预示着CSS选择器样式渲染的先后顺序，元素样式渲染时，权重高的选择器样式会覆盖权重低的选择器样式。

通常将权重分为四个等级，可用0.0.0.0来表示这4个等级。

• !important关键字优先级最高。
• 内联样式的优先级可以看成是1.0.0.0
• ID选择器的优先级为0.1.0.0
• 类、属性、伪类的选择器优先级为0.0.1.0
• 元素、伪元素选择器的优先级为0.0.0.1

1.1.2 link和@import的区别是什么？

1. link是XHTML标签，除了加载CSS外，还可以加载其他事务，如加载模板等。@import只能加载CSS文件。
2. 用link引用CSS，在页面载入时同时加载，即同步加载。如果用@import加载CSS文件，需要等到网页完全载入后，再加载CSS文件，即异步加载。
3. link的标签是DOM元素，支持试用JS控制DOM和修改样式。@import不支持。

1.1.3 盒子模型分别有哪些？

• content-box：width = width
• padding-box：width = width + padding-left + padding-right
• border-box： width = width + padding-left + padding-right + border-left + border-right

1.1.4 元素隐藏方法和区别

• display：none 隐藏对应元素，在文档流中不再给他分配空间，各边元素会合拢但是资源会加载，DOM可以访问
• visibility：hidden 隐藏对应元素，但是在文档流中保留原来的空间，资源会加载
• opacity：0 可以点击，占据空间，可以使用

区别：display会产生重绘回流，visibility:hidden只重绘，display：none节点和子孙节点都不见，visibility:hidden的子孙节点可以设置visibility:visible显示。

1.1.5 为什么img是inline元素还可以设置宽高？

img是可替换元素，这类元素的展现效果不是由CSS来控制的。他们是一种外部对象，外观的渲染独立于CSS。内容不受当前文档的样式影响，CSS可以影响可替换元素的位置，但是不会影响到可替换元素自身的内容。

1.1.6 img和background-image的区别？

• img是html标签，background-image属于css，img会先解析
• img有alt属性，指定图像的替换文本，有利于SEO
• img语义化更加明显

1.1.7 rbga()和opacity的区别？

• opacity作用于元素及元素中所有内容，有继承性
• rbga()只用于元素颜色及其背景色

1.1.8 outline和border的区别？

• outline轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用
• outline的效果将随元素的focus而自动出现，相应的由blur自动消失，这些都是浏览器的默认行为，不需要js配合css来控制
• outline不占据空间，不会像border那样影响元素的尺寸或者位置。

1.1.9 浮动元素引起的问题和解决方法？

引起的问题有：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与元素同级的非浮动元素会紧随其后（类似遮盖现象）
3. 如果一个元素浮动，则该元素之前的元素也要浮动；否则会影响页面显示的结构

解决方法：

1. 为父元素设置高度
2. 为父元素设置overflow:hidden即可清除浮动，让父元素的高度被撑开
3. 用clear:both样式属性清除浮动

1.1.10 position的值分别是相对于哪个位置定位的？

• relative：相对于自己本身在正常文档流中的位置进行定位
• absolute：相对于最近一级父元素（从直接父元素往上找，直到根元素）定位
• fixed：相对于浏览器窗口进行定位
• static：默认值，没有定位，元素出现在正常的文档流中
• sticky：生成黏性定位的元素，容器的位置根据正常文档流计算得出

1.1.11 CSS有哪些属性可以继承？哪些不可以继承？

• 字体相关属性，文本相关属性可以被继承：font-size，font-family，font-style，font-color，text-align，line-hight，color，另外元素可见性visibility也可以被继承
• border，padding，margin，width，height不可被继承

1.1.12 CSS中content属性的作用？

content属性主要与:before及:after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容，可以插入文本、图像、引号等。

1.1.13 如何让超出宽度的文字显示为省略号？

width:xxx; => overflow:hidden; => white-space:nowrap; => text-overflow:ellipsis;

1.1.14 网页制作会用到哪些图片格式？

• JPG：压缩率高，文件小，最常用
• PNG：支持无损压缩，色彩损失小，保真度高，文件稍大
• GIF：支持动画显示，但只支持256色显示

1.1.15 访问超链接后hover样式就不出现的原因？解决办法是什么？

访问过后的超链接样式覆盖了原有的hover和active伪类选择器样式，解决方法是将CSS属性的排列顺序改为LVHA（link => visited => hover => active）

CSS3

1.2.1 CSS3新特性有哪些？

• 新增属性：border-radius，box/text-shadow，gradient(线性渐变)，transform等等
• 新增伪类：nth-child(n)，first-of-type，:enabled:disabled，:checked