49_盒子模型-水平方向的布局

最新推荐文章于 2022-08-17 20:02:23 发布

「已注销」

最新推荐文章于 2022-08-17 20:02:23 发布

阅读量159

点赞数

分类专栏： HTML CSS 基础

本文链接：https://blog.csdn.net/gty204625782/article/details/119786469

版权

HTML CSS 基础专栏收录该内容

70 篇文章 4 订阅

订阅专栏

元素水平方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：

margin-letf
border-left
padding-left
width
padding-right
border-right
margin-right

以下为原始代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#outer{
				width: 800px;
				height: 200px;
				border: 10px solid skyblue;
			}
			
			#inner{
				width: 200px;
				height: 200px;
				background-color: #bfa;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
	</body>
</html>

一个元素在其父元素中，水平布局必须要满足以下等式：
margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度（必须满足）

以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，等式会自动调整

调整的情况：

（一）如果这七个值中没有为 auto 的情况，则浏览器会自动调整 margin-right 的值以使等式成立

#inner{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	/* margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度 */
	/* 0 + 0 + 0 + 200 + 0 + 0 + ？ = 800 */
	/* 所以 margin-right 的值为600 */
}

在这里插入图片描述

（二）这七个中有三个的值能设置为 auto（width、margin-left、margin-right），如果某个值为 auto ，则浏览器会自动调整为 auto 的那个值以使等式成立

1、如果将一个宽度和一个外边距设置为 auto ，则宽度会调整到最大，设置为 auto 的外边距会自动调成 0 。

#inner{
	width: auto;/* 宽度如果不写，则默认值为 auto */
	height: 200px;
	background-color: #bfa;
	margin-left: auto;
	/* margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度 */
	/* auto + 0 + 0 + auto + 0 + 0 + 0 = 800 */
	/* 所以 width 的值为800，而 margin-left 的值为 0 */
}

在这里插入图片描述

2、如果将三个值都设置为 auto ，则外边距都是 0 ，宽度最大。

#inner{
	width: auto;/* 宽度如果不写，则默认值为 auto */
	height: 200px;
	background-color: #bfa;
	margin-left: auto;
	margin-right: auto;
	/* margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度 */
	/* auto + 0 + 0 + auto + 0 + 0 + auto = 800 */
	/* 所以 width 的值为800，而 margin-left 和 margin-right 的值都为 0 */
}

在这里插入图片描述

3、如果将两个外边距设置为 auto ，宽度是固定值，浏览器则会将外边距设置成相同的值，所以我们经常利用这个特点来使一个元素在其父元素中水平居中。

#inner{
	width: 200px;/* 宽度如果不写，则默认值为 auto */
	height: 200px;
	background-color: #bfa;
	margin-left: auto;
	margin-right: auto;
	/* margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度 */
	/* auto + 0 + 0 + 200 + 0 + 0 + auto = 800 */
	/* 所以 width 的值为200，而 margin-left 和 margin-right 的值都为 300 */
}