/（正斜杠）在css样式声明中[重复]答案

【问题标题】：/ (forward slash) in css style declarations [duplicate]/（正斜杠）在css样式声明中[重复]
【发布时间】：2012-11-05 04:39:33
【问题描述】：

可能重复：
What does this CSS font shorthand syntax mean?

最近在查看苹果网站的样式时，我遇到了这个我无法理解的 CSS 规则声明：

body {
   font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
}

我无法理解，因此想知道font: 12px/18px 中的正斜杠实际上是如何工作的？

【问题讨论】：

@SvenBieder 你对谷歌有什么建议？我用谷歌搜索了“css 中的正斜杠”，这个问题首先出现在谷歌上。
@EricFrancis 虽然之前已经明确提出并回答了这个问题，但在这里更清楚地表达了这一点。 Webnet 之前的问题写得还不错。它写得很窄，因此省略了几个术语和短语，这些术语和短语使这个问题在搜索结果中排名更高——或者根本没有——。大约 2017 年的 Google 搜索证实，Peeyush 提出了这个问题，我们会做得更好。
没关系，SO的系统就是这样设计的。出于这个原因，他们不会关闭重复项，因此可以提出相同问题的不同方式可以指向正确的答案

标签： css

【解决方案1】：

简单来说就是font-size和line-height

font: 12px/18px /*12px font-size and 18px line-height*/

这是一个速记符号...在 CSS 中还有很多其他内容可供您使用，例如

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

可以简单写成

margin: 10px 20px 30px 40px
         ^----^----^----^
       Top/Right/Bottom/Left

或者说这个

border-width: 1px;
border-style:solid;
border-color: #ff0000;

可以写成

border: 1px solid #f0000;

这是一个很酷的list CSS 速记。

【讨论】：

【解决方案2】：

它是font-size: 12px; line-height: 18px 的简写。

【讨论】：

【解决方案3】：

它是设置 2 个 css 属性的捷径，其作用与以下相同：

font-size: 12px;
line-height: 18px;

【讨论】：