css核心技术第三篇（笔记）

盒子模型基础概念

所有 HTML 元素都被 “盒子” 包裹，是网页精准布局、处理元素排列的核心；主要分为 ** 区块盒子（block）和行内盒子（inline）** 两类，且盒模型整体适用于区块盒子。

盒子类型及特点

盒子模型的组成（共 4 部分）

CSS 盒模型包含以下 4 层（从内到外）：

1. 盒子内容：显示内容的区域，大小由内容或width/height决定；
2. 内边距（padding）：内容与边框之间的距离；
3. 边框（border）：包裹内容和内边距的线条；
4. 外边距（margin）：盒子与其他元素之间的距离。

边框（border）的属性用法

1. 边框缩写属性

• 语法：border: 边框粗细 边框样式 边框颜色;（三部分用空格分隔，顺序可调整，边框样式必填）
• 示例：border: 1px solid #f1f1f1;（1 像素、实线、浅灰色边框）
• 常用边框样式：
  • dotted：点状边框（圆点虚线）
  • dashed：虚线边框（短横线虚线）
  • solid：实线边框（单一线条）

2. 单方向边框（按方位设置）

• 语法：border-方位: 粗细 样式 颜色;（方位可选top/bottom/left/right）
• 示例：border-bottom: 1px solid pink;（仅底部加边框）
• 适用场景：
  1. 四个边框样式 / 颜色不同；
  2. 单独加某一边框（如底部加线做分割线）。

圆角基本作用

border-radius用于设置元素外边框的圆角效果，是盒子模型中美化元素的常用属性。

使用场景

1. 普通场景：
   • 给盒子添加圆角，提升视觉美观度；
   • 将正方形盒子 / 图片设置为正圆形。
2. 特殊场景：
   • 胶囊圆角（长方形元素的圆角效果）；
   • 部分角带圆角（如淘宝侧边栏仅左上角、右下角有圆角，其余角无）。

属性用法

1. 基础语法

css

border-radius: 属性值; /* 属性值支持数字（如px）、百分比 */

2. 多参数写法（顺时针顺序：左上 → 右上 → 右下 → 左下）

不同参数数量对应不同角的圆角分配：

3. 特殊场景实现

• 胶囊圆角：长方形元素设border-radius: 高度的一半;（例：高度 40px 的元素，设20px）；
• 圆形：正方形元素设border-radius: 50%;或border-radius: 高度的一半;；
• 部分角圆角：不需要圆角的角设为0（例：仅左上、右下圆角：border-radius: 12px 0 0 12px;）。

圆角原理

border-radius的值对应 “圆角的半径”，因此正方形元素设border-radius: 50%;时，会形成正圆形（半径为元素宽 / 高的一半）。

内边距基本定义

内边距（padding）是元素边框与内容区域之间的距离，属于盒子模型的核心组成部分。

使用场景

让盒子的内容与边框之间保留一定空白间距，避免内容紧贴边框，提升页面布局的美观度。

写法规则

1. 多值缩写（顺时针顺序：上 → 右 → 下 → 左）

通过不同数量的参数，批量设置多个方向的内边距：

2. 单边设置（单独控制某一方向）

通过 “方位名词 + padding” 的属性，单独设置某一个方向的内边距：

css

padding-top: 10px; /* 仅上内边距 */ padding-right: 10px; /* 仅右内边距 */ padding-bottom: 10px; /* 仅下内边距 */ padding-left: 10px; /* 仅左内边距 */

外边距基本定义与使用场景

• 定义：外边距（margin）是盒子周围的空白空间，作用是将其他元素 “推开”，属于盒子模型的外层部分。
• 场景：让元素之间保留一定间距，提升布局美观度。

写法规则

1. 多值缩写（顺时针顺序：上 → 右 → 下 → 左）

通过不同数量的参数，批量设置多个方向的外边距：

2. 单边设置（单独控制某一方向）

通过 “方位名词 + margin” 的属性，单独设置单方向外边距：

css

margin-top: 10px; /* 仅上外边距 */ margin-right: 10px; /* 仅右外边距 */ margin-bottom: 10px; /* 仅下外边距 */ margin-left: 10px; /* 仅左外边距 */

注意事项（行内元素限制）

行内元素（如span、a）的margin存在以下限制：

• 仅左右外边距生效；
• 上下外边距无效；
• 同时，行内元素设置width/height也无效。

实用技巧：区块元素水平居中

给有宽度的区块元素设置margin: auto;（或margin-left: auto; margin-right: auto;），可实现水平居中（网页布局常用技巧，如小米、京东的容器居中）：

css

.container { width: 1200px; /* 必须设置宽度 */ margin: auto; /* 水平居中 */ }

特殊问题 1：外边距折叠（兄弟元素）

情况：

并列（兄弟关系）的区块元素，上下外边距会发生合并（折叠）。

表现：

两个元素的上下外边距会合并为 “其中较大的那个值”（例：A 盒margin-bottom:100px，B 盒margin-top:50px，最终间距为 100px）。

解决：

只需给其中一个元素设置上下外边距即可（避免同时给兄弟元素设置上下 margin）。

六、特殊问题 2：外边距塌陷（父子元素）

情况：

嵌套（父子关系）的区块元素，给子元素设置上下外边距时，会带动父元素一起移动（而非子元素在父元素内产生间距）。

解决方案（三选一）：

1. 给父元素添加上边框（如border-top: 1px solid transparent;）；
2. 给父元素添加上内边距（如padding-top: 1px;）；
3. 给父元素添加overflow: hidden;属性。

盒子模型 - 尺寸计算默认尺寸计算的问题

在 CSS 盒子模型的默认规则中：

• 元素的width/height仅表示内容区域的大小；
• padding（内边距）和border（边框）会额外 “撑大” 盒子的实际尺寸。

例：设置width:200px+border:5px+padding:10px，盒子实际宽度为：200 + 5×2 + 10×2 = 230px，这种计算方式会增加布局的复杂度。

box-sizing属性（控制尺寸计算方式）

box-sizing用于定义盒子的尺寸计算规则，解决 “padding/border 撑大盒子” 的问题，核心是控制width/height是否包含padding和border。

语法：

css

box-sizing: 属性值;

两个核心属性值：

实际开发建议

为了简化布局计算，推荐全局设置border-box，写法示例：

css

/* 让页面所有元素（包括伪元素）都使用border-box计算尺寸 */ body *, body *::before, body *::after { box-sizing: border-box; }

盒子背景background 属性的基本定义

background是 CSS 中用于设置元素背景相关属性的综合属性，可控制背景颜色、背景图片、背景位置、背景重复方式等样式。

使用场景

1. 给盒子添加精美背景图片，提升视觉效果；
2. 给列表添加小图标作为装饰元素；
3. 给页面添加大幅背景图，增强页面氛围感；
4. 纯 CSS 实现背景渐变效果。

核心子属性详情

背景渐变基本定义

在 CSS 中，可通过linear-gradient（线性渐变）和radial-gradient（径向渐变）两种方法，为元素添加渐变背景效果。

使用场景

1. 给文字添加渐变底色，让文字更生动吸睛；
2. 给盒子添加渐变背景，提升视觉美观度。

两种渐变类型详情

|

| `radial-gradient()` | 径向渐变（形状、位置可控）| 1. 形状：如`circle`（圆形）<br>2. 色标：指定渐变颜色 | ```css radial-gradient(circle, #ff9a9e, #fad0c4); ``` |

盒子阴影（box-shadow）

基本定义

CSS 的box-shadow属性用于给元素框架添加阴影效果。

使用场景

1. 给盒子加阴影，增强立体效果；
2. 鼠标 hover 元素时显示阴影，突出目标元素。

语法与参数

css

box-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 [inset];

• 核心要点：
  1. X/Y 轴偏移量是必填项，其余参数可选（取默认值）；
  2. 默认是外阴影，加inset可改为内阴影；
• 示例：

  css

  nav li { box-shadow: 0 15px 30px rgba(0,0,0,.1); }

过渡（transition）

基本定义

过渡效果（Transition）用于让元素的属性值变化时平滑过渡（而非瞬间切换）。

使用场景

1. 鼠标 hover 图片时，图片平滑放大；
2. 表单获得焦点时，输入框样式平滑变化。

语法

css

transition: 过渡属性 过渡时间;

• 核心要点：
  1. 过渡属性：若所有属性都要过渡，可写all；
  2. 过渡时间：单位为秒（s），如0.3s；
• 示例：

  css

  input:hover { transition: all 0.3s; }

样式初始化

核心原因

不同浏览器对 HTML 元素的默认样式（如margin、padding、font-size）存在差异，会导致跨浏览器兼容性问题。

初始化目的

1. 统一浏览器默认样式，消除差异；
2. 减少后续开发的冗余代码；
3. 提高代码可维护性。

最佳实践

• 小型项目（新手）：简单重置

  css

  /* 清除所有元素的默认margin、padding，统一盒模型 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 重置列表默认样式（去掉黑点/数字） */ ul, ol { list-style: none; } /* 重置链接默认样式（去掉下划线） */ a { text-decoration: none; }

• 中大型项目：推荐 Normalize.css

  1. 引入方式：在 HTML 中添加链接标签引入文件；

     html

     预览

     <link rel="stylesheet" href="./css/Normalize.css">

  2. 下载地址：https://necolas.github.io/normalize.css/（Vue 官网等项目也常用此方案）。

字体图标（Icon Font）

1. 基本定义

是一种将图标以字体形式嵌入网页的技术，可像文字一样通过 CSS 控制图标的颜色、大小、阴影等样式。

2. 使用场景

1. 导航菜单的功能图标；
2. 按钮的操作类图标（如 “搜索”“收藏”）；
3. 结合动画实现动态图标效果。

3. 核心优势

1. 矢量缩放：无损放大 / 缩小，不会模糊；
2. 样式灵活：通过 CSS 直接修改颜色、大小、阴影等属性；
3. 减少请求：一个字体文件包含多个图标，比多张小图片更高效；
4. 兼容性强：支持所有现代浏览器，部分旧浏览器也适配。

4. 常用图标库

5. 使用步骤（以 iconfont 为例）

1. 下载：从图标库 / 设计师处获取字体图标文件，保存到项目目录；
2. 引入：在 HTML 中通过<link>引入对应的 CSS 文件；
3. 使用：通过标签调用对应图标，再用 CSS 调整样式（颜色、大小等）。

精灵图（CSS Sprite）

1. 基本定义

CSS Sprites 是将多个小图标 / 图像合并到一张大图，通过调整background-position属性，显示图片中特定区域的技术。

2. 使用场景

1. 导航菜单的功能图标；
2. 按钮的操作类图标；
3. 复杂彩色小图标（更适合精灵图）。

3. 核心优势

1. 减少 HTTP 请求：多图标合并为一张图，仅需一次请求；
2. 提升性能：减少网络开销，避免移动 / 低带宽场景的加载问题；
3. 统一管理：便于维护图标集，避免文件分散。

4. 实现原理

1. 给目标盒子添加合并后的大图作为背景图；
2. 通过background-position属性（调整坐标），定位到需要显示的图标区域；
3. 注意网页坐标的规则（与常规坐标有差异）。