web前端开发技术课堂笔记——盒模型结构

盒模型的外三层结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒模型的外三层结构</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body{
				font-size: 8px;
			}
			.text{
				width: 500px;
				height: 500px;
				background-color: lavender;
				/*padding-top: 50px;
				padding-right: 60px;
				padding-left: 60px;
				padding-bottom: 50px;*/
				padding: 50px 60px;  /*这句相当于上面四句*/
				color: black;
				font-size: 2em;
				text-indent: 2rem;  /*首行缩进2个字符*/
				text-align: justify;/*文本两端对齐*/
				line-height: 3rem;  /*行之间的距离*/
				border-bottom: 10px solid orange;
			}
		</style>
	</head>
	<body>
		<div class="text">
			《鲜花》是回春丹乐队演唱的歌曲，由刘西蒙作词、作曲，于2023年9月30日作为单曲发行。《鲜花》是刘西蒙为纪念去世前辈而创作的歌曲，是首治愈系歌曲，歌词美好又热烈，像告白又像告别，像重逢又写满了遗憾与悔恨，唱出了对生命和生活的热爱。
		</div>
	</body>
</html>

排版鲜花页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>排版鲜花页面</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			.parent{
				width: 1000px;
				/*height: 300px;*/
				margin: 0 auto;
				overflow: hidden;
				/*background-color:red;*/
			}
				.son01,.son02,.son03,.son04{
					float: left;
					width: 200px;
					height: 200px;
					margin-left:20px;
					border: 1px solid black;
					padding: 20px 12px 50px;
				}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son01">
				<img src="img/花朵1.png" />
			</div>
			<div class="son02">
				<img src="img/花朵1.png" />
			</div>
			<div class="son03">
				<img src="img/花朵1.png" />
			</div>
			<div class="son04">
				<img src="img/花朵1.png" />
			</div>
		</div>
	</body>
</html>

image

盒模型的外三层，指的是从内到外包裹内容的三层“容器”，分别是：
  1. 内边距（padding）：内容与边框之间的距离
  2. 边框（border）：盒子本身的边界线
  3. 外边距（margin）：盒子与其他盒子之间的距离

你可以把它想象成一个快递盒：

  • 商品内容 = width/height （盒子内部的内容尺寸）
  • 防震泡沫 = padding （商品和盒子内壁的空隙）
  • 纸箱本身 = border （盒子的边框）
  • 两个快递盒之间的空隙 = margin （盒子和盒子之间的距离）
posted @ 2026-04-20 18:18  柒月份  阅读(20)  评论(0)    收藏  举报