CSS 盒子模型与布局核心知识点总结

一、盒子模型基础组成

内容区（content） ：元素内文本和子元素的显示区域，width和height默认设置内容区大小
内边距（padding）：内容区与边框之间的距离，类似 "防撞泡沫"
边框（border）：盒子的边缘，类似 "快递盒"
外边距（margin）：盒子与其他元素的距离，用于控制位置关系

注意：盒子总大小默认由内容区、内边距、边框共同决定，与外边距无关

二、边框（border）详解

基础语法

简写形式：border: 大小颜色样式;
完整属性：
- border-width：边框宽度（可选，默认 1-3px）
- border-color：边框颜色（可选，默认黑色）
- border-style：边框样式（必选，如solid实线、dashed虚线、dotted点线等）

方向控制

可单独设置某一边的边框：

复制代码

.box {
  border-top: 10px solid red; /* 上边框：10px 红色实线 */
  border-bottom: none; /* 去除下边框 */
}

三、内边距（padding）详解

语法规则

支持 1-4 个值，对应不同方向：

padding: 上右下左;（4 个值）
padding: 上左右下;（3 个值）
padding: 上下左右;（2 个值）
padding: 上下左右;（1 个值）

方向控制

复制代码

.box {
  padding-top: 20px; /* 上内边距20px */
  padding: 10px 20px; /* 上下10px，左右20px */
}

四、外边距（margin）详解

语法规则

与 padding 类似，支持 1-4 个值，对应方向为上、右、下、左

方向控制

复制代码

.box1 {
  margin-top: -50px; /* 元素向上移动50px */
  margin-left: 50px; /* 元素向右移动50px */
}

特殊现象：外边距折叠

兄弟元素：
- 均为正值时，取较大值
- 均为负值时，取绝对值较大值
- 一正一负时，取两者之和

父子元素：

子元素的垂直外边距会传递给父元素

解决方案：

复制代码

/* 方案1：开启BFC */
.parent { overflow: hidden; }

/* 方案2：添加透明边框 */
.parent { border: 0.1px solid transparent; }

/* 方案3：使用伪元素 */
.clearfix::before {
  content: '';
  display: table;
}

五、水平布局与过度约束

水平方向 7 个值：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
浏览器调整规则：
- 无 auto 时，默认调整margin-right
- 有 auto 时，优先调整width；若width固定，margin-left和margin-right为 auto 则水平居中
  
  .inner {
  width: 100px;
  margin: 0 auto; /* 水平居中 */
  }

六、垂直布局与溢出处理

通常不给外层框架设置固定高度，让其被内容撑开
内容溢出时的处理（overflow）：
- visible：默认值，文本正常显示
- hidden：裁剪多余内容
- scroll：强制生成滚动条
- auto：根据内容自动生成滚动条
隐藏滚动槽：scrollbar-width: none;

七、行内元素的盒子特性

内容区：不能设置宽高，由内容撑开
内边距 / 边框：可以设置，垂直方向不会挤压其他元素，只会覆盖
外边距：水平方向有效且会叠加，垂直方向设置不生效

.s1 {
margin-left: 50px; /* 有效 /
margin-right: 50px; / 有效 /
margin-top: 50px; / 无效 */
}

八、盒子大小计算方式（box-sizing）

复制代码

.box {
  box-sizing: content-box; /* 默认值，width/height指内容区 */
  box-sizing: border-box; /* width/height包含边框、内边距和内容区 */
}

九、默认样式与重置

浏览器会为元素设置默认margin和padding，通常需要清除

常用重置方法：

复制代码

* {
  margin: 0;
  padding: 0;
}
li { list-style: none; } /* 清除列表样式 */
a { text-decoration: none; } /* 清除链接下划线 */

重置样式表对比：
- reset.css：清除所有默认样式，需手动设置所需样式
- Normalize.css：保留有用的默认样式，统一不同浏览器的表现

十、元素显示状态（visibility）

复制代码

.box {
  visibility: visible; /* 默认值，正常显示 */
  visibility: hidden; /* 隐藏元素，保留位置 */
}

掌握这些盒子模型和布局的核心知识点，能帮助我们更精准地控制页面元素的显示效果和位置关系，是 CSS 布局的基础。实际开发中需注意不同元素类型的特性差异和浏览器的渲染规则，以实现预期的布局效果。