双18期|CSS揭秘之简写属性

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情。

双18期|CSS揭秘之简写属性

tips：每个技术点都值得优学优写：18期

一、写在前面

css 简写属性了解吗？前端程序员肯定是常见常用，但平时很少有这个提法，所以当被问及的时候，可能会有点蒙，但这是一个“正经”的词汇和名称，相信系统学过 CSS 的同学会对简写属性（Shorthand properties）有印象。

导读：本文将归纳 CSS 中常见的简写属性，包括它们的用法以及简写的优缺点。

①all：通用简写属性

②font：字体

③background：背景

④border：边框

⑤margin 和 padding：外边距和内边距

二、CSS常见简写属性

2.1 通用简写属性:all

CSS 提供了一个通用的简写属性 all，它可以应用于文档里所有的属性。它的目的是改变属性的继承模型。

CSS 的 shorthand（简写） 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。 它的值可以是其中任意一个(inherit, initial, unset, or revert)。 这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

inherit：设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".

initial：设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit。

unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样。

revert：目前仅被很少浏览器支持。
复制代码

例如像下面这样：例子中有两个 div，第一个 div 应用了样式选择器 div 的样式， 第二个通过 类选择器 unset-all 设置 all 为 unset，重置了几乎所有样式。

<div>
    <p>这是一段文字</p>
</div>
<div class="unset-all">
    <p>这是另一段文字，它将被充值样式</p>
</div>
复制代码

div {
    background-color: red;
    border: 2px solid green;
}

.unset-all {
    all: unset;
}
复制代码

下面是一张效果图

2.2 简写属性：font

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。

font 的语法

[ [ <'font-style'> 
|| <font-variant-css21> 
|| <'font-weight'> 
|| <'font-stretch'> ]
? <'font-size'> 
[ / <'line-height'> ]
? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar <font-variant-css21> = [ normal | small-caps ]
  
  
<'font-style'> – font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。 
<'font-variant'> – font-variant 属性是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian (en-US)等属性的简写。你也可以使用简写 font 设定font-variant在 CSS Level 2 (Revision 1) 中的值（即normal 或 small-caps）。  
<'font-weight'> –  font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。
<'font-stretch'> – font-stretch 属性为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如font-feature-settings和font-variant属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。
<'font-size'> – font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小。  
<'line-height'> – line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替换的 inline 元素，它用于计算行盒（line box）的高度。
<'font-family'> – CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
复制代码

应用举例

设置 font 非简写的写法

.text{
    font-style: oblique;
    font-weight: normal;
    font-size: 1em;
    line-height: 1.8;
    font-family: Arial, sans-serif;
}
复制代码

设置 font 简写的写法

.text{
    font: oblique normal 1em/1.8 Arial, sans-serif;
}
复制代码

2.3 简写属性：background

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性， 包括 color, image, origin 与 size, repeat 方式等等。

可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、 background-origin、background-position、background-repeat、background-size， 和 background-attachment。

① background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
可选值有：
border-box：背景延伸至边框外沿（但是在边框下层）。
padding-box：背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box：背景被裁剪至内容区（content box）外沿。
text：背景被裁剪成文字的前景色。

② background-color：设置背景色

③ background-image：设置背景图

④ background-origin：规定了指定背景图片background-image 属性的原点位置的背景相对区域。
注意：当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。
可选值有：
border-box：背景图片的摆放以 border 区域为参考; 
padding-box：背景图片的摆放以 padding 区域为参考;
content-box：背景图片的摆放以 content 区域为参考;
inherit：设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承"。

⑤ background-position：为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

⑥ background-repeat：定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，
两个轴重复，或者根本不重复。设置背景图时，这个值很关键。

⑦ background-size：设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，
或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
注意：没有被背景图片覆盖的背景区域仍然会显示用background-color属性设置的背景颜色。
此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

有趣的是，它有两个值 contain 和 cover，是的和 object-fit 的那两个值一样，表达的意义和所起的效果也一样。

⑧ background-attachment：决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。

/* 关键 属性值： scroll，fixed 和 local*/
// 此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。
background-attachment: scroll;

// 此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
background-attachment: fixed;

// 此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
background-attachment: local;

复制代码

设置 background 的非简写写法

.text {
    background-color: #3ff5e1;
    background-image: url(/bg.png);
    background-repeat: no-repeat;
    background-position: top right;
}
复制代码

设置 background 的简写写法

.text{
    background: #3ff5e1 url(/bg.png) no-repeat top right;
}
复制代码

下面是一个利用简写属性 background， 设置渐变+透明背景色的示例：

.box{
    background: linear-gradient(
            270deg,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.21) 52%,
            rgba(255, 255, 255, 0.24) 100%
    );
}
复制代码

2.4 简写属性：border

border 用于设置各种单独的边界属性的简写属性。border 可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。

语法提示：

border: <line-width> || <line-style> || <color>

line-width：边框宽度

line-styly：边框样式，具有8种值，如下：
    solid 实线
    dotted 圆点虚线
    dashed 方形虚线
    double 双实线
    groove 有雕刻效果的边框
    ridge 有浮雕效果的边框
    inset 有陷入效果的边框
    outset 有突出效果的边框

color：边框颜色
复制代码

下面是简写属性 border 的应用示例和效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 简写属性</title>
    <style>
        li{
            width: 400px;
            height: 20px;
            margin-bottom: 20px;
            border: 5px solid #42b983; /*实线*/
        }
        li:nth-of-type(2) {
            border: 5px dotted #42b983; /*圆点虚线*/
        }
        li:nth-of-type(3) {
            border: 5px dashed #42b983; /*方形虚线*/
        }
        li:nth-of-type(4) {
            border: 5px double #42b983; /*双实线*/
        }
        li:nth-of-type(5) {
            border: 5px groove #42b983; /*有雕刻效果的边框*/
        }
        li:nth-of-type(6) {
            border: 5px ridge #42b983; /*有浮雕效果的边框*/
        }
        li:nth-of-type(7) {
            border: 5px inset #42b983; /*有陷入效果的边框*/
        }
        li:nth-of-type(8) {
            border: 5px outset #42b983; /*有突出效果的边框*/
        }
    </style>
</head>
<body>
<ul class="box">
    <li>CSS 简写属性：border solid 实线</li>
    <li>CSS 简写属性：border dotted 圆点虚线</li>
    <li>CSS 简写属性：border dashed 方形虚线</li>
    <li>CSS 简写属性：border double 双实线</li>
    <li>CSS 简写属性：border groove 有雕刻效果的边框</li>
    <li>CSS 简写属性：border ridge 有浮雕效果的边框</li>
    <li>CSS 简写属性：border inset 有陷入效果的边框</li>
    <li>CSS 简写属性：border outset 有突出效果的边框</li>
</ul>
</body>
</html>

复制代码

2.5 简写属性：margin 和 padding

margin 和 padding 是最常用的两个简写属性，它们的简写规则一样，如下：

当只有一个值声明时，该值会用于所有四个值。
例如 margin: 5px，表示上下左右的外边距都是 5px。

当只有两个值声明时，第一个值用于上边距和下边距，第二个值用于左边距和右边距。
例如 margin: 5px 10px，表示上下外边距为 5px，左右外边距为 10px。

当有三个值声明时，第一个值用于上边距，第二个值用于左边距和右边距，第三个值用于下边距。
例如，padding: 5px 10px 20px，表示上内边距为 5px，左右内边距为 10px，下外边距为 20px。

当有四个值声明时，其会按顺序用于上、右、下、左边距（按顺时针）。
例如，padding: 5px 10px 15px 20px，表示上内边距为 5px，右为 10px，下为 15px，左为 20px。
复制代码

需要注意的是，行内元素的边距和宽高的特殊性。以 span 为例的行内元素的宽高边距有效性：

width：无效。height：无效。

margin：left和right有效，top和bottom无效。

padding：left和right有效，top会覆盖前面的元素，bottom会和后面的元素重叠。

三、简写的优缺点

3.1 简写的优点

简写属性是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性， Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。

例如下面这两种写法：

background 简写的写法

.text{
    background: #5B9BD5 url(/bg.png) no-repeat bottom left;
}
复制代码

background 非简写的写法

.text{
    background-color: #5B9BD5;
    background-image: url(/bg.png);
    background-repeat: no-repeat;
    background-position: bottom left;
}
复制代码

又如下面的例子：

padding 的简写写法

/*表示设置上下左右内边距为：10px*/
.text{
    padding: 10px; 
}
复制代码

padding 的非简写写法

.text{
    /*设置上下左右内边距为：10px*/
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
复制代码

上面的两个例子可以明显看出简写属性的好处：更简洁，更少的代码，更节约时间（前提是你掌握并熟悉这些写法）。事实上，css 简写属性的应用， 也是很多规范检测工具和开发工具倡导的，它们通常会通过给可以简写但没有简写的代码，给出类似波浪线的预警提示， 就像下面这样：

3.2 简写的缺点

CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。 注意是同一主题，也就是说简写是有规则的，这就意味着你需要花更多时间去记忆和熟练这些写法。

此外，简写属性语言通常不够友好，例如

语义不够友好的写法

.text{
    padding: 10px 20px 5px 15px;
}
复制代码

语义更好的写法，可以很快很容易看出上下左右的边距是多少。

.text{
    /*设置上下左右内边距为：10px，20px，5px，15px*/
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 15px;
}
复制代码

还有例如， background: #5B9BD5 url(/bg.png) no-repeat bottom left; 和 padding: 2px 5px 4px， 不熟悉简写语法的人，会有理解解读负担。也有说法说，简写属性的性能开销更大（但我认为这应该影响不大， 但是如果你只需要设置上边距，那么 padding-top 可能比 padding 更合适）。

综上，使用 CSS 简写属性的缺点有：

①学习成本更大，需要记忆简写语法。

②语义不友好，记忆理解负担更大。

③会附加可能不想要的初始值。对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值，但是这个初始值可能不是你想要的， 有时会带来麻烦，所以，当你仅是设置某一个值时，不必使用简写属性，因为那会附带一些别的初始值。

四、写在后面

①请注意浏览器兼容性，尽管大多数现代浏览器已经完全支持这些简写属性。

②简写属性没有指定的值会被设置为它的初始值，这意味着，在简写属性中没声明某个具体值，它将会覆盖之前设置的值。 例如设置了 background-color: blue;后面又设置了 background: url(/bg.png) no-repeat top right; 最后 background-color 的值会是默认值 transparent，而不是 blue。背景图并不代表背景色，那是两个属性，尽管背景图可能挡住了背景色。

③关于简写属性的值的顺序，当各个属性的值使用不同类型表示时，顺序很随便。但是当这些属性的值是相同类型的时，它们的顺序就是特定的。 例如 border: dotted 5px #42b983; 和 border: 5px dotted #42b983;是一样的效果。 但是 padding: 5px 6px; 和 padding: 6px 5px; 则是不同的意义。