list-style是复合属性，等价于同时设置list-style-type、list-style-position和list-style-image；省略任一值则使用默认值（disc outside none），且list-style-image优先级高于type，加载失败即回退为无标记。
list-style 是复合属性，不是单一样式
很多人以为 list-style 只是改个圆点方块，其实它是一行顶三行的简写：等价于同时设置 list-style-type、list-style-position 和 list-style-image。只要漏掉其中一个，浏览器就用默认值补上——比如你只写 list-style: square;，那 position 仍是 outside，image 仍是 none。
常见误操作：
- 写成
list-style: square inside url("icon.png");却发现图标没显示 → 实际是url()优先级高于square，只要图片加载失败或路径错，就会回退到无标记状态，而不是 fallback 到方块 - 在
ul上设了list-style: none;，但子li里又用background-image模拟标记 → 此时必须手动清掉padding-left和margin-left，否则视觉错位
list-style-type 的兼容性陷阱
disc、circle、square 在所有现代浏览器里表现一致，但一旦用到非拉丁系类型（比如 cjk-ideographic 或 hiragana），就容易出问题：
- Firefox 支持最全，Chrome/Edge 对部分东亚类型支持不完整（如
japanese-formal在 Chrome 124+ 才稳定） -
lower-greek在 Safari 中可能渲染为拉丁字母 a/b/c，而非 α/β/γ - 用
none清除标记时，别只写在ul上——如果列表嵌套，内层ul的li仍可能继承外层的list-style-type，得单独重置
list-style-position: inside 会导致文本换行错位
inside 看起来更紧凑，但实际排版风险高：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 当
li内容超长换行时，第二行文字会和第一行左对齐，而不是缩进对齐标记 —— 因为标记已“挤进”内容盒子里 - 移动端小屏下，
inside容易让标记被截断或贴边，尤其配合text-overflow: ellipsis时 - 若必须用
inside，建议搭配box-sizing: border-box和显式padding-left控制内边距，避免依赖浏览器默认计算
自定义图标推荐用 background-image 替代 list-style-image
list-style-image 看似方便，但真实项目中基本不用：
- 尺寸不可控：无法用
background-size缩放，也不能设background-repeat: no-repeat - 对齐难：不同浏览器对图标垂直居中的处理不一致（IE/Opera 偏高，Chrome/Firefox 偏低）
- 推荐做法：
ul { list-style: none; padding: 0; }+li { background: url("dot.svg") no-repeat left center / 12px; padding-left: 20px; }
这样能精确控制图标大小、间距、响应式缩放，也绕开了所有浏览器兼容性坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
