CSS解析——简写属性

在日常开发中可能会遇到简写属性，例如：

font: 32px sans-serif;

有小伙伴就会想，这不就是个简单的缩写吗？完全不需要拿出来讲解吧？

其实我想讲的是一个小细节：简写属性如果不把属性设置完全，仍然会设置省略的值，即它们会被隐式地置为初始值。这会默默覆盖在其他地方定义的样式。我们看个例子：

从上图中我们看到，h1标签被显式地设置了font-weight: bold，即字体加粗了，然后在类title中使用简写属性font设置了字体的大小和字体，但是没有设置font-weight，从页面上依然可以看到，bold被覆盖了。

上图中的简写属性等价于：

.title {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    line-height: normal;
    font-size: 32px;
    font-family: sans-serif;
}

另外，关于padding和box-shadow的属性设置，也有需要关注的地方。padding的值有四个方向，按顺序分别是：上、右、下、左，也就是先垂直、后水平。然而，在box-shadow中，却正好相反。比如box-shadow：10px 2px就是定义了阴影在水平方向和垂直方向的距离分别是10px、2px。是不是违反了直觉？

简单说，造成这个的原因是：这两个值代表了一个笛卡尔网格。笛卡尔网格的测量值一般是按照x（水平），y（垂直）的顺序来的。

“上、右、下、左/垂直、水平”的方式只适用于给盒子设置四个方向的值的属性。

剩下的box-shadow、background-position、text-shadow等都是遵循水平、垂直这种顺序。