【CSS笔记】

盒子模型（Box Model）

CSS 盒子模型是网页布局的基础 ——所有 HTML 元素都可以被看作一个 “盒子”，页面布局本质就是对这些盒子的尺寸、位置、间距进行控制。理解盒子模型是掌握 CSS 布局（静态布局、Flex、Grid 等）的关键。

组成

内容区（Content）
盒子的核心，显示文本、图片等实际内容。由 width（宽度）和 height（高度）控制尺寸。
内边距（Padding）
内容区与边框之间的空白区域，会扩大盒子的实际尺寸，且受 background 背景色影响（和内容区同背景）。
边框（Border）
包裹内边距和内容区的线条，会进一步扩大盒子尺寸，可控制样式（实线 / 虚线）、宽度、颜色。
外边距（Margin）
盒子与其他盒子之间的空白区域，不会影响盒子自身尺寸，仅控制盒子与外部元素的间距（透明，不受背景影响）。

属性

内容区（Content）
控制属性：width（宽度）、height（高度）
取值：
固定值：px（像素，如 width: 300px）
相对值：%（相对于父元素的宽度 / 高度，如 width: 50%）、em（相对于字体大小）、rem（相对于根元素字体大小）
特殊值：auto（默认，自动适应内容或父元素）、max-width（最大宽度，防止溢出）、min-width（最小宽度，防止过小）

width: 80%; /* 相对于父元素宽度的80% */ max-width: 1200px; /* 最大不超过1200px，适配大屏幕 */ min-width: 320px; /* 最小不小于320px，适配手机 */ height: auto; /* 高度自动适应内容 */

内边距（Padding）

控制属性：padding（简写）、padding-top/padding-right/padding-bottom/padding-left（单方向）
取值：px、%（相对于父元素宽度）、em 等，不能为负数
示例（简写）：

/上->右->下->左/
padding: 10px; /* 上下左右均为10px/
padding: 10px 20px; /上下10px，左右20px/
padding: 10px 20px 30px; /上10px，左右20px，下30px/
padding: 10px 20px 30px 40px; /上10、右20、下30、左40（顺时针） */

边框（Border）
核心属性：border-width（宽度）、border-style（样式）、border-color（颜色）
简写：border: 宽度 样式 颜色（必须包含 border-style，否则边框不显示）
常用样式：solid：实线（最常用）、dashed：虚线、dotted：点线、double：双线、none：隐藏边框
示例：

.box { border: 2px solid #f00; /* 2px 红色实线边框 */ border-top: 3px dashed #00f; /* 上边框单独设置：3px 蓝色虚线 */ border-radius: 8px; /* 圆角（可选，让边框变圆润） */ border-top-left-radius: 10px; /* 左上角单独圆角 */ }

外边距（Margin）

控制属性：margin（简写）、margin-top/margin-right/margin-bottom/margin-left（单方向）
取值：px、%、em，可以为负数（让盒子重叠或偏移）
简写规则：与 padding 完全一致
关键特性：
水平居中：给块级元素设置 margin: 0 auto，可实现水平居中（需指定宽度，否则宽度 100% 无法居中）：
.box {
width: 500px;
margin: 0 auto; /* 上下边距0，左右自动（水平居中） */
}

外边距折叠（Margin Collapse）：

相邻两个块级元素的垂直外边距（margin-bottom 和 margin-top）会 “合并”，取较大值（不是相加）。
示例：上方盒子 margin-bottom: 20px，下方盒子 margin-top: 30px，最终间距是 30px（不是 50px）。
解决方法：避免同时设置相邻元素的垂直外边距，或用 padding/border 分隔，或使用 Flex/Grid 布局（会取消折叠）。
CSS Flex 布局（弹性布局）：
Flex 布局是 CSS 中最强大、最常用的布局方案之一 ——专门用于解决 “元素在容器中如何灵活排列、对齐、分配空间” 的问题，替代了传统的浮动（float）、定位（position）等复杂布局方式，适配性极强（从移动端到桌面端通用）。
核心特点： 容器可指定方向（水平 / 垂直），子元素（弹性项）能自动填充剩余空间、收缩适应，且不脱离文档流。

Flex 布局的核心结构
Flex 布局由【容器（Flex Container）】和【子元素（Flex Item）】组成，需先给容器设置display: flex或display: inline-flex激活 Flex 模式：

display: flex：容器是块级元素（独占一行，宽度默认 100%）
display: inline-flex：容器是行内块元素（宽度由子元素决定，与其他元素同行排列）
容器的核心属性（控制整体布局）
容器属性决定子元素的排列方向、换行规则、主轴对齐、交叉轴对齐等