前端面试题解析:CSS篇
在前端开发的面试中,CSS是一个重要的考察点。以下是一些常见的CSS面试题及其解析:
1. 介绍一下CSS盒模型。
答:CSS盒模型定义了HTML元素的布局方式。它包括内容区、内边距、边框和外边距四个部分。
-
内容区(Content):这是盒子中用来显示实际内容的部分,比如文本、图片等。
-
内边距(Padding):内容区与边框之间的空白区域,可以用来控制内容与边框之间的距离。
-
边框(Border):紧接在内边距之外,用来围绕内容和内边距的线条或者空白。
-
外边距(Margin):边框与相邻元素之间的空白区域,控制元素与相邻元素之间的距离。
2. 什么是标准盒模型?什么是怪异盒模型?
- 标准盒模型(W3C盒模型)
在标准盒模型中,元素的宽度和高度只包括内容区,不包括内边距、边框和外边距。因此,元素的总宽度和高度应该使用以下公式进行计算:
元素的总宽度 = 内容区的宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度 = 内容区的高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
如果需要使用标准盒模型,可以使用CSS的box-sizing属性进行设置:
box-sizing: content-box;
- 怪异盒模型(IE盒模型)
在怪异盒模型中,元素的宽度和高度包含了内容区、内边距和边框,但不包括外边距。因此,元素的总宽度和高度应该使用以下公式进行计算:
元素的总宽度 = 内容区的宽度 + 左内边距 + 右内边距 + 左边框 + 右边框
元素的总高度 = 内容区的高度 + 上内边距 + 下内边距 + 上边框 + 下边框
如果需要使用怪异盒模型,可以使用CSS的box-sizing属性进行设置:
box-sizing: border-box;
下面直观感受两者的区别:
3. 解释一下CSS选择器的优先级。
在CSS中,选择器用于选择要应用样式的HTML元素。以下是一些常见的CSS选择器及其优先级:
-
ID选择器(#id)
- 通过元素的ID属性来选择元素,如
#myElement
。 - ID选择器具有最高的优先级。
- 通过元素的ID属性来选择元素,如
-
类名选择器(.class)
- 通过元素的类名属性来选择元素,如
.myClass
。 - 类名选择器的优先级比标签选择器高,但比ID选择器低。
- 通过元素的类名属性来选择元素,如
-
标签选择器
- 通过HTML标签名称来选择元素,如
div
、p
等。 - 标签选择器的优先级最低。
- 通过HTML标签名称来选择元素,如
-
后代选择器
- 用空格分隔的两个选择器,选择指定元素内部的后代元素,如
div p
会选择所有在<div>
元素内部的<p>
元素。 - 优先级取决于后代选择器中各个部分的优先级。
- 用空格分隔的两个选择器,选择指定元素内部的后代元素,如
-
子级选择器
- 使用
>
符号选择作为某元素子元素的元素,例如div > p
会选择所有直接作为<div>
子元素的<p>
元素。 - 优先级和后代选择器相似。
- 使用
-
相邻兄弟选择器
- 使用
+
选择紧接在另一元素后的元素,如h2 + p
会选择紧接在<h2>
元素后的<p>
元素。 - 优先级和后代选择器相似。
- 使用
-
群组选择器
- 将多个选择器组合在一起,使用逗号分隔,如
h1, h2, h3
。 - 优先级取决于群组中最具体的选择器。
- 将多个选择器组合在一起,使用逗号分隔,如
-
属性选择器
- 通过元素的属性和属性值来选择元素,如
[type="text"]
。 - 优先级与类名选择器相似。
- 通过元素的属性和属性值来选择元素,如
-
伪类选择器
- 通过元素的特殊状态或位置来选择元素,如
:hover
、:first-child
。 - 优先级与类名选择器相似。
- 通过元素的特殊状态或位置来选择元素,如
-
伪元素选择器
- 用于选择元素的特定部分,如
::before
、::after
。 - 优先级与类名选择器相似。
一般来说,!important > 内联样式 > id选择器 > 类名选择器 > 标签选择器。如果两个规则具有相同的优先级,则后面的规则将覆盖前面的规则。
4. CSS中有哪些常见的单位?
-
px
- 像素(pixel)的缩写,它是一个固定的长度单位,表示设备或图片的最小点。
- 例如,设置一个元素的宽度为200px,表示元素的宽度为200个像素点。
- 缺点是没有弹性,当屏幕大小改变时,页面可能不适配。
-
em
- 相对于父元素的字体大小(font-size),具有继承特性。
- 如果自身定义了字体大小(默认16px),1em并不是固定值。
- 例如,如果一个div元素的字体大小为16px,那么1em将等于16px
- 另外,如果一个元素设置了一个特定的字体大小,那么在该元素内部使用em将相对于该元素自身的字体大小来计算。
-
rem
- rem是一个相对单位,相对于根元素html的字体大小。
- 例如,如果html字体大小设置为16px,那么1rem将等于16px。
- 整个页面上的元素都可以以相同比例进行调整,而无需单独调整每个元素的大小
-
%
- 相对于父元素的百分比,相对单位
- 对于不同类型的定位元素,百分比相对于不同的参考对象计算。
- 例如,如果一个div元素的宽度为50%,那么它将占据其父元素宽度的一半。
-
vw
- 可视窗口宽度的单位,CSS3新增。
- 例如,浏览器宽度为1200px,100vw等于1200px,10vw等于120px。
-
vh
- 可视窗口高度的单位,CSS3新增。
- 例如,浏览器高度为900px,100vh等于900px,10vh等于90px。
-
rpx
- 微信小程序中用于自适应屏幕尺寸的单位。
- 相对于屏幕宽度进行自适应,微信规定屏幕宽度为750rpx。
- 例如,将屏幕宽度分为750份,每份为1rpx。。
这些单位在网页设计和开发中起着重要作用,根据需要选择合适的单位来实现灵活的布局和设计。例如,rem和em可以用于字体和间距的调整,vw/vh可以用于响应式设计中的元素大小和位置的自适应调整,%可以用于相对于父元素的大小和位置的调整。
假如您也和我一样,在准备春招。
欢迎加我微信shunwuyu,
这里有几十位一心去大厂的友友可以相互鼓励,
分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!
原文链接:https://juejin.cn/post/7337892215226548261 作者:好好吃饭e