深度解析CSS面试考点：隐藏元素、BFC、垂直居中、CSS3新特性
前言
题目五： css中有哪些方式可以隐藏页面元素？区别是什么？
在平常的样式排版中，我们经常遇到将某个模块隐藏的场景，通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的，但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。下面我来为大家详细讲解它们的区别。
实现方式：
通过css实现隐藏元素方法有如下几种：
在 CSS 中，有几种常见的方式可以隐藏页面元素，它们的区别在于隐藏的方式和影响：
-
display: none;：将元素完全从页面中移除，包括占用的空间。这意味着元素不会被渲染，也不会占据页面布局空间。
.hidden { display: none; } -
visibility: hidden;：隐藏元素，但元素仍然占据页面布局空间。虽然元素不可见，但它仍然存在于文档流中，并且会影响其他元素的布局。
.hidden { visibility: hidden; } -
opacity: 0;：使元素完全透明，但仍然占据页面布局空间。与
visibility: hidden;不同，元素是可见的，但是完全透明。.hidden { opacity: 0; } -
position: absolute; left: -9999px;：将元素移出可视区域，但仍然保留在文档流中，可能会影响其他元素的布局。
.hidden { position: absolute; left: -9999px; } -
clip-path: polygon(0 0, 0 0, 0 0, 0 0);：使用裁剪路径将元素裁剪为不可见。这种方法可以根据需要裁剪元素的特定部分。
.hidden { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
这些方法的选择取决于具体的需求和效果。如果需要彻底从页面中移除元素并释放空间，可以使用 display: none;。如果需要隐藏元素但仍然占据空间，可以使用 visibility: hidden;。如果需要元素完全透明但仍然占据空间，可以使用 opacity: 0;。如果需要将元素移出可视区域但仍然保留在文档流中，可以使用 position: absolute; left: -9999px;。如果需要根据特定形状裁剪元素，可以使用 clip-path。
下面通过一个例子来说明这些方法的区别：
<!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>
总的来说，它们的特点及区别如下：
- display: none; ：
- 不占据空间：元素被完全移除，不再占据文档流中的位置，因此不会影响其他元素的布局。
- 脱离文档流：元素被脱离文档流，不再影响其他元素的位置。
- 无响应事件：元素被隐藏，无法触发鼠标点击、键盘事件等。
- 会回流重绘：因为元素被完全移除，所以会触发页面的回流和重绘。
- visibility: hidden; ：
- 占据空间：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
- 无响应事件：虽然元素不可见，但仍然存在于页面中，因此无法触发事件。
- 只会重绘：因为元素仍然存在，只是不可见，所以只会触发重绘，而不会触发回流。
- opacity: 0; ：
- 占据空间：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
- 有响应事件：元素虽然不可见，但仍然存在于页面中，因此可以触发事件。
- 回流重绘 || 只会重绘：根据具体情况而定。如果元素是被隐藏的初始状态，那么会触发回流和重绘；如果是在动画过程中改变透明度，可能只会触发重绘。
- position: absolute; left: -9999px; ：
- 占据空间：元素虽然被移出可视区域，但仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
- 脱离文档流：元素被脱离了文档流，不再影响其他元素的位置。
- 无响应事件：元素不可见，无法触发事件。
- 会回流重绘：因为元素的位置发生了改变，会触发页面的回流和重绘。
- clip-path: polygon(0 0, 0 0, 0 0, 0 0); ：
- 占据文档流：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
- 无响应事件：元素不可见，无法触发事件。
- 只会重绘：因为元素仍然存在，只是被裁剪成不可见的形状，所以只会触发重绘，而不会触发回流。
题目六：谈谈你对BFC的理解？
首先我们先介绍一下什么是BFC，BFC（Block Formatting Context）是指块级格式化上下文，它是 CSS 中的一个重要概念，用于控制块级盒子在布局时的行为。理解 BFC 对于处理布局、解决布局问题以及避免布局相关的 bug 非常重要。
特点：
- 内部的块级盒子会在垂直方向上一个接一个地放置：在 BFC 内部，块级盒子会按照其在 DOM 中的顺序一个接一个地放置，不会出现浮动、定位等元素的干扰。
- 属于同一个 BFC 的两个相邻的块级盒子的垂直外边距会发生折叠：当两个相邻的块级盒子都属于同一个 BFC 时，它们的垂直外边距会发生折叠，取两者之间的较大者作为最终的外边距。
- BFC 可以包含浮动元素，不会影响到父元素的高度：在 BFC 内部，浮动元素不会影响到父元素的高度，而是会被包含在 BFC 内部。
- BFC 可以阻止元素被浮动元素覆盖：在 BFC 内部，浮动元素不会覆盖 BFC 内部的块级盒子，而是会被其包含。
- BFC 内部的元素不会与浮动元素重叠：在 BFC 内部，浮动元素不会覆盖块级盒子，也不会与块级盒子重叠。
示例
<!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。
触发条件
- 根元素或包含根元素的元素：HTML 文档的根元素
<html>或包含根元素的元素会自动生成一个 BFC。 - 浮动元素：浮动元素会生成一个 BFC，浮动的元素不会影响到 BFC 内部的布局，也不会被 BFC 外部的元素覆盖。
- 绝对定位元素：绝对定位元素（position 值不为 static 的元素）会生成一个 BFC。
- display 值为 inline-block、table-cell、table-caption 的元素：这些元素会生成一个 BFC，其内部的元素会按照块级盒子的方式布局。
- overflow 值不为 visible 的元素：设置 overflow 值为 auto、scroll、hidden 的元素会生成一个 BFC。
应用场景
- 清除浮动：在父元素上触发 BFC 可以清除浮动，使得父元素能够包含其内部的浮动元素，而不产生高度塌陷的问题。
- 阻止 margin 重叠：在父元素上触发 BFC 可以阻止相邻块级元素的垂直外边距合并。
- 解决自适应布局问题：通过在容器上触发 BFC，可以避免一些自适应布局问题，例如避免某些元素因为浮动而导致布局混乱。
- 防止元素被浮动元素覆盖：在 BFC 内部的元素不会与浮动元素重叠，可以使用这一特性来防止元素被浮动元素覆盖。
- 实现多栏布局：通过触发 BFC，在布局中创建多个列，可以实现多栏布局的效果。
题目七：水平垂直居中的方法有哪些？
我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。
实现方式：
实现垂直居中的方式共有如下几种：
- 使用 Flexbox 布局
- 使用绝对定位和 transform
- 使用表格布局
- 使用 Grid 布局
- 使用 CSS 伪元素和定位
示例
<!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>
效果展示：
总结：
- 使用 Flexbox 布局：Flexbox 提供了方便的方式来实现水平和垂直居中，只需要在父容器上应用
display: flex;和相关的属性即可。 - 使用绝对定位和 transform：将要居中的元素设置为绝对定位，并通过
top: 50%; left: 50%; transform: translate(-50%, -50%);将其移动到父容器的中心。 - 使用表格布局：将要居中的元素放置在一个表格单元格中，并将单元格水平和垂直居中。
- 使用 Grid 布局：类似于 Flexbox 布局，Grid 布局也提供了方便的方式来实现水平和垂直居中。
- 使用 CSS 伪元素和定位：通过伪元素的方法，利用绝对定位将要居中的元素移动到父容器的中心。
以上就是css中可以实现元素水平垂直的几种方法。
题目八：css3新增了哪些属性？
首先我们要讲解css的定义：css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观，css3是css的最新标准，是向后兼容的，CSS1/2 的特性在 CSS3 里都是可以使用的，而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体验。下面我将讲解css3中所新增的内容。
新增内容：
- 选择器： 属性选择器，伪类选择器
- box-shadow 文本阴影
- background-clip 背景裁剪
- transtion 过渡动画
- transform 转换
- animation 动画
- linear-gradient 渐变色
选择器：
属性选择器允许你根据元素的属性值来选择元素，例如 [attribute]、[attribute=value]、[attribute~=value]、[attribute|=value] 等。
/* 选择所有带有 title 属性的元素 */
[title] {
color: blue;
}
/* 选择 title 属性值为 "example" 的元素 */
[title="example"] {
font-weight: bold;
}
伪类选择器允许你根据元素的状态或位置来选择元素，例如 :hover、:focus、:nth-child()、:not() 等。
/* 鼠标悬停时改变元素的背景颜色 */
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属性的过渡效果，多个属性之间用逗号进行分隔。
示例：
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，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们