CSS 样式补充 👌

1. display: list-item

1.1 基本概念

display: list-item 是一个特殊的显示属性值，它让元素表现得像列表项一样。

核心特性：

本质上仍然是一个块盒（block box）
会自动生成两个盒子：主盒子和次盒子
主盒子：元素本身生成的盒子，包含元素内容
次盒子：附带的标记盒子，显示列表标记（如圆点、数字等）
次盒子和主盒子水平排列

1.2 相关 CSS 属性

1.2.1 list-style-type

设置次盒子中标记的类型

css

/* 常用值 */
list-style-type: disc; /* 实心圆点（默认） */
list-style-type: circle; /* 空心圆点 */
list-style-type: square; /* 实心方块 */
list-style-type: decimal; /* 阿拉伯数字 */
list-style-type: lower-roman; /* 小写罗马数字 */
list-style-type: upper-alpha; /* 大写字母 */
list-style-type: none; /* 无标记 */

1.2.2 list-style-position

设置次盒子相对于主盒子的位置

css

list-style-position: outside; /* 标记在内容区域外（默认） */
list-style-position: inside; /* 标记在内容区域内 */

1.2.3 list-style（简写属性）

css

/* 语法：list-style: type position image */
list-style: disc outside none;
list-style: decimal inside;
list-style: none; /* 清空所有列表样式 */

1.3 实际应用示例

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .custom-list {
        display: list-item;
        list-style-type: decimal;
        list-style-position: inside;
        margin-left: 20px;
        padding: 5px;
        border: 1px solid #ccc;
      }

      .no-marker {
        display: list-item;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <div class="custom-list">这是一个自定义列表项</div>
    <div class="custom-list">这是另一个列表项</div>
    <div class="no-marker">这个列表项没有标记</div>
  </body>
</html>

2. 图片失效时的宽高问题

2.1 问题描述

当 <img> 元素的图片链接无效时，该元素会失去可替换元素的特性，表现得像普通的行内元素一样，无法设置宽高。

2.2 问题原因

正常情况：<img> 是可替换元素，可以设置宽高
图片失效时：<img> 变成普通行内元素，宽高设置无效
根本原因：行内元素无法设置宽高属性

2.3 解决方案

通过改变 display 属性来解决：

css

img {
  display: block; /* 方案1：块级元素 */
  /* 或者 */
  display: inline-block; /* 方案2：行内块元素 */
  width: 200px;
  height: 150px;
}

2.4 完整示例

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .normal-img {
        width: 200px;
        height: 150px;
        border: 2px solid red;
      }

      .fixed-img {
        display: inline-block;
        width: 200px;
        height: 150px;
        border: 2px solid green;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h3>图片链接无效时：</h3>
    <img src="invalid-url.jpg" alt="无效图片" class="normal-img" />
    <p>上面的图片无法设置宽高</p>

    <img src="invalid-url.jpg" alt="修复后的图片" class="fixed-img" />
    <p>上面的图片可以设置宽高</p>
  </body>
</html>

3. 行盒中包含行块盒或可替换元素

3.1 重要概念

行盒的高度与它内部的行块盒或可替换元素的高度无关

3.2 详细说明

行盒高度：由行高（line-height）和字体大小决定
内部元素：行块盒（inline-block）或可替换元素（如 img）的高度不影响行盒高度
视觉效果：内部高元素可能会超出行盒范围，但不会撑开行盒

3.3 实际演示

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        line-height: 30px;
        font-size: 16px;
        border: 1px solid #000;
        background-color: #f9f9f9;
      }

      .inline-block {
        display: inline-block;
        width: 50px;
        height: 80px; /* 高度超过行高 */
        background-color: red;
        vertical-align: top;
      }

      .tall-img {
        height: 60px; /* 高度超过行高 */
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="container">
      这是文本内容
      <span class="inline-block"></span>
      继续文本内容
      <img
        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjMDA3QkZGIi8+Cjwvc3ZnPgo="
        class="tall-img"
        alt="高图片"
      />
      结束文本
    </div>
    <p>注意：红色块和蓝色图片都比行高要高，但行盒高度保持不变</p>
  </body>
</html>

4. text-align: justify（文本分散对齐）

4.1 text-align 属性值

属性值	说明	适用场景
`left`	左对齐	默认值，适用于大多数情况
`right`	右对齐	适用于特殊排版需求
`center`	居中对齐	适用于标题、按钮等
`justify`	分散对齐	适用于段落文本，提升阅读体验

4.2 justify 的特殊性

核心特点：

除最后一行外，其他行都会分散对齐
通过调整单词间距来实现两端对齐
最后一行保持左对齐（默认行为）

4.3 基本使用示例

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本分散对齐示例</title>
    <style>
      .justify-text {
        border: 2px solid #333;
        width: 400px;
        padding: 15px;
        text-align: justify;
        line-height: 1.6;
      }

      /* 让最后一行也分散对齐的技巧 */
      .justify-all::after {
        content: "";
        display: inline-block;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h3>普通分散对齐（最后一行左对齐）：</h3>
    <p class="justify-text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Est officiis
      voluptatibus sint nihil temporibus, dignissimos corporis quo assumenda
      dolor praesentium modi dolorem hic animi voluptatem et delectus quaerat
      molestias deserunt.
    </p>

    <h3>所有行都分散对齐：</h3>
    <p class="justify-text justify-all">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Est officiis
      voluptatibus sint nihil temporibus, dignissimos corporis quo assumenda
      dolor praesentium modi dolorem hic animi voluptatem et delectus quaerat
      molestias deserunt.
    </p>
  </body>
</html>

4.4 让最后一行也分散对齐的技巧

原理：通过伪元素添加一个宽度为 100%的行块盒，强制最后一行也进行分散对齐。

css

.justify-all::after {
  content: "";
  display: inline-block;
  width: 100%;
}

4.5 使用 justify 实现布局

利用 text-align: justify 可以实现元素的分散布局，这是一个巧妙的布局技巧。

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>justify布局示例</title>
    <style>
      .justify-layout {
        width: 600px;
        background: #f0f8ff;
        text-align: justify;
        padding: 20px;
        border: 2px solid #4682b4;
      }

      /* 关键：添加伪元素实现最后一行的分散对齐 */
      .justify-layout::after {
        content: "";
        display: inline-block;
        width: 100%;
      }

      .justify-item {
        width: 120px;
        height: 80px;
        background: #87ceeb;
        border: 2px solid #4682b4;
        display: inline-block;
        margin-bottom: 10px;

        /* 垂直对齐 */
        vertical-align: top;

        /* 内容居中 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h3>使用 text-align: justify 实现分散布局：</h3>
    <div class="justify-layout">
      <div class="justify-item">项目1</div>
      <div class="justify-item">项目2</div>
      <div class="justify-item">项目3</div>
      <div class="justify-item">项目4</div>
      <div class="justify-item">项目5</div>
      <div class="justify-item">项目6</div>
    </div>

    <h4>布局特点：</h4>
    <ul>
      <li>元素自动分散排列</li>
      <li>充分利用容器宽度</li>
      <li>适合卡片式布局</li>
      <li>响应式友好</li>
    </ul>
  </body>
</html>

5. CSS 制作三角形

5.1 基本原理

利用边框（border）的特性来制作三角形：

将元素的宽高设为 0
设置边框宽度
通过控制边框颜色的透明度来显示特定方向的三角形

5.2 基础三角形

css

.triangle {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  /* 只显示左边框，形成向右的三角形 */
  border-left-color: #ff6b6b;
}

5.3 各个方向的三角形

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .triangle-container {
        display: flex;
        gap: 30px;
        align-items: center;
        margin: 20px 0;
      }

      .triangle {
        width: 0;
        height: 0;
        border: 20px solid transparent;
      }

      /* 向上的三角形 */
      .triangle-up {
        border-bottom-color: #ff6b6b;
      }

      /* 向下的三角形 */
      .triangle-down {
        border-top-color: #4ecdc4;
      }

      /* 向左的三角形 */
      .triangle-left {
        border-right-color: #45b7d1;
      }

      /* 向右的三角形 */
      .triangle-right {
        border-left-color: #f9ca24;
      }

      .label {
        font-size: 14px;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h3>CSS 三角形示例：</h3>

    <div class="triangle-container">
      <div>
        <div class="triangle triangle-up"></div>
        <div class="label">向上</div>
      </div>

      <div>
        <div class="triangle triangle-down"></div>
        <div class="label">向下</div>
      </div>

      <div>
        <div class="triangle triangle-left"></div>
        <div class="label">向左</div>
      </div>

      <div>
        <div class="triangle triangle-right"></div>
        <div class="label">向右</div>
      </div>
    </div>
  </body>
</html>

5.4 不同大小的三角形

css

/* 小三角形 */
.triangle-small {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #e74c3c;
}

/* 中等三角形 */
.triangle-medium {
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-bottom-color: #3498db;
}

/* 大三角形 */
.triangle-large {
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-bottom-color: #2ecc71;
}

5.5 实际应用场景

5.5.1 提示框箭头

css

.tooltip {
  position: relative;
  background: #333;
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  display: inline-block;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #333;
}

5.5.2 面包屑导航箭头

css

.breadcrumb-item {
  position: relative;
  background: #f8f9fa;
  padding: 8px 20px 8px 15px;
  display: inline-block;
}

.breadcrumb-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: #ccc;
}

5.6 高级技巧

5.6.1 等腰直角三角形

css

.right-triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #e67e22;
  border-right: 50px solid transparent;
}

5.6.2 带边框的三角形

css

.triangle-with-border {
  position: relative;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-bottom-color: #3498db;
}

.triangle-with-border::before {
  content: "";
  position: absolute;
  top: -17px;
  left: -18px;
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-bottom-color: #ccc;
}

6. direction 和 writing-mode（国际化文本方向）

6.1 基本概念

方向概念：

开始（start）→ 结束（end）：相对方向，因文化而异
左（left）→ 右（right）：绝对方向，固定不变

文化差异：

中文、英文：从左到右（LTR - Left to Right）
阿拉伯文、希伯来文：从右到左（RTL - Right to Left）
中文古文、日文：从上到下，从右到左

6.2 direction 属性

设置文本的书写方向（开始到结束的方向）

css

/* 语法 */
direction: ltr; /* 从左到右（默认） */
direction: rtl; /* 从右到左 */

6.3 writing-mode 属性

设置文本的书写模式和方向

css

/* 主要属性值 */
writing-mode: horizontal-tb; /* 水平方向，从上到下（默认） */
writing-mode: vertical-rl; /* 垂直方向，从右到左 */
writing-mode: vertical-lr; /* 垂直方向，从左到右 */

6.3.1 writing-mode 详解

属性值	说明	适用场景
`horizontal-tb`	水平书写，从上到下	默认模式，适用于大多数语言
`vertical-rl`	垂直书写，从右到左	中文古文、日文传统排版
`vertical-lr`	垂直书写，从左到右	蒙古文等特殊排版

6.4 古诗词垂直排版示例

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>
      .poem-container {
        writing-mode: vertical-rl;
        width: 100%;
        height: 400px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        padding: 30px;
        font-family: "楷体", "KaiTi", serif;
        overflow-x: auto;
      }

      .poem-title {
        font-size: 24px;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 20px;
        text-align: center;
      }

      .poem-line {
        font-size: 18px;
        line-height: 1.8;
        color: #34495e;
        margin-right: 25px;
        padding: 10px 0;
      }

      .author {
        font-size: 14px;
        color: #7f8c8d;
        margin-top: 20px;
      }

      /* 现代布局对比 */
      .modern-layout {
        writing-mode: horizontal-tb;
        width: 100%;
        padding: 20px;
        background: #ecf0f1;
        margin-top: 20px;
        font-family: "宋体", SimSun, serif;
      }
    </style>
  </head>
  <body>
    <h3>垂直排版（古典风格）：</h3>
    <div class="poem-container">
      <div class="author">明·杨慎</div>
      <div class="poem-line">都付笑谈中</div>
      <div class="poem-line">古今多少事</div>
      <div class="poem-line">一壶浊酒喜相逢</div>
      <div class="poem-line">惯看秋月春风</div>
      <div class="poem-line">白发渔樵江渚上</div>
      <div class="poem-line">几度夕阳红</div>
      <div class="poem-line">青山依旧在</div>
      <div class="poem-line">是非成败转头空</div>
      <div class="poem-line">浪花淘尽英雄</div>
      <div class="poem-line">滚滚长江东逝水</div>
      <div class="poem-title">临江仙</div>
    </div>

    <h3>水平排版（现代风格）：</h3>
    <div class="modern-layout">
      <h4>临江仙 - 明·杨慎</h4>
      <p>滚滚长江东逝水，浪花淘尽英雄。</p>
      <p>是非成败转头空，青山依旧在，几度夕阳红。</p>
      <p>白发渔樵江渚上，惯看秋月春风。</p>
      <p>一壶浊酒喜相逢，古今多少事，都付笑谈中。</p>
    </div>
  </body>
</html>

7. UTF-8 字符和 Unicode 编码

7.1 基本概念

UTF-8（8-bit Unicode Transformation Format）

是一种针对 Unicode 的可变长度字符编码
可以表示 Unicode 标准中的任何字符
向后兼容 ASCII 编码
是现代 Web 开发的标准字符编码

7.2 在 HTML 中使用 Unicode 字符

7.2.1 HTML 实体表示法

html

<!-- 十六进制表示 -->
&#x8881;
<!-- 袁 -->
&#x8FDB;
<!-- 进 -->
&#x2764;
<!-- ❤ 红心 -->
&#x1F600;
<!-- 😀 笑脸 -->

<!-- 十进制表示 -->
&#34881;
<!-- 袁 -->
&#36827;
<!-- 进 -->
&#10084;
<!-- ❤ 红心 -->

7.2.2 CSS content 属性中的 Unicode

css

/* 在 CSS 中使用 Unicode 转义序列 */
.element::before {
  content: "\59EC\6210"; /* 袁进 */
}

.heart::after {
  content: "\2764"; /* ❤ */
  color: red;
}

.smile::before {
  content: "\1F600"; /* 😀 */
}

7.3 常用 Unicode 字符表

字符	Unicode	HTML 实体	CSS 转义	说明
❤	U+2764	`❤`	`\2764`	红心
★	U+2605	`★`	`\2605`	实心星
☆	U+2606	`☆`	`\2606`	空心星
→	U+2192	`→`	`\2192`	右箭头
←	U+2190	`←`	`\2190`	左箭头
↑	U+2191	`↑`	`\2191`	上箭头
↓	U+2193	`↓`	`\2193`	下箭头
©	U+00A9	`©`	`\00A9`	版权符号
®	U+00AE	`®`	`\00AE`	注册商标
™	U+2122	`™`	`\2122`	商标符号

7.4 实际应用场景

7.4.1 字体图标

css

.icon-heart::before {
  content: "\2764";
  color: #e74c3c;
}

.icon-star::before {
  content: "\2605";
  color: #f39c12;
}

.icon-arrow::after {
  content: "\2192";
  margin-left: 5px;
}

CSS 样式补充 👌 ​

1. display: list-item ​

1.1 基本概念 ​

1.2 相关 CSS 属性 ​

1.2.1 list-style-type ​

1.2.2 list-style-position ​

1.2.3 list-style（简写属性） ​

1.3 实际应用示例 ​

2. 图片失效时的宽高问题 ​

2.1 问题描述 ​

2.2 问题原因 ​

2.3 解决方案 ​

2.4 完整示例 ​

3. 行盒中包含行块盒或可替换元素 ​

3.1 重要概念 ​

3.2 详细说明 ​

3.3 实际演示 ​

4. text-align: justify（文本分散对齐） ​

4.1 text-align 属性值 ​

4.2 justify 的特殊性 ​

4.3 基本使用示例 ​

4.4 让最后一行也分散对齐的技巧 ​

4.5 使用 justify 实现布局 ​

5. CSS 制作三角形 ​

5.1 基本原理 ​

5.2 基础三角形 ​

5.3 各个方向的三角形 ​

5.4 不同大小的三角形 ​

5.5 实际应用场景 ​

5.5.1 提示框箭头 ​

5.5.2 面包屑导航箭头 ​

5.6 高级技巧 ​

5.6.1 等腰直角三角形 ​

5.6.2 带边框的三角形 ​

6. direction 和 writing-mode（国际化文本方向） ​

6.1 基本概念 ​

6.2 direction 属性 ​

6.3 writing-mode 属性 ​

6.3.1 writing-mode 详解 ​

6.4 古诗词垂直排版示例 ​

7. UTF-8 字符和 Unicode 编码 ​

7.1 基本概念 ​

7.2 在 HTML 中使用 Unicode 字符 ​

7.2.1 HTML 实体表示法 ​

7.2.2 CSS content 属性中的 Unicode ​

7.3 常用 Unicode 字符表 ​

7.4 实际应用场景 ​

7.4.1 字体图标 ​

CSS 样式补充 👌

1. display: list-item

1.1 基本概念

1.2 相关 CSS 属性

1.2.1 list-style-type

1.2.2 list-style-position

1.2.3 list-style（简写属性）

1.3 实际应用示例

2. 图片失效时的宽高问题

2.1 问题描述

2.2 问题原因

2.3 解决方案

2.4 完整示例

3. 行盒中包含行块盒或可替换元素

3.1 重要概念

3.2 详细说明

3.3 实际演示

4. text-align: justify（文本分散对齐）

4.1 text-align 属性值

4.2 justify 的特殊性

4.3 基本使用示例

4.4 让最后一行也分散对齐的技巧

4.5 使用 justify 实现布局

5. CSS 制作三角形

5.1 基本原理

5.2 基础三角形

5.3 各个方向的三角形

5.4 不同大小的三角形

5.5 实际应用场景

5.5.1 提示框箭头

5.5.2 面包屑导航箭头

5.6 高级技巧

5.6.1 等腰直角三角形

5.6.2 带边框的三角形

6. direction 和 writing-mode（国际化文本方向）

6.1 基本概念

6.2 direction 属性

6.3 writing-mode 属性

6.3.1 writing-mode 详解

6.4 古诗词垂直排版示例

7. UTF-8 字符和 Unicode 编码

7.1 基本概念

7.2 在 HTML 中使用 Unicode 字符

7.2.1 HTML 实体表示法

7.2.2 CSS content 属性中的 Unicode

7.3 常用 Unicode 字符表

7.4 实际应用场景

7.4.1 字体图标