用标签加style设背景色会铺满整行且换行连续，因其是块级元素，背景作用于整个盒模型；推荐十六进制如#ffeb3b，需同步设置文字颜色与边距确保可读性和布局稳定。
直接用 <p></p> 标签加 style 属性就能实现，但要注意背景色会撑满整行、文字换行后背景连续——这不是 bug，是 CSS 默认行为。
为什么 <p style="background-color: #ffeb3b"></p> 会让整段文字都带背景？
因为 <p></p> 是块级元素，background-color 作用于它的整个盒模型（包括 padding 和 content 区域），只要文字没被其他内联元素包裹，背景就会横向铺满容器宽度。这在语义正确（比如整段引用）时反而是优点。
- 适合场景：整段引文、提示框、强调段落
- 不适合场景：只高亮其中几个词（该用
<span></span>） - 若想限制宽度，得额外加
max-width或用display: inline-block
background-color 值写什么才稳妥？
别只写 yellow 这类英文名——浏览器解析一致但色值不精确；也别默认用 rgb(255, 235, 59) 这种冗长写法。推荐优先使用：
-
#ffeb3b（十六进制，简短、通用、无兼容性问题） -
hsl(48, 100%, 62%)（调色直观，适合主题系统中微调亮度/饱和度） - 避免用
rgba()给<p></p>设背景——半透明叠加父容器背景可能造成阅读困难，除非你明确控制了父级background
常见翻车点：文字看不清、背景溢出、移动端错位
加了背景色后文字发虚、边距异常、或在手机上背景突然变窄？多半是以下原因：
- 没设
color：背景黄了，文字还用默认黑，对比度不足 → 补上color: #333或color: #1a1a1a - 没清空默认
margin：<p></p>自带上下边距，导致背景“断开” → 加margin: 0.5em 0显式控制 - 父容器有
overflow: hidden或flex布局挤压了<p></p>宽度 → 检查开发者工具里 computed styles 中的width和box-sizing
最简可用示例：
<p style="background-color: #ffeb3b; color: #333; margin: 0.75em 0; padding: 0.5em 1em;">这是带淡黄色背景的引用文字，左右有内边距，文字颜色加深确保可读</p>记住：背景色不是装饰开关，它直接影响可访问性与排版节奏——哪怕只改一行
style，也要同步检查文字对比度和容器行为。
