CSS默认属性值速查手册

CSS所有属性都有W3C明确定义的初始值（如background-color为transparent、display为inline、position为static），但这些初始值不等于浏览器实际渲染效果——后者常被user agent样式覆盖（如button的边框源于浏览器内置规则，而非border的初始值medium none）；理解initial/inherit/unset的本质差异、区分继承性与非继承性属性、警惕all: unset等危险重置方式，并针对表单控件、滚动行为等跨浏览器敏感场景显式声明关键样式，才是精准控制布局与视觉表现的核心。

哪些CSS属性根本没默认值？

不是所有CSS属性都有“默认值”——有些属性压根不会被浏览器初始化，只在继承链上起作用。比如 color 会从父元素继承，但 background-color 没有继承性，且初始值是 transparent，不是“无”或“空”。很多人误以为没写就是“没生效”，其实是它真就渲染成透明了。

• display 的初始值是 inline，但只对原生内联元素（如 span）有效；div 这类块级元素的 display 是由 HTML 规范预设为 block，不属于 CSS 初始值范畴
• position 初始值是 static，但它不触发层叠上下文、不响应 top/left，这点常被当成“失效”去调试
• z-index 只对定位元素（position 不是 static）有意义，初始值 auto 表示“不创建新层叠上下文”，不是 0

inherit / initial / unset 三个关键字怎么选？

它们不是“重置默认值”的同义词，行为差异极大，用错会导致样式意外穿透或丢失。

• inherit 强制从父元素取值，哪怕父元素是靠 unset 回退来的，也照搬不误
• initial 回到 W3C 定义的该属性初始值，比如 margin 是 0，font-weight 是 normal，但 color 是 canvastext（取决于系统主题）
• unset 是“智能回退”：有继承性的属性等价于 inherit，否则等价于 initial；但注意它不解决浏览器默认样式（user agent stylesheet）带来的干扰

典型误用：all: unset 会清掉 display、visibility 等关键属性，导致元素不可见或布局崩溃，慎用。

浏览器默认样式（user agent stylesheet）和CSS初始值不是一回事

CSS规范定义的初始值（initial value）是语言层面的约定，而浏览器实际渲染时加了一层 user agent stylesheet —— 比如 button 的 border 默认是 2px outset，但这不是 border 属性的初始值（它的初始值是 medium none currentColor），而是浏览器硬塞的规则。

• 查初始值看 MDN 或 CSS 规范（如 CSS Backgrounds Level 3），别依赖 DevTools “Computed” 面板里显示的值
• 重置时优先用 all: initial + 显式声明关键属性，而不是依赖 * { margin: 0; padding: 0 } 这种粗暴写法
• input、textarea、select 等表单控件的默认边框/背景/字体，基本都来自 user agent 样式，appearance: none 才能真正剥离

哪些属性的初始值在不同浏览器中不一致？

绝大多数核心属性（display、margin、font-size）是统一的，但以下几类容易出偏差：

• box-sizing：初始值是 content-box，但部分旧版 Android WebView 曾返回 border-box
• text-rendering：Chrome/Safari 初始值是 auto，Firefox 是 optimizeLegibility（已废弃，但影响历史版本）
• scroll-behavior：初始值 auto，但 Safari 直到 15.4 才支持，之前忽略该声明，不报错也不生效
• accent-color：初始值 auto，但各浏览器对 auto 的解析逻辑不同（比如是否跟随系统主题色）

跨浏览器稳定的关键，是把“依赖初始值”的逻辑显式写出来，尤其是表单控件和滚动行为这类视觉敏感项。

好了，本文到此结束，带大家了解了《CSS默认属性值速查手册》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！