深度解析CSS面试考点：隐藏元素、BFC、垂直居中、CSS3新特性

沐渃清澄2024-02-24 23:11

前言

前面的一篇文章中，我们已经讲解了，css考点中的盒模型、选择器、单位和像素的相关内容---解析CSS面试考点：盒模型、选择器、单位和像素概念，一网打尽！ - 掘金 (juejin.cn)，下面让我继续为大家讲解在css中的相关考点。

题目五： css中有哪些方式可以隐藏页面元素？区别是什么？

在平常的样式排版中，我们经常遇到将某个模块隐藏的场景，通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的，但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。下面我来为大家详细讲解它们的区别。

实现方式：

通过css实现隐藏元素方法有如下几种： 在 CSS 中，有几种常见的方式可以隐藏页面元素，它们的区别在于隐藏的方式和影响：

  1. display: none;：将元素完全从页面中移除，包括占用的空间。这意味着元素不会被渲染，也不会占据页面布局空间。

    css 复制代码 
    .hidden {
    display: none;
}

  2. visibility: hidden;：隐藏元素，但元素仍然占据页面布局空间。虽然元素不可见，但它仍然存在于文档流中，并且会影响其他元素的布局。

    css 复制代码 
    .hidden {
    visibility: hidden;
}

  3. opacity: 0; ：使元素完全透明，但仍然占据页面布局空间。与 visibility: hidden; 不同，元素是可见的，但是完全透明。

    css 复制代码 
    .hidden {
    opacity: 0;
}

  4. position: absolute; left: -9999px;：将元素移出可视区域，但仍然保留在文档流中，可能会影响其他元素的布局。

    css 复制代码 
    .hidden {
    position: absolute;
    left: -9999px;
}

  5. clip-path: polygon(0 0, 0 0, 0 0, 0 0);：使用裁剪路径将元素裁剪为不可见。这种方法可以根据需要裁剪元素的特定部分。

    css 复制代码 
    .hidden {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

这些方法的选择取决于具体的需求和效果。如果需要彻底从页面中移除元素并释放空间，可以使用 display: none;。如果需要隐藏元素但仍然占据空间，可以使用 visibility: hidden;。如果需要元素完全透明但仍然占据空间，可以使用 opacity: 0;。如果需要将元素移出可视区域但仍然保留在文档流中，可以使用 position: absolute; left: -9999px;。如果需要根据特定形状裁剪元素，可以使用 clip-path。

下面通过一个例子来说明这些方法的区别：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏元素示例</title>
    <style>
        .hidden-display-none {
            display: none;
        }

        .hidden-visibility-hidden {
            visibility: hidden;
        }

        .hidden-opacity-zero {
            opacity: 0;
        }

        .hidden-position {
            position: absolute;
            left: -9999px;
        }

        .hidden-clip-path {
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        }
    </style>
</head>
<body>
    <h2>使用不同方法隐藏元素</h2>

    <h3>使用 display: none;</h3>
    <div class="hidden-display-none">Display None</div>

    <h3>使用 visibility: hidden;</h3>
    <div class="hidden-visibility-hidden">Visibility Hidden</div>

    <h3>使用 opacity: 0;</h3>
    <div class="hidden-opacity-zero">Opacity Zero</div>

    <h3>使用 position: absolute; left: -9999px;</h3>
    <div class="hidden-position">Position Absolute</div>

    <h3>使用 clip-path: polygon(0 0, 0 0, 0 0, 0 0);</h3>
    <div class="hidden-clip-path">Clip Path</div>
</body>
</html>

总的来说，它们的特点及区别如下：

  1. display: none; ：
    • 不占据空间：元素被完全移除，不再占据文档流中的位置，因此不会影响其他元素的布局。
    • 脱离文档流：元素被脱离文档流，不再影响其他元素的位置。
    • 无响应事件：元素被隐藏，无法触发鼠标点击、键盘事件等。
    • 会回流重绘：因为元素被完全移除，所以会触发页面的回流和重绘。
  2. visibility: hidden; ：
    • 占据空间：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
    • 无响应事件：虽然元素不可见，但仍然存在于页面中，因此无法触发事件。
    • 只会重绘：因为元素仍然存在，只是不可见，所以只会触发重绘，而不会触发回流。
  3. opacity: 0; ：
    • 占据空间：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
    • 有响应事件：元素虽然不可见，但仍然存在于页面中，因此可以触发事件。
    • 回流重绘 || 只会重绘：根据具体情况而定。如果元素是被隐藏的初始状态，那么会触发回流和重绘；如果是在动画过程中改变透明度，可能只会触发重绘。
  4. position: absolute; left: -9999px; ：
    • 占据空间：元素虽然被移出可视区域，但仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
    • 脱离文档流：元素被脱离了文档流，不再影响其他元素的位置。
    • 无响应事件：元素不可见，无法触发事件。
    • 会回流重绘：因为元素的位置发生了改变，会触发页面的回流和重绘。
  5. clip-path: polygon(0 0, 0 0, 0 0, 0 0); ：
    • 占据文档流：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
    • 无响应事件：元素不可见，无法触发事件。
    • 只会重绘：因为元素仍然存在，只是被裁剪成不可见的形状，所以只会触发重绘，而不会触发回流。

题目六：谈谈你对BFC的理解？

首先我们先介绍一下什么是BFC，BFC（Block Formatting Context）是指块级格式化上下文，它是 CSS 中的一个重要概念，用于控制块级盒子在布局时的行为。理解 BFC 对于处理布局、解决布局问题以及避免布局相关的 bug 非常重要。

特点：

  1. 内部的块级盒子会在垂直方向上一个接一个地放置：在 BFC 内部，块级盒子会按照其在 DOM 中的顺序一个接一个地放置，不会出现浮动、定位等元素的干扰。
  2. 属于同一个 BFC 的两个相邻的块级盒子的垂直外边距会发生折叠：当两个相邻的块级盒子都属于同一个 BFC 时，它们的垂直外边距会发生折叠，取两者之间的较大者作为最终的外边距。
  3. BFC 可以包含浮动元素，不会影响到父元素的高度：在 BFC 内部，浮动元素不会影响到父元素的高度，而是会被包含在 BFC 内部。
  4. BFC 可以阻止元素被浮动元素覆盖：在 BFC 内部，浮动元素不会覆盖 BFC 内部的块级盒子，而是会被其包含。
  5. BFC 内部的元素不会与浮动元素重叠：在 BFC 内部，浮动元素不会覆盖块级盒子，也不会与块级盒子重叠。

示例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC Example</title>
    <style>
        .container {
            border: 1px solid red;
            overflow: auto; /* 创建 BFC */
        }
        .float {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-right: 20px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="float"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

在这个示例中，.container 元素创建了一个 BFC，这意味着它内部的浮动元素（.float）不会影响到外部的块级盒子（.box）。此外，.container 内部的两个相邻的 .box 元素的垂直外边距会发生折叠，因为它们属于同一个 BFC。

触发条件

  1. 根元素或包含根元素的元素 ：HTML 文档的根元素 <html> 或包含根元素的元素会自动生成一个 BFC。
  2. 浮动元素：浮动元素会生成一个 BFC，浮动的元素不会影响到 BFC 内部的布局，也不会被 BFC 外部的元素覆盖。
  3. 绝对定位元素：绝对定位元素（position 值不为 static 的元素）会生成一个 BFC。
  4. display 值为 inline-block、table-cell、table-caption 的元素：这些元素会生成一个 BFC，其内部的元素会按照块级盒子的方式布局。
  5. overflow 值不为 visible 的元素：设置 overflow 值为 auto、scroll、hidden 的元素会生成一个 BFC。

应用场景

  1. 清除浮动：在父元素上触发 BFC 可以清除浮动，使得父元素能够包含其内部的浮动元素，而不产生高度塌陷的问题。
  2. 阻止 margin 重叠：在父元素上触发 BFC 可以阻止相邻块级元素的垂直外边距合并。
  3. 解决自适应布局问题：通过在容器上触发 BFC，可以避免一些自适应布局问题，例如避免某些元素因为浮动而导致布局混乱。
  4. 防止元素被浮动元素覆盖：在 BFC 内部的元素不会与浮动元素重叠，可以使用这一特性来防止元素被浮动元素覆盖。
  5. 实现多栏布局：通过触发 BFC，在布局中创建多个列，可以实现多栏布局的效果。

题目七：水平垂直居中的方法有哪些？

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

实现方式：

实现垂直居中的方式共有如下几种：

  1. 使用 Flexbox 布局
  2. 使用绝对定位和 transform
  3. 使用表格布局
  4. 使用 Grid 布局
  5. 使用 CSS 伪元素和定位

示例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  /* 方法1: 使用 Flexbox 布局 */
  .container1 {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100px; /* 为了演示效果设置高度 */
    border: 2px solid #ccc; /* 为了演示效果添加边框 */
    margin-bottom: 20px;
  }

  /* 方法2: 使用绝对定位和 transform */
  .container2 {
    position: relative;
    height: 100px; /* 为了演示效果设置高度 */
    border: 2px solid #ccc; /* 为了演示效果添加边框 */
    margin-bottom: 20px;
  }

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 方法3: 使用表格布局 */
  .container3 {
    display: table-cell;
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
    height: 100px; /* 为了演示效果设置高度 */
    border: 2px solid #ccc; /* 为了演示效果添加边框 */
    margin-bottom: 20px;
  }

  /* 方法4: 使用 Grid 布局 */
  .container4 {
    display: grid;
    place-items: center; /* 水平垂直居中 */
    height: 100px; /* 为了演示效果设置高度 */
    border: 2px solid #ccc; /* 为了演示效果添加边框 */
    margin-bottom: 20px;
  }

  /* 方法5: 使用 CSS 伪元素和定位 */
  .container5 {
    position: relative;
    height: 100px; /* 为了演示效果设置高度 */
    border: 2px solid #ccc; /* 为了演示效果添加边框 */
    margin-bottom: 20px;
  }

  .container5::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 伪元素填充整个父容器 */
    height: 100%; /* 伪元素填充整个父容器 */
  }

  /* 为了展示效果，添加样式 */
  .box {
    background-color: lightblue;
    padding: 20px;
    border-radius: 5px;
  }
</style>
</head>
<body>

<!-- 方法1: 使用 Flexbox 布局 -->
<div class="container1">
  <div class="box">示例</div>
</div>

<!-- 方法2: 使用绝对定位和 transform -->
<div class="container2">
  <div class="centered box">示例</div>
</div>

<!-- 方法3: 使用表格布局 -->
<div class="container3">
  <div class="box">示例</div>
</div>

<!-- 方法4: 使用 Grid 布局 -->
<div class="container4">
  <div class="box">示例</div>
</div>

<!-- 方法5: 使用 CSS 伪元素和定位 -->
<div class="container5">
  <div class="box">示例</div>
</div>

</body>
</html>

效果展示：

总结：

  1. 使用 Flexbox 布局 ：Flexbox 提供了方便的方式来实现水平和垂直居中，只需要在父容器上应用 display: flex; 和相关的属性即可。
  2. 使用绝对定位和 transform ：将要居中的元素设置为绝对定位，并通过 top: 50%; left: 50%; transform: translate(-50%, -50%); 将其移动到父容器的中心。
  3. 使用表格布局：将要居中的元素放置在一个表格单元格中，并将单元格水平和垂直居中。
  4. 使用 Grid 布局：类似于 Flexbox 布局，Grid 布局也提供了方便的方式来实现水平和垂直居中。
  5. 使用 CSS 伪元素和定位：通过伪元素的方法，利用绝对定位将要居中的元素移动到父容器的中心。

以上就是css中可以实现元素水平垂直的几种方法。

题目八：css3新增了哪些属性？

首先我们要讲解css的定义：css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观，css3是css的最新标准，是向后兼容的，CSS1/2 的特性在 CSS3 里都是可以使用的，而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体验。下面我将讲解css3中所新增的内容。

新增内容：

  1. 选择器： 属性选择器，伪类选择器
  2. box-shadow 文本阴影
  3. background-clip 背景裁剪
  4. transtion 过渡动画
  5. transform 转换
  6. animation 动画
  7. linear-gradient 渐变色

选择器：

属性选择器 允许你根据元素的属性值来选择元素，例如 [attribute]、[attribute=value]、[attribute~=value]、[attribute|=value] 等。

css 复制代码 
/* 选择所有带有 title 属性的元素 */
[title] {
  color: blue;
}

/* 选择 title 属性值为 "example" 的元素 */
[title="example"] {
  font-weight: bold;
}

伪类选择器 允许你根据元素的状态或位置来选择元素，例如 :hover、:focus、:nth-child()、:not() 等。

css 复制代码 
/* 鼠标悬停时改变元素的背景颜色 */
button:hover {
  background-color: lightgray;
}

/* 选择第一个段落元素 */
p:first-child {
  font-weight: bold;
}

边框：

css3新增了三个边框属性，分别是：

  • border-radius：创建圆角边框
  • box-shadow：为元素添加阴影
  • border-image：使用图片来绘制边框

这里主要讲一下box-shadow，box-shadow 属性用于在元素周围创建阴影效果。可以设置的内容如下：

  • 水平阴影
  • 垂直阴影
  • 模糊距离(虚实)
  • 阴影尺寸(影子大小)
  • 阴影颜色
  • 内/外阴影

其中水平阴影和垂直阴影是必须设置的。

背景

background-clip用于背景的绘制区域，有以下几种内容：

  • background-clip: border-box; 背景从border开始显示
  • background-clip: padding-box; 背景从padding开始显示
  • background-clip: content-box; 背景显content区域开始显示
  • background-clip: no-clip; 默认属性，等同于border-box

transition 过渡

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔。

示例：

css 复制代码 
transition: background-color 0.5s ease;

其中，持续时间及过渡效果必须要设置。

transform 转换

transform属性允许你旋转，缩放，倾斜或平移给定元素，包括 2D 和 3D 变换。。transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)。
使用方式

  • transform: translate(120px, 50%)：位移
  • transform: scale(2, 0.5)：缩放
  • transform: rotate(0.5turn)：旋转
  • transform: skew(30deg, 20deg)：倾斜

animation 动画

animation 属性用于创建动画效果，可以实现更加复杂的动画。这个平常使用上也相对较多。
设置属性：

  • animation-name：动画名称
  • animation-duration：动画持续时间
  • animation-timing-function：动画时间函数
  • animation-delay：动画延迟时间
  • animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
  • animation-direction：动画执行方向
  • animation-paly-state：动画播放状态
  • animation-fill-mode：动画填充模式

linear-gradient 渐变色

颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括

  • linear-gradient：线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

  • radial-gradient：径向渐变

linear-gradient(0deg, red, green);

结语

通过本文的介绍，我们详细了解了CSS中一些常见但又常被混淆的概念，例如不同的隐藏元素的方式、BFC的作用和应用场景、实现水平垂直居中的方法，以及CSS3中新增的一些属性和特性。掌握这些知识，可以让我们更加灵活地处理页面布局和样式设计，提升网页的美观程度和用户体验。

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

相关推荐
2401_8791036811 分钟前
24.11.10 css
前端·css
ComPDFKit1 小时前
使用 PDF API 合并 PDF 文件
前端·javascript·macos
yqcoder1 小时前
react 中 memo 模块作用
前端·javascript·react.js
优雅永不过时·2 小时前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
神夜大侠5 小时前
VUE 实现公告无缝循环滚动
前端·javascript·vue.js
明辉光焱5 小时前
【Electron】Electron Forge如何支持Element plus？
前端·javascript·vue.js·electron·node.js
柯南二号5 小时前
HarmonyOS ArkTS 下拉列表组件
前端·javascript·数据库·harmonyos·arkts
wyy72935 小时前
v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条
前端·ui·html
前端郭德纲5 小时前
ES6的Iterator 和 for...of 循环
前端·ecmascript·es6
王解5 小时前
【模块化大作战】Webpack如何搞定CommonJS与ES6混战（3）
前端·webpack·es6
热门推荐
01智能车联网安全发展形势、挑战02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05软件工程从理论到实践客观题汇总(头歌第一章至第八章)06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07HP惠普星15青春版/惠普小欧笔记本电脑15s-du1008tx原装出厂Win11系统08全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10Python数据分析案例31——中国A股的月份效应研究(方差分析，虚拟变量回归)