盒模型布局

最新推荐文章于 2024-04-16 19:33:08 发布

转载最新推荐文章于 2024-04-16 19:33:08 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangpang/p/9720686.html

本文深入解析了盒模型布局的基本概念，包括布局方位、margin的正负值应用，以及如何影响自身和兄弟元素的布局。同时，文章详细阐述了在实际布局中遇到的margin坑位问题，如父子标签和兄弟标签的margin重叠处理，并提供了有效的解决方案。

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

盒模型布局

1、盒模型布局基本介绍

布局方位：margin-left、margin-right、margin-top、margin-bottom
影响自身布局：margin-left、margin-top
影响兄弟布局：margin-right、margin-bottom
正向 / 反向：正值 / 负值

2、margin布局坑位

很多语义标签具有默认margin
父子标签margin-top重叠取大者
兄弟标签margin-bottom、margin-top重叠取大者

=====================================================================================================================================

笔记:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>盒模型布局</title>
	<style>
		/*做页面必备reset操作*/
		html, body {
			margin: 0
		}
		.box, .wrap {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.wrap {
			background: orange;
		}
		/*影响自身布局*/
		/*.box {
			margin-top: 30px;
			margin-left: 100px;
		}*/
		/*影响兄弟布局*/
		/*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/
		/*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/
		.box {
			/*margin-bottom: 30px;*/
			margin-right: 100px;
		}

		/*display:显示方式*/
		/*块:block*/
		/*内联:inline*/
		/*内联块:inline-block*/
		.box, .wrap {
			display: inline-block;
			/*vertical-align: top;*/
		}

		
		/*兄弟坑*/
		/*盒模型布局坑只出现在和margin-top相关的地方*/
		.s1, .s2 {
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		/*重叠取大值*/
		.s1 {
			margin-bottom: 30px;
		}
		.s2 {
			margin-top: 40px;
		}
		
		/*父子坑*/
		.sup {
			width: 200px;
			height: 200px;
			background-color: cyan;
		}
		.sub {
			width: 100px;
			height: 100px;
			background-color: orange;
		}
		/*父子top重叠,取大值*/
		.sup {
			margin-top: 50px;
		}
		.sub {
			margin-left: 50px;
		}
		/*解决盒模型经典布局坑*/
		/*1.将父级固定*/
		.sup {
			/*border-top: 1px solid black;*/
			/*border-top: 1px solid transparent;*/
			/*保证显示区域 200*200 */
			/*height: 199px;*/
		}
		.sub {
			/*margin-top: 50px;*/
		}
		/*2.通过padding*/
		.sup {
			padding-top: 50px;
			height: 150px;
		}

		
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="wrap"></div>

	<!-- 坑 -->
	<section class="s1">1</section>
	<section class="s2">2</section>

	<div class="sup">
		<div class="sub"></div>
	</div>
</body>
</html>

转载于:https://www.cnblogs.com/zhangpang/p/9720686.html