支持简写的主流属性有margin、padding、border、background、font、transition;display、position、z-index等单值属性无简写形式;简写会隐式重置未声明的子属性,局部调整或协作场景宜用全写。
哪些 CSS 属性支持简写,哪些不能硬凑
不是所有属性都能简写,强行合并反而让代码更难维护。
、
、
、
、
、
这几类是主流支持简写的,但像
、
、
这类单值控制型属性,压根没有简写形式——别搜“
简写”了,不存在。
简写会重置所有子属性(比如漏写
,它就变透明,可能盖不住下层内容)
必须按固定顺序:
,错一个位置,整个声明会被浏览器忽略
简写(如
)会同时覆盖
、
等,想单独调某一边?得回退用全写
简写后哪些值会被隐式重置
这是最常踩的坑:简写不是“追加”,而是“整套替换”。比如你原本写了
,再加一句
,结果
就没了,变成
。
简写不带颜色 →
变
简写不写
→ 默认为
,哪怕之前设过
简写只写
→ 其他可过渡属性(如
)的过渡效果全部失效
什么时候该坚持用全写
当需要局部调整、多人协作、或未来大概率要拆开维护时,全写比简写更安全。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
组件级 CSS(如 Button、Card)里,
常要微调上下左右,用
比
更直观
响应式场景中,
里只改一个方向的
,全写避免重复声明整套值
用 CSS 自定义属性时,
配合
比塞进四值简写里更易追踪
工具链对简写的实际影响
PostCSS 插件(如
)会自动把全写转简写,但它们识别逻辑有限——遇到自定义属性、CSS-in-JS 字符串拼接、或注释分隔的写法,容易漏判或误判。
立即学习
“
前端免费学习笔记(深入)
”;
Webpack/Vite 默认不处理 CSS 简写,靠插件;没配插件时,你写的简写就是最终输出
VS Code 的 CSS 提示对简写支持不一:
能提示完整语法,但
的多段写法(
)常被标黄,其实合法
压缩工具(如
css
nano)默认启用简写合并,但若你已在源码里混用简写/全写,压缩后可能意外覆盖某些值
CSS 简写的边界很窄:它省的是键盘敲击,不是理解成本。真正影响可读性的,从来不是行数多少,而是“改一处,是否清楚知道哪几处会连带变化”。
marginpaddingborderbackgroundfonttransitiondisplaypositionz-indexdisplaybackgroundbackground-colorfontfont-style font-variant font-weight font-size/line-height font-familyborderborder: 1px solid #000border-topborder-rightbackground-color: #fffbackground: url(img.png)background-colortransparentbackgroundbackground-colortransparentfontfont-weightnormalboldtransitiontransition: opacity 0.3stransformpaddingpadding-toppadding: 8px 12px 6px 12px@mediamargin--spacing-xs: 4pxmargin-left: var(--spacing-xs)postcss-merge-longhandbackgroundtransitiontransition: width 0.2s, opacity 0.3s