CSS 布局机制与盒模型详解

一、水平布局与过度约束机制

CSS 中每个块级盒子的水平方向由七个属性共同决定：

html 复制代码

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

这七个值的总和必须等于父元素内容区的宽度。浏览器会根据特定规则自动调整某些值以确保对齐，这种机制称为过度约束机制（over-constrained rule）。

调整规则如下：

无 auto 时：默认调整 margin-right
存在 auto 时：
- 单个 auto：调整该值
- 两个 auto：
  - 若为 margin-left 和 margin-right，则平分实现水平居中
  - 若包含 width，以 width 为主
- 三个 auto：调整 width

因此实现水平居中只需：

css 复制代码

margin: 0 auto;

示例：

html 复制代码

<div class="outer">
  <div class="inner"></div>
</div>

css 复制代码

.outer {
  width: 600px;
  height: 200px;
  border: 10px solid red;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #8f958e;
  margin: 0 auto;
}

二、垂直布局与内容溢出

块级元素默认从上到下排列。通常不为父容器设置固定高度，让其随内容自动撑开。

设置固定高度可能导致内容溢出，可通过 overflow 控制：

值	效果
visible	默认显示超出内容
hidden	隐藏超出内容
scroll	始终显示滚动条
auto	仅在需要时显示滚动条

示例：

css 复制代码

.box1 {
  width: 200px;
  height: 200px;
  background-color: #bfa;
  margin: 50px auto 0;
  overflow: hidden;
  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
}

三、外边距折叠

垂直方向的外边距可能发生折叠：

1. 兄弟元素折叠

相邻块级元素的垂直外边距：

同为正：取较大值
同为负：取绝对值较大值
一正一负：相加

2. 父子元素折叠

父元素与第一个/最后一个子元素的边距相邻时，子元素外边距会传递给父元素。

解决方案：

开启 BFC：overflow: hidden
添加透明边框：border: 0.1px solid transparent
插入伪元素：

css 复制代码

.clearfix::before {
  content: '';
  display: table;
}

四、内联元素特性

行内元素（如 span）的盒模型特性：

宽高由内容决定
左右 padding/border 影响布局
上下 padding/border 会覆盖但不挤开其他元素
上下 margin 无效

visibility 属性：

visible：默认显示
hidden：隐藏但保留占位

五、默认样式重置

浏览器默认样式差异示例：

元素	默认样式
body	margin: 8px
p	margin: 1em 0
ul	padding-left: 40px

常用重置方案：

css 复制代码

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

样式表选择：

Reset.css：彻底清除
Normalize.css：统一兼容

六、盒子尺寸控制

box-sizing 定义尺寸计算方式：

css 复制代码

.box {
  width: 100px;
  height: 100px;
  border: 10px solid yellowgreen;
  box-sizing: border-box; /* 包含边框和内边距 */
}

推荐全局设置：

css 复制代码

* {
  box-sizing: border-box;
}