前端面试——CSS

1.介绍一下标准CSS的盒子模型和低版本的IE盒子模型有什么不同？

盒模型都是由四个部分组成的，分别是margin、border、padding和content。标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border，padding和content。一般来说，可以通过修改元素的box-sizing属性来改变元素的盒模型。

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分。

IE盒模型和W3C标准盒模型的区别：

（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding；

（2）：IE盒模型：属性width，height包含content、border和padding，指的是 width=content+padding+border；

在IE8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box（W3C标准盒模型）;如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有浏览器都会把盒模型解释为W3C盒模型。

2.CSS选择符有哪些？

（1）id选择符（#myid）

（2）类选择符（.myclassname）

（3）标签选择符

（4）后代选择符

（5）相邻后代选择器（子）选择器（ul>li）

（6）兄弟选择器（li～a）

（7）相邻兄弟选择器（li+a）

（8）属性选择器

（9）伪类选择器

（10）伪元素选择器

（11）通配符选择器

3. ::before 和 :after 中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

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

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

单冒号( ：)用于CSS3伪类，双冒号(::)用于CSS3伪元素（伪元素由双冒号和伪元素名称组成）。双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其他内容前，使用::before，否则，使用::after；

在代码顺序上,::after生成的内容也比::before生成的内容靠后

如果按堆栈视角，::after生成的内容会在::before生成的内容上。

4.伪类与伪元素的区别

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

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

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

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

*[参考资料]:总结伪类与伪元素

5.CSS中哪些属性可以继承？

每个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用元素的同属性的值来作为自己的值。

一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。表格的一些布局属性，列表属性如list-style等。还有光标属性cursor，元素可见性visibility。

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

*[参考资料]:继承属性，CSS有哪些属性可以继承

Front-end-basic-knowledge

1.CSS选择器的优先级是如何计算的？

浏览器通过优先级规则，判断元素展示哪些样式。优先级通过4个维度指标确定，假设以a，b，c，d分别代表

a表示是否使用内联样式，如果使用，a为1，否则为0
b表示ID选择器的数量
c表示类选择器，属性选择器和伪类选择器数量之和
d表示标签（类型）选择器和伪元素选择器之和

比较方法：abcd每个值分开比较。abcd权重从左到右，依次减小。判断优先级时，从左到右一一比较。所以如果b的值不同，那么c和d不管多大，都不会对结果产生影响。比如0，1，0，0的优先级高于0，0，10，10

当出现优先级相等的情况时，最晚出现的样式规则会被采纳，或者最后出现的（在文件底部的）样式优先级更高，因此会被采纳。

2.重置(resetting)CSS和标准化(normalizing)CSS的区别是什么？会选择哪种方式，为什么？

重置：意味着除去所有的浏览器默认样式。对于页面所有的元素，像margin、padding、font-size这些样式会全部重置成一样。必须重新定义各种元素的样式。
标准化：标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。

（当需要实现非常个性化的网页时，可以选择重置样式，这样可以写很多自定义的样式来满足设计需求，这时候就不再需要标准化的默认样式）

3.阐述Float定位的工作原理。

浮动（float）是CSS定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位。（这里与绝对定位不同，绝对定位会完全从文档流中脱离）

CSS的clear属性通过使用left、right、both，让该元素向下移动（清除浮动）到浮动元素下面。

如果父元素只包含浮动元素，那么该父元素的高度将塌缩为0。可以通过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题。

还有一种hack方法，是自定义一个.clearfix类，利用伪元素选择器::after清除浮动。还有一些方法，如添加空的<div></div>和设置浮动元素父元素的overflow属性。与这些方法不同的是，clearfix方法，只需给父元素添加一个类：如

.clearfix:after{content:'';display:block;clear:both;}

值得一提的是，把父元素属性设置为overflow:auto或overflow:hidden，会使其内部的子元素形成块格式化上下文，并且父元素会扩张自己，使其能够包围它的子元素。

4.说说z-index属性，它是如何形成层叠上写文(stacking context)的。

CSS中的z-index属性控制重叠元素的垂直叠加顺序。z-index只能影响position != static的元素。

没有定义z-index的值时，元素按照它们出现在DOM中的顺序堆叠，层级越低，出现位置越靠上。非静态定位的元素（及其子元素）将始终覆盖静态定位(static)的元素，而不管HTML层次结构如何。

层叠上下文是包含一组图层的元素。在一组层叠上下文中，其子元素的z-index的值是相对于该父元素而不是document root设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素B位于元素A之上，则即使元素A的子元素C具有比元素B更高的z-index值，元素C永远不会在元素B之上。

每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父层叠上下文中按顺序进行层叠。少数CSS属性会触发一个新的层叠上下文，例如opacity<1,filter不是none，transform不是none。

5.关于伪类LVHA的解释？

LVHA分别对应a标签的四种状态，链接访问前，链接访问后，鼠标滑过，激活分别对应:link,:visited,:hover,:active；

（LoVe HAte）

当链接未访问过时：

（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后声明；

（2）当鼠标点击激活a链接时，同时满足:link,:hover,:active三种状态，要显示a标签激活时的样式（:active)，必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

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

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

6.display有哪些值？说明他们的作用。

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示
list-item 像块类型元素一样显示，并添加样式列表标记
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承display属性的值。

7.position的值relative和absolute定位原点是？

relative定位的元素，是相对于元素本身的正常位置来进行定位的。

absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的padding box来进行定位的。这句话可以理解为：首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元素的padding box来定位，也就是说在计算定位距离的时候，padding的值也要算进去。