尚硅谷前端 2023 · 教程站

主题

样式继承和自带样式（Day7 3/3） ​

本页对应 Day07_CSS，共 7 段视频，约 52 分钟。

学习目标 ​

  • 能使用 overflow 的 visible、hidden、scroll、auto 等值控制内容溢出显示，并区分 scroll 与 auto 的差异。
  • 能使用 visibility: hidden 与 display: none 隐藏元素，并判断两者在是否占据位置上的区别。
  • 能说明字体、文本、颜色等可继承样式与背景、边框、宽高等不可继承样式的区别，并在调试工具中识别继承来源。
  • 能识别常见用户代理样式，并解释用户代理样式、继承样式、直接设置样式之间的优先级关系。
  • 能使用选择器直接设置样式覆盖元素自带样式，并说明仅靠继承无法修改 a、strong 等元素部分自带样式的原因。
  • 能安装并启动 Markman，使用标尺测量尺寸、吸管取色，并按说明处理 Adobe AIR 环境安装问题。

知识点 ​

内容溢出：先理解 overflow 的本意 ​

为什么需要：元素里的“内容”不只是文本，后代元素也是内容。内容比父元素大时就会溢出，默认会直接露在外面，甚至和相邻元素重叠。怎么想：overflow 的本意是设置“溢出内容如何显示”，它曾用来开启 BFC 解决外边距塌陷，那只是附带效果，不能混为本意。怎么做：先写一个父元素和若干段落，让段落比父元素宽、数量变多，观察横向、纵向溢出；再给父元素设 overflow: hidden，溢出部分被裁剪。默认值是 visible，直接显示；scroll 固定出现滚动条；auto 只在需要时出现滚动条。易错点：scroll 即使内容不溢出也占滚动条位置，auto 更智能；调试时若把 overflow 写到下面的 .box 上会无效，必须写给真正包住溢出内容的父元素；overflow-x、overflow-y 各管一个方向，一般不当作 overflow 的子属性，单设一个方向时另一方向可能自动出现滚动条，实际开发通常统一用 overflow。

html
<div class="wrapper">
  <p>段落内容……</p>
  <p>段落内容……</p>
  <div class="box"></div>
</div>
css
.wrapper { width: 800px; height: 600px; border: 4px solid red; }
.wrapper p { width: 1200px; background: #ccc; }
.box { width: 800px; height: 200px; background: #099; }

调试时可以看到：段落宽于父元素后横向溢出，多写几个段落又纵向溢出；溢出内容会和下方 .box 位置重叠。此时给 .wrapper 加 overflow: hidden，溢出部分才消失。

隐藏元素：visibility 与 display ​

为什么需要：下拉菜单、二级菜单常常先藏起来，满足条件再显示。怎么想：要区分“隐藏但占位”和“彻底隐藏不占位”。怎么做：visibility: hidden 能隐藏元素，但原位置仍占着；display: none 会彻底隐藏，也不占位置，恢复时设为 display: inline、block、inline-block 等具体显示模式。易错点：visibility: hidden 隐藏后页面布局仍保留空位；display: none 不是把元素从 DOM 删除，检查元素时页面里找不到，但 HTML 结构中仍在；不要写成 display: no，正确值是 none。

样式继承：主要继承文字相关样式 ​

为什么需要：整页统一字体、字号、颜色时，如果每个元素都写一遍会很重复。怎么想：继承是后代从祖先元素获得某些样式，但并非所有样式都能继承。怎么做：常在 body 上统一设置 font-family、font-size、color，后代文字会继承；字体系列如 font-size、font-weight、font-family，以及 color、text-align、line-height、letter-spacing、word-spacing、text-indent 等文本类样式通常可继承。易错点：边框、背景、宽高、外边距、内边距等一般不能继承；背景看起来像继承，其实是默认透明把父元素背景透出来；a 的 color、text-decoration 和 strong 的 font-weight 有自带样式，靠继承往往改不动；调试工具里看到“继承自 body”就说明来源是继承。

css
body { font-family: "宋体"; font-size: 14px; color: red; }
.box { width: 400px; height: 300px; background: #099; }

自带样式：用户代理样式 ​

为什么需要：很多元素不写 CSS 也有默认外观，比如标题会变大加粗、段落有间距、链接有颜色和下划线。怎么想：这是浏览器默认样式表，调试工具里叫“用户代理样式”，也可理解为自带样式。怎么做：h1—h6 自带字号、加粗和上下外边距，例如 h1 常见为 font-size: 2em、font-weight: bold、上下 margin 约 0.67em；p 自带上下 margin 约 1em；em 自带斜体，strong 自带加粗；a 自带颜色、下划线和 cursor: pointer；body 自带约 8px 外边距；div、span 相对干净，span 几乎没有自带样式。易错点：font-size 默认 16px 属于默认值，不等于用户代理样式，只有调试工具“用户代理样式”里显示的才叫自带样式；h1 的上外边距可能塌陷到 body 上；布局前常用重置样式表清掉标题、段落自带的外边距。

继承、自带、直接设置冲突时谁赢 ​

为什么需要：给父元素统一设了颜色，链接可能仍是默认色；设了字重，strong 可能仍加粗。怎么想：来源优先级可记为：直接设置 > 自带样式 > 继承样式。直接设置指选择器选中该元素，行内样式也属于直接设置。怎么做：要改 a 的颜色，必须用选择器选中 a 再设 color，哪怕用标签选择器；要改 strong 的粗细，就选中 strong 设 font-weight。易错点：靠父元素继承改不了 a 的 color、text-decoration 和 strong 的 font-weight，因为继承样式低于用户代理样式；而 font-size 多数元素没有自带，所以能继承生效。调试时展开“用户代理样式”和“继承自……”两栏，就能看清是谁覆盖了谁。

作业目标与本节边界 ​

本节笔记只有两项：1. 导航条；2. 安装标记工具 markman。转写稿里没有给出导航条的完整 HTML/CSS，因此本文不代写导航条代码，只整理作业检查思路和配套工具用法；导航条的具体结构、尺寸、颜色以课堂作业要求为准。为什么需要先说明边界？因为导航条是作业成果，markman 是校对工具，二者不能混为一谈。怎么想：先完成导航条，再用 markman 量尺寸、吸颜色，最后用浏览器调试工具检查样式来源。怎么做：按作业要求实现导航条；安装 markman；对设计图或截图做标注；回代码调整。易错点：markman 不是 markdown，不要搜错软件；没有的导航条代码不要凭空补。

导航条作业中的溢出与下拉隐藏 ​

为什么需要：导航条里可能有超长文字、二级菜单、绝对定位内容，内容一多就可能溢出父元素；二级菜单平时还要藏起来。怎么想：内容溢出用 overflow 控制；下拉菜单隐藏优先用 display: none，需要保留位置时才用 visibility: hidden。怎么做：转写稿的调试过程是——先给父元素设宽高和边框，再让子元素宽度大于父元素，水平方向先溢出；继续增加段落，纵向也溢出；此时相邻的 box 会与溢出内容发生位置重叠。随后设置 overflow: hidden，溢出部分被裁掉；设置 scroll，固定出现滚动条；设置 auto，只有内容溢出时才出现滚动条。

css
overflow: hidden; /* 也可 scroll / auto */

隐藏元素的两段代码来自转写稿：

css
visibility: hidden; /* 隐藏但占位 */
display: none;      /* 彻底隐藏，不占位 */

易错点：overflow: hidden 会裁切内容，导航条下拉菜单若被父级裁切就显示不出来；scroll 不管内容是否溢出都占滚动条位置，auto 更常用；visibility: hidden 还占位置，display: none 才彻底不占位。转写稿还提醒：单独设 overflow-x 或 overflow-y 时，另一个方向可能自动出现滚动条，实际开发少用，统一用 overflow 更好。

导航条文字统一：继承与用户代理样式 ​

为什么需要：导航条文字通常要统一字体、字号、颜色，不可能每个元素都写一遍。怎么想：与文字有关的样式可放在父元素上让后代继承，例如 font-family、font-size、color；但 a、strong、h1 等元素有浏览器自带样式，继承来的样式可能被自带样式压住。怎么做：转写稿的调试很典型——给 .box 设红色和 14px，span、strong 都变红，唯独超链接不变；给 strong 设 font-weight: lighter，它仍然粗，因为用户代理样式里有加粗。最后用选择器直接选中 a 覆盖才成功。

css
body {
  font-family: "宋体";
  font-size: 14px;
  color: #f00;
}
a {
  color: green;
  text-decoration: none;
}

易错点：背景色不能继承，子元素看起来是灰色往往是父元素背景透过来；font-size 用 em 时要看继承下来的基准值；调试工具里“用户代理样式”才是元素自带样式，普通默认值不等于用户代理样式。权重顺序要记住：直接选中元素的样式 > 用户代理样式 > 继承样式。所以改导航条链接颜色，不能只靠父元素继承，必须用选择器选中 a。

安装 markman 并用于导航条标注 ​

为什么需要：导航条作业要量宽高、间距、吸颜色，靠目测容易偏差。怎么想：markman 是标注工具，先装运行环境 Adobe AIR，再装 markman.air；如果安装失败，转写稿说通常是曾装过 Adobe 相关工具造成冲突，需按教程用清理工具处理。怎么做：先解压压缩包；安装 Adobe AIR；再安装 markman；打开后把图片拖进来；按住 Ctrl 滚轮放大；点尺子图标量尺寸，拖拽起点终点，拖拽标注线可改横竖，按退格键删除；点吸管吸颜色。易错点：不解压不行；安装失败不要跳过运行环境；免费功能可标注，但不能保存成标记好的图，可截图留存；markman 不是 markdown。

提交前检查清单 ​

为什么需要：作业容易在细节上丢分。怎么想：按“布局—样式—标注”顺序查。怎么做：检查导航条是否溢出、二级菜单是否能显示、链接颜色是否被用户代理样式覆盖、尺寸是否用 markman 核对。易错点：不要用 visibility: hidden 做下拉菜单后忘记它还占位；不要用继承去改 a 的颜色；标注图不能保存时及时截图。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

一、内容溢出的显示方式（overflow） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内容溢出的显示方式</title>
  <style>
    .wrapper {
      width: 800px;
      height: 600px;
      border: 4px solid red;
      overflow: auto;   /* 依次改成 visible / hidden / scroll / auto 观察效果 */
    }
    .wrapper p {
      width: 1200px;    /* 比父元素还宽 —— 横向溢出 */
      padding: 10px;
      background-color: #ccc;
    }
    .box {
      width: 800px;
      height: 200px;
      background-color: #099;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <p>段落一</p>
    <p>段落二</p>
    <p>段落三</p>
    <p>段落四</p>
    <p>段落五</p>
    <p>段落六</p>
    <p>段落七</p>
    <p>段落八</p>
  </div>
  <div class="box"></div>
</body>
</html>

关键行与易错点

  • overflow 的本意是“内容（文本和后代元素都算内容）溢出元素时怎么显示”，默认值 visible，即溢出就溢出、直接显示。
  • 四个常用值：visible 直接显示；hidden 隐藏溢出部分；scroll 不论内容是否溢出都固定出现滚动条并占位；auto 只有内容溢出才出现滚动条，所以 auto 比 scroll 更“先进”。
  • 把 overflow 改回 visible，就能看到溢出的内容与下方 .box 位置重叠，这正是实际布局里常配 overflow: hidden 的原因。
  • overflow-x / overflow-y 不是 overflow 的子属性，两者各管一维、互不相干：只设 overflow-x: hidden 时，纵向会自动出现滚动条。它们用得很少，统一用 overflow 即可。
  • 顺带一提：overflow 不为 visible 会开启 BFC，从而解决外边距塌陷——那是附带功能，和本节“溢出显示”要分开看。

二、隐藏元素的两种方式（visibility / display） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>隐藏元素的两种方式</title>
  <style>
    div { width: 300px; height: 100px; }

    .box1 { background-color: red; }

    /* 方式一：元素隐藏，但仍然占着位置 */
    .box2 { background-color: green; visibility: hidden; }
    /* 方式二：彻底隐藏，连位置都不占 —— 把上面一行注释掉、打开下面这行对比 */
    /* .box2 { display: none; } */

    .box3 { background-color: blue; }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>
</html>

关键行与易错点

  • visibility 只有两个值：visible（默认，显示）和 hidden（隐藏）。隐藏后位置仍然占着，页面会出现一块空白，所以这种隐藏方式用得不多。
  • display: none 是彻底隐藏：元素不渲染、不占位置，调试工具里在页面中也找不到它。以后大部分隐藏都用它。
  • 下拉子菜单就是这么做的：平时 display: none 藏着，鼠标悬停时改成 display: block（inline、inline-block 也行）——只要不是 none 就会显示。
  • 易错点：不要用 visibility: hidden 做菜单，否则会留下一块占位的空白。

三、继承的样式、自带样式与直接设置 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>继承的样式 vs 自带样式 vs 直接设置</title>
  <style>
    body {
      font-family: 宋体;   /* font 系列可以被后代继承 */
      font-size: 14px;
      color: red;
    }
    .wrapper {
      padding: 20px;
      background-color: #ccc;
      border: 4px dashed #999;  /* 边框不继承，.box 没有这个虚线框 */
      text-align: center;       /* 文本样式，可以继承 */
    }
    .box {
      width: 600px;
      height: 400px;
      padding: 20px;
      background-color: #099;
      font-size: 20px;
      color: #900;
    }
    /* 直接设置：选择器选中了 a 本身，优先级最高 */
    .box a {
      color: green;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="box">
      我是 box 里的文字
      <span>我是 span</span>
      <strong>我是 strong</strong>
      <a href="#">我是超链接</a>
    </div>
  </div>
</body>
</html>

关键行与易错点

  • 能继承的只有跟文字有关的样式：font 系列（font-family / font-size / font-weight / font-style）、color、text-align、line-height、letter-spacing、word-spacing、text-indent。border、padding、margin、背景色等一律不继承。
  • 背景色不继承：.wrapper 的 #ccc 并不是被 .box 继承，而是子元素背景默认透明，把父元素的背景“透”下来了。
  • 优先级：直接设置 > 用户代理（自带）样式 > 继承样式。所以 .box 的 color / font-size 能作用到 span、a、strong 上；但 <a> 的蓝色和 <strong> 的加粗改不掉，因为那是自带样式覆盖了继承来的样式——必须用选择器直接选中它（如 .box a），哪怕权重最低的标签选择器也比继承和自带的高。
  • 用户代理样式（自带样式）要在调试工具的“用户代理样式”里看才算数：h1 自带 font-size: 2em、加粗、上下 margin-block-start/end: 0.67em（这种写法只能在自带样式里出现，自己写只能写 margin-top / margin-bottom）；p 自带上下 margin: 1em；ul / ol 自带左内边距和上下外边距；a 自带颜色、下划线、cursor: pointer；div 和 span 最干净，所以用得最多。
  • 易错点一：font-size 用 em 时以继承下来的字号为基准——body 设了 14px，h1 的 3em 就是 42px 而不是 48px。
  • 易错点二：不要以为自己没设过样式就是“自带样式”，很多只是默认值（如大部分元素并没有自带 font-size），只有调试工具里显示“用户代理样式”的才是自带样式。
  • 实战中常写重置样式表，把标题、段落的自带外边距清掉，避免影响布局。

常见错误 ​

  1. 用 overflow: hidden 治外边距塌陷，结果下拉菜单/投影被裁掉 现象：塌陷修好了，但子元素溢出部分（二级菜单、box-shadow、超出的小角标）直接消失。 原因：overflow: hidden 的本意是裁剪溢出内容，开启 BFC 只是附带效果，裁剪照做。 修法：治塌陷换手段——父元素加 padding/border、或用 display: flow-root；确实要用 overflow 的元素，就别在里面放需要溢出的子元素。

  2. 用 visibility: hidden 做下拉菜单，收起后原位置空一块 现象：菜单看不见了，但下面内容被顶下去一段，布局错乱。 原因：visibility: hidden 只让元素不可见，盒子仍占据文档流位置。 修法：需要"彻底消失不占位"就用 display: none，再在 hover 等条件下改回 block/inline-block。

  3. 给父元素设 color，超链接颜色纹丝不动 现象：整块文字都变红了，只有 <a> 还是蓝的。 原因：<a> 的用户代理样式自带 color，优先级高于从父元素继承来的值。 修法：用选择器直接选中它（a { color: … }，哪怕最低优先级的标签选择器也够），不要指望继承。

  4. 给父元素设 font-weight: lighter，<strong> 依然加粗 现象：其他文字都变细了，加粗的部分没反应。 原因：同样是用户代理样式（font-weight: bold）压过继承值。 修法：直接选中 strong 设置；顺带记住"继承 < 自带 < 直接设置"这个权重顺序。

  5. 只设了 overflow-x: hidden，纵向莫名多出滚动条 现象：只想横向裁剪，结果纵向出现滚动条。 原因：单独设置某一个方向时，另一个方向会被自动处理为 auto（规范如此）。 修法：日常统一用 overflow 一次设置；overflow-x/y 只做了解，别单用。

  6. h1、p 的间距和设计稿永远对不上，怎么调父元素都没用 现象：明明没写 margin，标题上下就是有空白，容器高度也被撑开。 原因：标题系列、段落、ul/ol、body 都自带上下外边距（用户代理样式）。 修法：项目开头写重置样式表，把这些自带 margin 统一清掉，再按设计稿自己写间距。

  7. h1 { font-size: 3em } 出来的大小和预期差一截 现象：以为是 16×3=48px，实际是 42px。 原因：em 相对的是继承下来的父级 font-size（父级设了 14px 就是 14×3）。 修法：算清楚基准；想摆脱父级影响用 rem，或在调试工具里确认实际继承值。

  8. Markman 装不上 / 双击安装包报错 现象：安装 Adobe AIR 阶段失败，或装完打不开。 原因：它依赖 Adobe AIR 运行环境，且旧版 AIR 残留会冲突。 修法：先装 AIR 再装 Markman；装 AIR 失败才用 cleanup 清理工具清残留后重来（装成功就不需要它）。

练习 ​

  1. 做一个 800×600 带边框的容器，内部放若干个 1200px 宽的段落和一个蓝色相邻 div，分别用 visible / hidden / scroll / auto 观察：相邻元素重叠情况、内容未溢出时是否有滚动条。把四种表现的差异用一句话写下来。
  2. 做一个纯 CSS 二级菜单：默认收起，鼠标悬停一级项时展开。要求收起时下方内容位置不跳动；再故意改成 visibility 版本对比一次，说明差异。
  3. 给 body 设置字体族、字号、文字颜色，观察 h1、p、a、strong、span 各自是否继承；然后用调试工具逐个确认哪些是被"用户代理样式"覆盖的，把被覆盖的属性列成清单。
  4. 用 Markman 量一张你自己截的网页截图：标出 3 条尺寸线 + 吸 2 个颜色，然后删掉其中一条线（退格键），确认操作熟练。
  5. 写一份最小重置样式表（清掉 body、h1–h6、p、ul/ol 的默认 margin 与列表符号），套用到第 3 题的页面上，对比重置前后的布局差异。

原视频对照 ​

#视频时长
1内容溢出的显示方式11:40
2隐藏元素04:30
3样式继承11:41
4用户代理样式07:00
5用户代理样式203:11
6用户代理样式和继承的样式07:06
7markman安装07:20

小结 ​

  1. overflow 的主职是"溢出内容怎么显示"，开 BFC 是副作用，两件事要分开看。
  2. scroll 无论溢不溢出都给滚动条，auto 只在需要时给——实际开发优先 auto，overflow-x/y 基本不用。
  3. 隐藏元素两条路：visibility: hidden 保留占位，display: none 彻底消失；下拉菜单类场景一律用后者。
  4. 能继承的基本只有"跟文字有关"的：字体族/字号/字重/字形、color、字间距词间距、text-align/text-indent/text-decoration；背景色、边框、盒模型属性都不继承（看到的"灰底"是透明透出来的）。
  5. 用户代理样式（自带样式）是真实存在的样式，在调试工具的"用户代理样式"面板里能看到；只有那里显示的才算自带样式，其他都只是默认值。
  6. 优先级铁律：直接设置 > 自带样式 > 继承样式。改自带样式的元素，必须用选择器选中它，靠继承一定失败。
  7. 写页面前先做样式重置，主要清的就是标题、段落、列表、body 的自带外边距——它们直接影响布局。
  8. em 参照的是继承来的父级字号，不是浏览器默认的 16px；算不准就用 rem，别和规范较劲。