必备了解的前端面试题—CSS技能篇(—)

前端面试题解析:CSS篇

在前端开发的面试中,CSS是一个重要的考察点。以下是一些常见的CSS面试题及其解析:

1. 介绍一下CSS盒模型。

答:CSS盒模型定义了HTML元素的布局方式。它包括内容区、内边距、边框和外边距四个部分。

  • 内容区(Content):这是盒子中用来显示实际内容的部分,比如文本、图片等。

  • 内边距(Padding):内容区与边框之间的空白区域,可以用来控制内容与边框之间的距离。

  • 边框(Border):紧接在内边距之外,用来围绕内容和内边距的线条或者空白。

  • 外边距(Margin):边框与相邻元素之间的空白区域,控制元素与相邻元素之间的距离。

    必备了解的前端面试题—CSS技能篇(—)

2. 什么是标准盒模型?什么是怪异盒模型?

  1. 标准盒模型(W3C盒模型)

在标准盒模型中,元素的宽度和高度只包括内容区,不包括内边距、边框和外边距。因此,元素的总宽度和高度应该使用以下公式进行计算:

元素的总宽度 = 内容区的宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度 = 内容区的高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

如果需要使用标准盒模型,可以使用CSS的box-sizing属性进行设置:

 box-sizing: content-box;

必备了解的前端面试题—CSS技能篇(—)

  1. 怪异盒模型(IE盒模型)

在怪异盒模型中,元素的宽度和高度包含了内容区、内边距和边框,但不包括外边距。因此,元素的总宽度和高度应该使用以下公式进行计算:

元素的总宽度 = 内容区的宽度 + 左内边距 + 右内边距 + 左边框 + 右边框
元素的总高度 = 内容区的高度 + 上内边距 + 下内边距 + 上边框 + 下边框

如果需要使用怪异盒模型,可以使用CSS的box-sizing属性进行设置:

box-sizing: border-box;

必备了解的前端面试题—CSS技能篇(—)

下面直观感受两者的区别:

必备了解的前端面试题—CSS技能篇(—)

3. 解释一下CSS选择器的优先级。

在CSS中,选择器用于选择要应用样式的HTML元素。以下是一些常见的CSS选择器及其优先级:

  1. ID选择器(#id)

    • 通过元素的ID属性来选择元素,如#myElement
    • ID选择器具有最高的优先级。
  2. 类名选择器(.class)

    • 通过元素的类名属性来选择元素,如.myClass
    • 类名选择器的优先级比标签选择器高,但比ID选择器低。
  3. 标签选择器

    • 通过HTML标签名称来选择元素,如divp等。
    • 标签选择器的优先级最低。
  4. 后代选择器

    • 用空格分隔的两个选择器,选择指定元素内部的后代元素,如div p会选择所有在<div>元素内部的<p>元素。
    • 优先级取决于后代选择器中各个部分的优先级。
  5. 子级选择器

    • 使用>符号选择作为某元素子元素的元素,例如div > p会选择所有直接作为<div>子元素的<p>元素。
    • 优先级和后代选择器相似。
  6. 相邻兄弟选择器

    • 使用+选择紧接在另一元素后的元素,如h2 + p会选择紧接在<h2>元素后的<p>元素。
    • 优先级和后代选择器相似。
  7. 群组选择器

    • 将多个选择器组合在一起,使用逗号分隔,如h1, h2, h3
    • 优先级取决于群组中最具体的选择器。
  8. 属性选择器

    • 通过元素的属性和属性值来选择元素,如[type="text"]
    • 优先级与类名选择器相似。
  9. 伪类选择器

    • 通过元素的特殊状态或位置来选择元素,如:hover:first-child
    • 优先级与类名选择器相似。
  10. 伪元素选择器

  • 用于选择元素的特定部分,如::before::after
  • 优先级与类名选择器相似。

一般来说,!important > 内联样式 > id选择器 > 类名选择器 > 标签选择器。如果两个规则具有相同的优先级,则后面的规则将覆盖前面的规则。

4. CSS中有哪些常见的单位?

  1. px

    • 像素(pixel)的缩写,它是一个固定的长度单位,表示设备或图片的最小点。
    • 例如,设置一个元素的宽度为200px,表示元素的宽度为200个像素点。
    • 缺点是没有弹性,当屏幕大小改变时,页面可能不适配。
  2. em

    • 相对于父元素的字体大小(font-size),具有继承特性。
    • 如果自身定义了字体大小(默认16px),1em并不是固定值。
    • 例如,如果一个div元素的字体大小为16px,那么1em将等于16px
    • 另外,如果一个元素设置了一个特定的字体大小,那么在该元素内部使用em将相对于该元素自身的字体大小来计算。
  3. rem

    • rem是一个相对单位,相对于根元素html的字体大小。
    • 例如,如果html字体大小设置为16px,那么1rem将等于16px。
    • 整个页面上的元素都可以以相同比例进行调整,而无需单独调整每个元素的大小
  4. %

    • 相对于父元素的百分比,相对单位
    • 对于不同类型的定位元素,百分比相对于不同的参考对象计算。
    • 例如,如果一个div元素的宽度为50%,那么它将占据其父元素宽度的一半。
  5. vw

    • 可视窗口宽度的单位,CSS3新增。
    • 例如,浏览器宽度为1200px,100vw等于1200px,10vw等于120px。
  6. vh

    • 可视窗口高度的单位,CSS3新增。
    • 例如,浏览器高度为900px,100vh等于900px,10vh等于90px。
  7. rpx

    • 微信小程序中用于自适应屏幕尺寸的单位。
    • 相对于屏幕宽度进行自适应,微信规定屏幕宽度为750rpx。
    • 例如,将屏幕宽度分为750份,每份为1rpx。。

这些单位在网页设计和开发中起着重要作用,根据需要选择合适的单位来实现灵活的布局和设计。例如,rem和em可以用于字体和间距的调整,vw/vh可以用于响应式设计中的元素大小和位置的自适应调整,%可以用于相对于父元素的大小和位置的调整。

假如您也和我一样,在准备春招。
欢迎加我微信shunwuyu,
这里有几十位一心去大厂的友友可以相互鼓励,
分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!

原文链接:https://juejin.cn/post/7337892215226548261 作者:好好吃饭e

(0)
上一篇 2024年2月22日 上午10:26
下一篇 2024年2月22日 上午10:36

相关推荐

发表回复

登录后才能评论