当前位置：首页 > news >正文

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

news 2025/8/4 19:47:57

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>