CSS Common Tips

撰写时间：2025-03-15

修订时间：2025-12-08

这里集中列出CSS一些通用技巧。

显示盒模型

:root { --margin-value: 1em; --border-width: 1em; --padding-value: 1em; } div#child { margin: var(--margin-value); padding: var(--padding-value); border: var(--border-width) solid hsl(0, 50%, 50%, 70%); box-shadow: 0 0 0 var(--margin-value) hsl(from green h 40% 40%); background-image: linear-gradient(#222, #8888); background-repeat: no-repeat; background-origin: content-box; color: #ccc; } div#container { background: hsl(220, 50%, 50%, 30%); } p { margin: 1em; padding: 0; border: 1px solid gray; }

Some texts.

从外到内，margin区域使用阴影绘制，border区域直接绘制，padding区域通过父容器绘制，content区域使用渐变的背景图像来绘制。

修改3个变量值，可直观看到各个区域的不同变化。

分别修改div及p的margin属性值，可清晰地看到，当两个相邻的块级标签设置了不同的margin属性值时，按以下规则设置这两者的值：

若第1个标签的margin属性值大于或等于第2个标签的margin值，保留第1个标签的margin值，第2个标签的margin值设为0；
若第1个标签的margin属性值小于第2个标签的margin值，保留第1个标签的margin值，将第2个标签的margin值减去第1个标签的margin值，以此结果设置为第2个标签的margin值。

此特性称为margin值塌陷。这样，无论从第1个标签还是从第2个标签的角度来看，它们所设定的margin值都得到了有效应用。

重置特定选择器的所有属性值

可在特定选择器上设置all的值，以清除其原有的设置或因继承而生效的属性值。

.dark body { color: rgb(155, 230, 155); background-color: rgb(17, 77, 77); } .dark p { all: initial; }

A Paragraph.

initial将阻隔继承，且重置所有属性值，包括作者、用户、甚至是浏览器代理所设置的默认值。这在我们设置自己的组件、且希望该组件不受外界的CSS设置的影响时非常有用。

all的值有：initial, inherit, unset, revert，共4种。

具体详见CSS Cascading and Inheritance Level 4: Resetting All Properties: the all property。

参考资源

CSS Backgrounds and Borders Module Level 3