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

前言

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

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

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

实现方式:

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

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

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

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

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

    .hidden {
        position: absolute;
        left: -9999px;
    }
    
  5. 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>

总的来说,它们的特点及区别如下:

  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 内部,浮动元素不会覆盖块级盒子,也不会与块级盒子重叠。

示例

<!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>

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

在这个示例中,.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 伪元素和定位

示例

<!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>

效果展示:

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

总结:

  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)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观,css3css的最新标准,是向后兼容的,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] 等。

/* 选择所有带有 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-shadowbox-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,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们

原文链接:https://juejin.cn/post/7338731016738078757 作者:沐渃清澄

(0)
上一篇 2024年2月25日 上午10:10
下一篇 2024年2月25日 上午10:21

相关推荐

发表回复

登录后才能评论