正心全栈编程

显示模式、溢出与背景 ​

盒模型解释一个盒子的尺寸，本节继续比较元素怎样参与页面排列，并处理隐藏、长内容和背景图。

控制显示方式与内容溢出 ​

块级盒子 ​

标题、段落、div、section 等默认通常表现为块级盒子：

css
.panel {
  display: block;
}

常见特点：

  • 默认从新行开始。
  • 未设置宽度时，通常占满可用行宽。
  • 可以直接设置宽高、内边距和外边距。

这些是常见布局表现，不是 HTML 语义的替代说明。

行内盒子 ​

span、a、strong 等默认通常是行内盒子：

css
.status-text {
  display: inline;
}

常见特点：

  • 与其他行内内容在同一行排列。
  • 宽高主要由内容决定。
  • 直接设置 width、height 通常不会按块级盒子的方式生效。
  • 上下外边距不会像普通块级盒子一样推开相邻行。

行内内容仍然有左右内外边距，较大的上下内边距也可能绘制出来，但容易与行框重叠。需要稳定盒子尺寸时，使用 inline-block 或布局模型。

行内块 ​

css
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
}

inline-block 外部像行内内容一样排列，内部尺寸又可以按盒模型控制，适合状态徽标、小按钮等。

多个 inline-block 之间可能出现由 HTML 空白产生的小间隙。页面主布局不使用它，后面用 Flex 的 gap 更直观。

隐藏元素 ​

使用 display: none

css
.is-hidden {
  display: none;
}

元素不显示，也不占据布局空间。它的后代也不会参与渲染。

这只是视觉与布局状态，不等于删除数据或权限保护。不能把敏感内容写进页面后只靠 CSS 隐藏。

使用 visibility: hidden

css
.is-invisible {
  visibility: hidden;
}

元素不可见，但仍保留原来的布局空间。

写法是否可见是否占空间
display: none否否
visibility: hidden否是

需要显示和隐藏交互时，后续 JavaScript 会切换类名；本节只理解 CSS 结果。

处理溢出内容 ​

当内容超过盒子尺寸时，使用 overflow：

css
.notice-list {
  max-height: 240px;
  overflow: auto;
}

常见值：

值结果
visible默认，内容可能绘制到盒子外
hidden裁剪超出内容
auto需要时出现滚动条
scroll始终预留或显示滚动机制，表现由平台决定

也可以分别控制方向：

css
.table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

宽表格在窄屏中常由外层容器提供横向滚动，不要简单裁掉关键列。

显示单行省略号

css
.student-email {
  width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

三条声明需要组合使用。省略号只改变显示，不改变原始文本；关键内容应允许通过详情页、标题提示或其他方式查看完整值。

背景样式 ​

背景颜色 ​

css
body {
  background-color: #f4f7fb;
}

.panel {
  background-color: #ffffff;
}

案例：

html
<style>
    div#div1,div#div2 {width: 100px;height: 60px;}
    #div1 {background-color: hotpink}
    #div2 {background-color: #87CEFA;}
</style>

<div id="div1">背景颜色为：hotpink</div>
<div id="div2">背景颜色为：#87CEFA</div>
hotpink
#87CEFA

背景默认绘制到边框区域下方。元素的文字颜色使用 color，不是 font-color。

背景图片 ​

css
.page-banner {
  background-image: url("./assets/p02/c06_display/flower.png");
}

路径相对于 CSS 文件。背景图主要用于装饰；有内容意义的图片继续使用 HTML img 和合适的 alt。

默认效果：图案重复铺满背景区域。

重复、位置与尺寸 ​

css
.page-banner {
  background-image: url("./assets/p02/c06_display/flower.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
  • background-repeat：是否平铺，常用 no-repeat。
  • background-position：图片在容器中的位置。
  • background-size: cover：覆盖整个容器，可能裁剪图片。
  • background-size: contain：完整放入容器，可能留下空白。
css
.page-banner {
  background-repeat: no-repeat;
}
设置 no-repeat 后，只保留一朵小花。

背景简写 ​

css
.page-banner {
  background: #17233d url("./assets/p02/c06_display/flower.png") no-repeat right center / cover;
}

斜杠前是位置，斜杠后是尺寸。初学阶段先掌握分开写法，确认无误后再使用简写。

渐变背景 ​

渐变由 CSS 生成，不需要图片文件：

css
.page-banner {
  background: linear-gradient(135deg, #1677ff, #5b8ff9);
}

课程只用简单线性渐变，不展开复杂图案。

线性渐变背景

完成后台通知面板 ​

HTML：

html
<section class="notice-panel">
  <header class="notice-header">
    <h2>课程通知</h2>
    <span class="notice-count">2 条未读</span>
  </header>

  <div class="notice-list">
    <article class="notice-item">
      <h3>开课环境检查</h3>
      <p class="notice-text">请在周五前完成 Python、编辑器与浏览器环境检查。</p>
    </article>
    <article class="notice-item">
      <h3>学员资料核对</h3>
      <p class="notice-text">请确认手机号与邮箱填写正确。</p>
    </article>
  </div>
</section>

CSS：

css
.notice-panel {
  max-width: 560px;
  border: 1px solid #d9e1ec;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
}

.notice-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #17233d, #2457a7);
  color: #ffffff;
}

.notice-header h2 {
  display: inline;
  margin: 0;
}

.notice-count {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 18%);
  font-size: 13px;
}

.notice-list {
  max-height: 240px;
  overflow-y: auto;
}

.notice-item {
  padding: 16px 24px;
  border-bottom: 1px solid #eef2f7;
}

.notice-item:last-child {
  border-bottom: 0;
}

.notice-text {
  margin-bottom: 0;
  color: #667085;
}
课程通知2 条未读
开课环境检查
请在周五前完成 Python、编辑器与浏览器环境检查。
学员资料核对
请确认手机号与邮箱填写正确。

这里使用行内块完成小徽标，主页面结构仍将在 Flex 章节实现。

小结 ​

  1. 块级、行内和行内块参与排列和接受尺寸的方式不同。
  2. display: none 不占空间，visibility: hidden 保留空间。
  3. overflow 负责处理超出盒子范围的内容。
  4. CSS 背景适合装饰，内容图片仍应使用 img。
  5. 页面主布局不依赖行内块，将由 Flex 完成。
背景颜色与通知面板源码
html
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色</title>
    <style>
        #div1 {background-color: hotpink;}
        #div2 {background-color: #87CEFA;}
    </style>
</head>
<body>
<div id="div1">背景颜色为：hotpink</div>
<div id="div2">背景颜色为：#87CEFA</div>
</body>
</html>
html
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程通知</title>
    <style>
        .notice-panel {
            max-width: 560px;
            border: 1px solid #d9e1ec;
            border-radius: 12px;
            overflow: hidden;
            background-color: #ffffff;
        }

        .notice-header {
            padding: 20px 24px;
            background: linear-gradient(135deg, #17233d, #2457a7);
            color: #ffffff;
        }

        .notice-header h2 {
            display: inline;
            margin: 0;
        }

        .notice-count {
            display: inline-block;
            margin-left: 12px;
            padding: 3px 8px;
            border-radius: 999px;
            background-color: rgb(255 255 255 / 18%);
            font-size: 13px;
        }

        .notice-list {
            max-height: 240px;
            overflow-y: auto;
        }

        .notice-item {
            padding: 16px 24px;
            border-bottom: 1px solid #eef2f7;
        }

        .notice-item:last-child {
            border-bottom: 0;
        }

        .notice-text {
            margin-bottom: 0;
            color: #667085;
        }
    </style>
</head>
<body>
<section class="notice-panel">
    <header class="notice-header">
        <h2>课程通知</h2>
        <span class="notice-count">2 条未读</span>
    </header>

    <div class="notice-list">
        <article class="notice-item">
            <h3>开课环境检查</h3>
            <p class="notice-text">请在周五前完成 Python、编辑器与浏览器环境检查。</p>
        </article>
        <article class="notice-item">
            <h3>学员资料核对</h3>
            <p class="notice-text">请确认手机号与邮箱填写正确。</p>
        </article>
    </div>
</section>
</body>
</html>