元素之间水平布局与垂直布局

最新推荐文章于 2024-03-30 17:56:58 发布

Azure_c_c

最新推荐文章于 2024-03-30 17:56:58 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签： css3 html html5 css

本文链接：https://blog.youkuaiyun.com/Azure_c_c/article/details/113086742

HTML+CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了CSS中的元素布局，包括水平方向布局的原理与实践，如设置margin实现元素间距和居中，以及垂直方向布局时如何处理溢出内容，详细解析了overflow属性的使用。

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

元素水平方向布局

子元素在父元素中的水平方向的布局，必须满足如下等式：
margin-left + border-left + padding-left + width + padding-right +border-right + margin-right = 父元素的width
如果等式不满足，则属于过渡约束，浏览器会自动调整右外边距的值。

通过一个例子来说明一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: antiquewhite;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">

		</div>
		<div class="box2">
		
		</div>
	</body>
</html>

我们在body标签中定义了2个div元素类名分别为 “.box1” 和 “.box2”，通过css 设置了高度和高度还有背景色。

预览页面：
在这里插入图片描述
发现 box1和box2 垂直排列在一起。明明box1后面还有那么多空间，为什么不是水平排列？

是因为不满足上述所说的子元素在父元素中水平排列的公式，浏览器默认会自动调整div的右外边距以此满足等式。

在水平方向右三个值可以设置为 auto 分别是

margin-left
width
margin-right

如果将margin-left 或 margin-right 的一侧设置为auto , 这个auto的值会根据等式尽可能的设置为最大。
给box1添加margin-left值为auto：

			.box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				margin-left: auto;
			}

果不其然，margin-left的值被浏览器尽可能的设置为最大。
在这里插入图片描述

如果将margin-left 和 margin-right都设置为auto ，则会将两侧的距离设置为相等的值，从而导致子元素在父元素中水平居中。

			.box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				margin-left: auto;
				margin-right: auto;
			}

预览页面：
在这里插入图片描述

如果不给元素设置宽度，元素默认width值为auto。元素宽度会自动撑满父元素的内容区。

			.box1{
				height: 100px;
				background-color: aqua;
			}

预览页面：
在这里插入图片描述

元素垂直方向布局

子元素在父元素垂直方向布局，如果父元素不设置高度（默认为auto），则满足如下等式：
margin-top+ border-top + padding-top + height + padding-bottom +border-bottom + margin-bottom = 父元素的height