通过一个实例理解“父相子绝”（CSS重难点，附完整代码）

最新推荐文章于 2024-11-18 16:34:47 发布

微子细

最新推荐文章于 2024-11-18 16:34:47 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 练习实例文章标签： css 定位属性父相子绝

本文链接：https://blog.youkuaiyun.com/qq_34243694/article/details/94479672

本文详细解析CSS中的'父相子绝'概念，通过实例演示如何实现这一效果，并提供完整代码。配合千古壹号GitHub项目，帮助读者掌握这一难点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

效果图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		.box {
			width: 308px;
			height: 307px;
			border: 1px solid #FF7E00;
			margin: 100px;
			position: relative;
			/*父相子绝*/
		}

		.box img {
			width: 308px;
			height: 196px;
		}

		.box .dtc {
			/* 设置盒子 */
			display: block;
			width: 52px;
			height: 28px;

			/* 装图 */
			background-image: url(http://img