高频前端面试题——css篇(一)

2,921 阅读4分钟

前言

最近这段时间是秋招提前批,这里整理出来了比较常考的css面试题分享给大家,后续也会更新js常考的面试题,欢迎大家关注点赞收藏。

高频前端面试题——css篇(二) - 掘金 (juejin.cn)

首先面试时回答问题可以从是什么有什么优缺点或者特点应用场景是什么入手,话不多说直接上面试题。

1.说说你对css盒子模型的理解?

css盒子模型是什么

css盒子模型是指浏览器在渲染页面时,会将容器渲染成包含content、padding、border、margin四部分的矩形盒子。盒子模型分为标准盒模型IE盒模型

特点

  1. 标准盒模型:width = content (width、height只包含content),标准盒模型也可以转换为IE盒模型,添加属性 box-sizing: border-box;

image.png

  1. IE盒模型: width = content + padding + border (width、height包含content、padding、border),同理,添加属性 box-sizing: content-box; 可以转换为标准盒模型。

image.png

2. css中的选择器有哪些?优先级?

  1. id选择器:选择具有特定 ID 的元素。ID 必须是唯一的。使用时用#符号表示,例如#idName选择了 id 为 idName 的元素。
  2. 类名选择器:选择具有特定类名的元素。一个类可以在文档中被多次使用。使用时用.符号表示,例如.item选择了 class 为 item 的元素。
  3. 标签选择器:选择所有特定类型的元素。例如 p 标签、div 标签等。
  4. 后代选择器:选择某个元素的后代元素。中间用空格隔开,例如 body div会选择 body 中的所有 div 标签。
  5. 子选择器:选择某个元素的直接子元素。使用 >,例如 body > div 选择了 body 下直接子元素 div。

image.png

  1. 兄弟选择器:选择紧接在另一个元素之后的元素。使用+ ,例如.wrap + div只会选择离 wrap 类最近的那个 div 标签。
  2. 群组选择器:选择多个不同的选择器并应用相同的样式。用,隔开,例如.wrap , .item选择了类名为 wrap 和 item 的元素。
  3. 属性选择器:选择具有特定属性或属性值的元素。例如 div[abc] 选择div中具有 abc 属性的元素。
  4. 伪类选择器:选择元素在特定状态下的样式,例如a:hover,用于鼠标悬停在元素上时应用特定的样式。
  5. 伪元素选择器:选择元素的特定部分,如首行或首字母。例如.wrap::before可以在 wrap 类内的前面插入内容。

优先级指的是当多个样式规则应用于同一个元素时,哪个样式规则将被应用。

!important > 行内样式 > id选择器 > 类名选择器 > 标签选择器

当多个选择器具有相同优先级时,后面的样式会覆盖前面的样式。

3. 说说em、rem、vw、vh、px的区别?

是什么

  • css3之前 px,em,%用的多。
  • css3创建了新的单位 rem,vw,vh,为了在不同的场景下做更好的适配

区别

  • 绝对单位:px(基于屏幕分辨率的基本单位)

  • 相对单位:

    1. em:相对于当前元素的字体大小,会随着父元素变化而变化。

    2. rem: 相对于根元素(html 元素)的字体大小。

    3. vw:视口宽度的百分比。100vw表示整个视口宽度。

    4. vh:视口高度的百分比。1vh表示视口高度的1%。

4. css中有哪些方式可以隐藏一个元素?

方法文档流中触发事件回流重绘描述
display: none;不在不会元素完全从文档流中移除,不占用空间。
opacity: 0;不会使元素透明度为0,但仍然占据空间,可接收鼠标事件。
width: 0; height: 0;不在不会设置元素的宽高为0,使其看起来消失。
visibility: hidden;不会不会元素不可见但仍保留其原来的空间。
clip-path: polygon(0px,0px,0px,0px);不会不会通过裁剪区域使元素不可见,但保留其原来的空间。
  • 回流 (reflow): 当浏览器需要重新计算一个元素的几何属性时,比如位置、大小等。
  • 重绘 (repaint): 当浏览器需要重新绘制元素时,只是改变了元素的颜色或背景,即元素的位置和大小没有改变。

5. 谈谈你对BFC的理解?

是什么

BFC 叫做块级格式化上下文,是一种特殊的容器,拥有一套自己的渲染规则。

  • 规则

    1. BFC容器内部子容器依旧遵从块级、行内块、行内的排列
    2. BFC在计算高度时,会将浮动元素的高度也计算在内。(清除浮动)
    3. BFC容器的 margin-top 不会跟子容器的 margin-top 重叠。
  • 触发条件

    1. overflow: hidden || xxx;
    2. float: left || right;
    3. display: table-xxx || inline-xxx || flex || grid;
    4. position: absolute || fixed;
  • 应用场景

    1. 清除浮动
    2. 防止margin重叠

今天的css面试题就分享到这了,如觉得有所帮助可以点赞 + 收藏,感谢支持!