【CSS中list】在CSS中，`list` 是一个与列表相关的概念，通常用于控制无序列表（`

`）和有序列表（`
`）的样式。通过CSS，我们可以自定义列表项（`
1. `）的外观、符号、缩进等属性，使网页内容更加美观和结构清晰。

   以下是对CSS中`list`相关属性的总结，包括其功能和使用示例。

   一、CSS中list相关属性总结

   属性名称	功能说明	示例代码	说明
   `list-style-type`	设置列表项标记的类型（如圆点、数字等）	`list-style-type: circle;`	可选值：disc, circle, square等
   `list-style-image`	使用图片作为列表项的标记	`list-style-image: url('icon.png');`	优先级低于`list-style-type`
   `list-style-position`	控制列表项标记的位置（inside或outside）	`list-style-position: inside;`	默认为outside
   `list-style`	简写属性，可同时设置type、image、position	`list-style: square url('icon.png') inside;`	简化代码，提高可读性

   二、常用列表样式示例

   1. 无序列表（`

   `）

   ```html

   • 项目一
   • 项目二
   • 项目三

   ```

   CSS样式：

   ```css

   ul {

   list-style-type: square;

   list-style-position: inside;

   }

   ```

   2. 有序列表（`

   `）

   ```html

   1. 步骤一
   2. 步骤二
   3. 步骤三

   ```

   CSS样式：

   ```css

   ol {

   list-style-type: decimal;

   list-style-image: url('number.png');

   }

   ```

   三、注意事项

   - `list-style-type` 的默认值为 `disc`（实心圆点），适用于 `

   `。

   - `list-style-position` 的默认值为 `outside`，即标记显示在文本外侧。

   - 若同时使用 `list-style-image` 和 `list-style-type`，`list-style-type` 会失效，优先使用图像。

   - 在某些浏览器中，`list-style-image` 的路径需为绝对路径或相对路径，且文件格式需正确。

   四、实际应用建议

   - 对于现代网页设计，推荐使用 CSS 自定义列表样式，而不是依赖 HTML 原生的列表标记。

   - 如果需要更复杂的列表样式，可以结合 `::marker` 伪元素进行个性化控制。

   - 避免过度依赖列表样式，保持页面结构清晰，提升可访问性和用户体验。

   通过合理使用 CSS 中的 `list` 相关属性，可以有效提升网页的视觉效果和用户交互体验。掌握这些基础属性，是前端开发人员必备技能之一。