前言
前面的一篇文章中,我们已经讲解了,css考点中的盒模型、选择器、单位和像素的相关内容—解析CSS面试考点:盒模型、选择器、单位和像素概念,一网打尽! – 掘金 (juejin.cn),下面让我继续为大家讲解在css中的相关考点。
题目五: 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,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们
原文链接:https://juejin.cn/post/7338731016738078757 作者:沐渃清澄