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

逃离我推掉我的手 2021-12-18 06:49 375阅读 0赞

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

--------------------

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70][]

代码：

<!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.smyhvae.com/20180116_1115.png);
    			/* -108px（将图片相对容器左移108px，这意味着图片中部的108px内容将出现在容器中） */
    			background-position: -108px 0px;
    
    			/* 绝对定位 ：将盒子嵌入父div中，位置为距离左13px，距离顶部-9px，即在顶部上面9px处*/
    			position: absolute;
    			top: -9px;
    			left: 13px;
    		}
    
    		.box .h {
    			width: 308px;
    			height: 40px;
    			background-color: black;
    			color: white;
    			line-height: 40px;
    
    			position: absolute;
    			top: 156px;
    		}
    
    		.box .t {
    			width: 308px;
    			height: 40px;
    			line-height: 40px;
    		}
    
    		.box .money {
    			width: 308px;
    			height: 40px;
    		}
    
    		.box .money .mon1 {
    			width: 60px;
    			height: 25px;
    			line-height: 25px;
    			font-size: 25pX;
    			color: red;
    
    			margin-top: 15px;
    			margin-right: 5px;
    			float: left;
    		}
    
    		.box .money .mon2 {
    			width: 30px;
    			height: 15px;
    			margin-top: 25px;
    
    			line-height: 15px;
    			font-size: 15pX;
    
    			float: left;
    		}
    
    		.box .money .mon3 {
    			width: 100px;
    			height: 15px;
    			margin-top: 25px;
    			line-height: 15px;
    			font-size: 15pX;
    			text-align: center;
    
    			float: right;
    		}
    	</style>
    </head>
    
    <body>
    	<div class="box">
    		<span class="dtc"></span>
    		<img src="http://img.smyhvae.com/20180116_1116.jpg" alt="">
    		<h4 class="h">广东深圳宝安区建安一路海雅缤纷城4楼</h4>
    		<h4 class="t">【海雅缤纷城】 万达影城（深圳海雅广场...</h4>
    		<p> 单人电影票，可观看2D</p>
    		<div class="money">
    			<div class="mon1">
    				 ¥35
    			</div>
    			<div class="mon2">
    				<del>¥80</del>
    			</div>
    			<div class="mon3">
    				已售<span style="color:red">225</span>
    			</div>
    		</div>
    	</div>
    </body>
    
    </html>

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70]: /images/20211218/63c6afdd9292462195d67f2c65f00781.png