ul和ol需重置margin:0和padding-left:0；兼容值为disc/circle/square（ul）及decimal/lower-alpha等（ol）；推荐li:not(:last-child)设margin-bottom或gap控制间距；新项目用::marker，旧环境用background-image+padding-left。
ul 和 ol 的默认缩进和边距怎么重置？
浏览器对 ul 和 ol 有默认的 padding-left（通常 40px）和上下 margin，直接写 CSS 很容易以为“没生效”，其实是被默认样式盖住了。
- 必须显式重置：
ul, ol { margin: 0; padding-left: 0; } - 如果用
reset.css或normalize.css，也要确认它们是否已处理列表——多数 modern reset 会清掉padding-left，但不一定清margin - 别只写
padding: 0：它会同时清掉上下 padding，而列表真正需要归零的是左内边距
list-style-type 设哪些值才真正跨浏览器兼容？
list-style-type 看似简单，但部分值在旧版 Safari、IE 或某些安卓 WebView 中不渲染：
- 安全可用的值（所有主流浏览器支持）：
disc、circle、square（ul）decimal、lower-alpha、upper-alpha、lower-roman、upper-roman（ol） - 少用或避免的值：
none没问题，但注意它只隐藏标记，不移除缩进（得配合padding-left: 0）decimal-leading-zero、armenian、georgian在 iOS 15 之前 Safari 不支持 - 如果要自定义符号（比如箭头、图标），别依赖
list-style-type，改用::marker或背景图 +list-style: none
怎么让列表项垂直间距一致又不破坏语义？
用 margin-bottom 给 li 加间距最直接，但容易踩两个坑：
- 最后一项多出多余空白：用
li:not(:last-child)限定，或者给ul/ol设margin-bottom: -Xpx抵消（不推荐） - 行高与间距混在一起导致视觉错位：优先用
gap（现代方案）ul, ol { display: flex; flex-direction: column; gap: 0.75em; }注意：gap在 Flex 容器中对li有效，但会破坏ul的块级流行为（比如嵌套列表可能错位），生产环境建议仍用margin+:not(:last-child)
自定义符号时 background-image 和 ::marker 哪个更可控？
::marker 能直接改颜色、字体、内容，但支持度有限（Chrome 89+、Firefox 89+、Safari 15.4+）；background-image 兼容性好，但需手动调位置、尺寸、对齐：
立即学习“前端免费学习笔记（深入）”；
- 用
::marker（推荐新项目）：li::marker { content: "→ "; color: #3b82f6; }注意：content里不能写 HTML 实体以外的复杂结构，也不能设宽高 - 用
background-image（保底方案）：li { list-style: none; padding-left: 24px; background: url("arrow.svg") no-repeat left center / 12px; }关键点：必须设padding-left留出图标空间，且background-position用left center才能随行高自动居中
列表样式真正难的不是“怎么加效果”，而是“怎么在清掉默认样式后，让缩进、间距、符号对齐、响应式表现全部稳定”。尤其是混合使用 ul、ol、嵌套列表时，padding-left 和 margin 的叠加关系很容易漏掉一层。
