【CSS】面试题总结 - 基础知识总结 - 复习专用 - 前端面试必备 - 吐血整理

CSS Cascading Style Sheets 层叠样式表

CSS入门挺简单，但是想要精通CSS还挺难的~今天整理一些面试题，面试题说明是最常用最基础的最容易混淆的一些知识点，用来复习CSS也是很不错的选择
学无止境，不定期持续更新中…

1. 基础知识类

大部分的内容可以参考我之前的博文用来仔细复习用
【CSS】入门-特性-基础选择器&复合选择器-类-id-通配符-后代选择器-子元素选择器-伪类选择器-并集选择器

1.1 CSS的层叠性

为同一个属性指定了不同的值，层叠最终只会选择一个值来渲染元素

当有多个样式规则冲突声明时，会出现层叠性，CSS会根据 ①来源②优先级③源码顺序 来决定最终起作用的是哪一个样式规则

如上图所示

1. 来源重要性由低到高
   1. 用户代理 （浏览器默认样式）
   2. 作者 （你写的CSS）
   3. 作者的 !important
2. 内联样式 在标签行内声明样式
3. 判断选择器优先级
4. 源码顺序

tips 经验法则建议（不要使用id选择器，不要使用!important）

1.2 继承性

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值

1.2.1 哪些属性可以继承

（1）字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

（2）文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color

（3）表格布局属性
caption-side、border-collapse、empty-cells

（4）列表属性
list-style-type、list-style-image、list-style-position、list-style

（5）光标属性
cursor

（6）元素可见性
visibility

（7）还有一些不常用的；speak，page，设置嵌套引用的引号类型quotes等属性

1.2.2 line-height的继承

三种继承的情况

1. 具体数值 【继承具体数值】
2. 比例 【继承比例】
3. 百分比 【继承计算过的具体数值】

1.2.3 不可继承的样式属性

不可继承的样式属性： border, padding, margin, width, height；

1.2.4 不可以继承的元素怎么办

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

使用inherit关键字可以强制继承一个通常不会被继承的属性
使用initial关键字卡可以将某个属性重制成属性的默认初始值注意与auto的区别

1.3 选择器相关

1.3.1 常用选择器

（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1 p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel=“external”]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）

1.3.2 选择器优先级

ID选择器，类选择器，标签名

1.3.3 伪类选择器与伪元素选择器

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。
但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

css引入伪类和伪元素概念是为了格式化文档树以外的信息。
也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。

1.3.4 关于伪类 LVHA 的解释

就是因为层叠性，选择器优先级都一样，最终就是按照书写位置决定样式，后书写的会覆盖前书写的

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类 :link、:visited、:hover、:active；

当链接未访问过时：
（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；
（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。
因此得出LVHA这个顺序。

当链接访问过时，情况基本同上，只不过需要将:link换成:visited。

1.3.5 LVHA这个顺序能不能变？

可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

1.4 块级元素行内元素

块级元素
display:block/table; 有 div h1 h2 table ul ol p 等
display: inline/inline-block; 有 span img input button 等

• block：块级元素，前后都有换行符，可设置width和height，padding和margin水平垂直方向均有效
• inline：内联元素，前后无换行符，在一排排列，不可设置width和height，垂直方向上padding和margin失效
• inline-block：内联块级元素，可设置width和height，padding和margin水平垂直方向均有效，前后无换行符

1.5 什么是盒子模型

【CSS】盒子模型-边框-内外边距-外边距合并-清除内外边距-圆角边框-盒子阴影-文字阴影

盒模型分为两种
IE盒模型（border-box）、W3C标准盒模型（content-box）

标准盒子模型：
width=content
盒子宽度=width+padding+border

IE盒子模型：
width=content+padding+border
盒子宽度=width

1.6 对 line-height 是如何理解的？

line-height指的是一行字的高度，包含了字间距，实际上是下一行基线到上一行基线的距离。
如果一个标签没有定义height属性，那么其最终表现的高度是由line-height决定的。
一个容器没有设置高度，那么撑开容器的高度的是line-height,而不是容器内部的文字内容。
把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。
line-height和height都能撑开一个高度，height会触发haslayout，而line-height不会。

1.7 为什么img是inline还可以设置宽高