CSS 中的简写到底有多少坑？以后不敢了...

点击上方 前端阳光，关注公众号

回复加群，加入技术交流群交流群

大家好，我是阳光，简写（语法糖）可能给我们编码带来了很多便利，但简写也会带来一些问题，今天来讨论一下 CSS 中的简写的"爱恨情仇"

为什么说是爱恨情仇呢？因为简写给我们带来了很多的便利，但凡事都有好有坏，你不能说简写一点坏处都没有。所以我们就聊聊简写的 "好" 和 "坏"

background

这个 CSS 属性大家肯定是再熟悉不过了，给元素设置背景色

是这样？

.demo {
  background: #333;
}

还是这样？

.demo {
  background-color: #333;
}

应该都有吧，换作我自己，平常这两者用哪个好像也是看心情，如果你说肯定用前者啊，因为前者就一个单词，那其实后者也不麻烦，现在大家都用编辑器，在智能提示的辅佐下输入 bgc 再按回车就能打出 background: ; 了，其实也不麻烦

回到正题，其实这两者写法我更推荐后者，为什么？来看个例子🌰

<style>
  .demo {
    background: #333;  /* 给元素设置了背景色#333 */
  }
  
  /* ... 中间隔了很多样式代码 */

  .demo:hover {
    background: url("example.png"); 
  }
style>

<div class="demo"/>

这个场景很简单：鼠标移到元素上就展示某张照片，未加载前用一个纯色占位

然而实际效果是？

为了效果明显，我加了边框、文字，网速调成 slow 3G

可以看到 hover 时的 background 覆盖掉了前者的 background，使得效果差强人意

是因为前者和后者都是 background，所以后者自然会覆盖前者吗？不全是

即便我们前者用的 background-color: #333;，也仍然会被后者覆盖

大家都知道 background 是一个语法糖，即很多属性的简写 👇

那像例子中用 background: url('example.png')时，做了什么呢？

如上图所示，它默认把所有值都设置成了 initial，因此无论之前用到了其中哪个值都会被覆盖，虽然 initial 设置了跟没设置是一样，都表示保持元素该属性的初始值

会不会有人想说：我一直都这么用的，都没遇到啥问题啊！

我只想说一句：可能运气比较好，等代码比较复杂了，你可能会回来补这个窟窿的

结论：这就是一个简写造成的隐患，大家能避免则避免

margin

又提了一个大家再熟悉不过的属性 margin，这里面又有啥坑呢？没啥坑，就是想介绍一下其它用法

以下都是它的简写：

• margin: 10px 20px 30px 40px
• margin: 10px 20px 30px
• margin: 10px

这些简写确实帮我们省去了不少的代码量

让我们投身到一个例子🌰中：现在我想让我的元素水平居中，我想用 margin 来实现

<style>
  .parent {
    width: 300px;
    height: 300px;
    border: 1px solid black;
  }

  .child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: auto;  /* 水平居中 */
  }
style>

<div class="parent">
  <div class="child"/>
div>

效果如你所愿：

但你使用 margin: auto 时有没有那么一瞬间想过，前面是否设置过 margin-top 或 margin-bottom 呢？比如这样：