高频前端面试题——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面试题就分享到这了，如觉得有所帮助可以点赞 + 收藏，感谢支持！

avatar
文章
阅读
粉丝