CSS Common Tips

撰写时间：2025-03-15

修订时间：2025-03-15

这里集中列出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值都得到了有效应用。

参考资源

CSS Backgrounds and Borders Module Level 3