css盒子模型简单案例

朝辉（zhaohui）

已于 2024-06-23 01:09:41 修改

阅读量493

点赞数 7

文章标签： css 前端 css3

于 2024-06-23 01:07:16 首次发布

本文链接：https://blog.csdn.net/2301_82002383/article/details/139890951

版权

<!DOCTYPE html>
<html>
<head>
	<style>
		/* 定义父盒子样式 */
		.parent {
			width: 400px;
			height: 300px;
			background-color: #f2f2f2;
			padding: 20px;
			border: 5px solid black;
			margin: 10px;
		}

		/* 定义子盒子样式 */
		.child {
			width: 100px;
			height: 100px;
			background-color: #ccc;
			padding: 10px;
			border: 2px solid red;
			margin: 10px;
		}

		/* 定义左浮动样式 */
		.float-left {
			float: left;
		}

		/* 定义右浮动样式 */
		.float-right {
			float: right;
		}
	</style>
</head>
<body>
	<!-- 父盒子 -->
	<div class="parent">
		<!-- 左浮动子盒子 -->
		<div class="child float-left">左浮动子盒子</div>
		<!-- 右浮动子盒子 -->
		<div class="child float-right">右浮动子盒子</div>
	</div>
</body>
</html>

在这个示例中，我们定义了一个父盒子和一个子盒子，父盒子的宽度为400px，高度为300px，背景颜色为浅灰色，内边距为20px，边框为5px黑色实线，外边距为10px。子盒子的宽度为100px，高度为100px，背景颜色为浅灰色，内边距为10px，边框为2px红色实线，外边距为10px。我们还定义了两个浮动样式，分别为左浮动和右浮动。在父盒子中，我们创建了两个子盒子，分别应用了左浮动和右浮动样式，使它们在水平方向上进行浮动排列。

效果图：

朝辉（zhaohui）

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型简单案例

在这个示例中，我们定义了一个父盒子和一个子盒子，父盒子的宽度为400px，高度为300px，背景颜色为浅灰色，内边距为20px，边框为5px黑色实线，外边距为10px。子盒子的宽度为100px，高度为100px，背景颜色为浅灰色，内边距为10px，边框为2px红色实线，外边距为10px。我们还定义了两个浮动样式，分别为左浮动和右浮动。在父盒子中，我们创建了两个子盒子，分别应用了左浮动和右浮动样式，使它们在水平方向上进行浮动排列。
复制链接

扫一扫