re:从0开始的CSS学习之路 9. 盒子水平布局

news2024/11/17 15:33:50

0. 写在前面

过年也不能停止学习，一停下就难以为继，实属不应

1. 盒子的水平宽度

当一个盒子出现在另一个盒子的内容区时，该盒子的水平宽度“必须”等于父元素内容区的宽度
盒子水平宽度：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

若强行设置盒子的水平宽度不等于父元素内容区的宽度时，这种情况称为“过度约束”
若发生过度约束时，浏览器会按照从左到右的顺序尽可能的满足条件，若不满足则自动调整margin-right使等式成立
（注：现在好像不能在浏览器中通过F12选元素查看到浏览器的自动调整，不知道是为啥）

margin-left和margin-right的auto属性：让浏览器自动设置左右外边距
margin-left和margin-right的值设置为auto后，浏览器会根据上述公式平均分配左右外边距

盒子的水平居中
width: 100px;
margin: 0 auto;
注意：必须指明宽度width，否则默认值为auto，浏览器会默认使用width进行内容区的填充

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
	<title>Box horizontal layout</title>

	.father {
		width: 1200px;
		height: 200px;
		border: 5px solid red;
	}
	
	.son {
		width: 200px;
		height: 200px;
		background-color: #c7decc;
	
		margin: 0 auto;
	}
</head>

<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

</html>