前端面试题及答案---CSS篇

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

在这里插入图片描述

CSS伪类与伪元素区别

伪类(pseudo-classes)

其核心就是用来选择DOM树之外的信息，不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。
比如:hover :active :visited :link :visited :first-child :focus :lang等。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪元素(Pseudo-elements)

DOM树没有定义的虚拟元素。
核心就是需要创建通常不存在于文档中的元素
比如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。
伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。用于将特殊的效果添加到某些选择器。

伪类与伪元素的区别
表示方法：

CSS2中伪类、伪元素都是比冒号：表示。
CSS2.1后规定伪类用单冒号表示，伪元素用双冒号::表示。
浏览器同样接收CSS2时代已经存在的伪元素(:before,:after,:first\ufffeline,:first-letter等)的单冒号写法。
CSS2之后所有新增的伪元素(如::selection)，应该采用双冒号的写法。
CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。浏览器对以：开头的伪元素也继续支持，但建议规范写法为::开头

定义不同：
伪类即假的类，可以添加类来达到效果
伪元素即假元素，需要通过添加元素才能达到效果

总结：

伪类和伪元素都是用来表示文档树以外的”元素“。
伪类和伪元素分别用单冒号:和双冒号::来表示。
伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类。

相同之处

伪类和伪元素都不出现在源文件和DOM树中。也就是说在html源文件中是看不到伪类和伪元素的。

不同之处

伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。
伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。

请画出css盒模型，基于盒模型的原理，说明相对定位、绝对定位、浮动实现样式是如何实现的

CSS盒模型：

页面上任何一个元素我们都可以看成是一个盒子，盒子会占用一定的空间和位置，他们之间相互制约，就形成了网页的布局。
W3C的盒模型的构成：content、border、padding、margin

IE盒模型与标准盒模型

IE模型和标准模型唯一的区别是内容计算方式不同。

IE盒模型，宽度width=content+padding
标准盒模型，宽度width=content

不同定位：

1.相对定位

relative(相对定位)对象不可层叠、不脱离文档流，参考自身静态位置通过top、bottom、left、right定位，并且可以通过z-index进行层级分级。

2.绝对定位

absolute(绝对定位)脱离文档流，通过top、bottom、left、right定位。选取其最近一个具有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层级分级。

3.浮动

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

列举中css选择器有哪些分类，并至少写出三个css选择器之间的区别，适用场景

CSS选择器

最基本的选择器是：标签选择器、类选择器、ID选择器。

其它选择器：

相邻选择器(h1+p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
属性选择器(a[rel = “external”])
伪类选择器(a:hover，li:nth-child)

常见的一些选择器：

星号

星号会将页面上所有每一个元素都选到。许多开发者都用它来清空margin和padding。当然在你练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。* 也可以用来选择某元素的所有子元素。

#container * {
    
    
    border：1px solid black；

}

id选择器

在选择器中使用#可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？

id选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。

类选择器

class选择器。它跟id选择器不同的是，它可以定位多个元素。当你相对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。

后代选择器 x y

li a {
    
    
    color:red;

}

如果你想更加具体的去定位元素，你可以使用它。例如，你不需要定位所有的a元素，只需要定位li标签下的a标签？这时候你就需要使用descendant选择器了。

如果你的选择器像X Y Z A B.error这样，那你就错了。时候都提醒自己，是否真的需要对那么多元素修饰。

标签选择器

a {
    
     color: red; }
ul {
    
     margin-left: 0; }

如果你想定位页面上的所有的某标签，不是通过id或者class，这简单，直接使用类型选择器。

X:visited and X: link

/* :link这个伪类来定位所有还没有被访问过的链接 */

a:link {
    
     color:red; }

/* :visited来定位所有已经被访问过的链接 */
a:visited {
    
     color: purple; }

x + y

ul + p {
    
    
    color: red;
}

相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有ul标签后面的第一段，并将它们的颜色都设置为红色。

x > y

div#container > ul {
    
    
    border: 1px solid black;
}

X Y和X > Y的差别就是后面这个指挥选择它的直接子元素。

x ~ y

ul ~ p {
    
    
    color : red;
}

兄弟节点组合选择器和X+Y很相似，然后它又不是那么的严格。ul + p选择器只会选择紧挨着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。

X[title]

a[title] {
    
    
    color : green;
}

属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。

X:checked

input[type=radio]:checked {
    
    
    border: 1px solid black;

}

上面这个伪类写法可以定位那些被选中的单选框和多选框。

X:after

before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。

X:nth-child(n)

li :nth-child(3) {
    
    
    color : red;
}

注意nth-child接收一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是li:nth-child(2)。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢

关注公众号后，回复前端面试题，领取大量前端面试题汇总pdf资料

在这里插入图片描述