html为什么要嵌套一些看似无用的div？

最新推荐文章于 2023-04-06 16:03:40 发布

令月十一

最新推荐文章于 2023-04-06 16:03:40 发布

阅读量360

点赞数

分类专栏： vue element 图片文章标签： css html vue.js elementui

本文链接：https://blog.csdn.net/weixin_44234050/article/details/119903642

版权

图片同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

element

5 篇文章 0 订阅

订阅专栏

记录：

今天在使用`：after`伪元素的时候想要当`hover`时让其覆盖整个父元素，了解到以下的知识点：

css绝对定位

相对定位的元素并未脱离文档流，而绝对定位的元素则 脱离文档流。
在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的 非 static 祖先 元素定位。 当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。

基于此可设计出：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>After</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<style type="text/css">
			.el-card {
				text-align: center;
			}

			.el-card__body {
				position: relative;
				background-color: #EEEEEE60;
			}

			.el-carousel__button {
				background-color: #1B222B !important;
			}

			.el-carousel__container {
				height: 96vh !important;
			}



			.el-card__body .el-image img {
				border-radius: 8px;
			}


			.el-card__body .el-image::after {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
				content: '♥';
				font-size: 6px;
				transition: .4s;
				position: absolute;
				transform: rotateX(180deg);
				background-image: linear-gradient(#ffffff80, #00000000);
			}

			.el-card__body .el-image:hover::after {
				opacity: 1;
				color: #ff0000;
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div id="home">
			<el-carousel trigger="click">
				<el-carousel-item v-for="item in imgs" :key="item.index">
					<el-card>
						<div slot="header">
							<el-avatar :src="item"></el-avatar>
						</div>
						<el-image :src='item' fit="cover">
						</el-image>
					</el-card>
				</el-carousel-item>
			</el-carousel>
		</div>
	</body>
	<script>
		let Main = {
			data() {
				return {
					imgs: [
						'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
						'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
						'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
						'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
						'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
						'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
					]
				};
			}
		};
		let Ctor = Vue.extend(Main);
		new Ctor().$mount('#home');
	</script>
</html>