关于前端:CSS-中的简写到底有多少坑以后不敢了

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

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

这个 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: 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 呢？比方这样：

<style>
  .parent {
    width: 300px;
    height: 300px;
    border: 1px solid black;
  }
  
+ .child {
+   margin-top: 100px;
+ }
  
+ /* ... 省略几百行代码 */

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

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

预期的成果是什么样的？而此时的成果是什么样的？

能够看到，预期是想要既程度居中，又间隔顶部 100px，而当初 margin-top 被笼罩了

其实你单纯想实现程度居中齐全没必要用 margin: auto，因为你本意是不想去批改顶部和底部的间距的，只是因为你用了这个简写，不得不这么做

不然试试另一个简写？让你只解决程度的间距

<style>
  .parent {
    width: 300px;
    height: 300px;
    border: 1px solid black;
  }
  
  .child {margin-top: 100px;}
  
  /* ... 省略几百行代码 */

  .child {
    width: 100px;
    height: 100px;
    background-color: red;
-   margin: auto;  /* 程度居中 */
+   margin-inline: auto;  /* 真正的只是程度居中 */
  }
</style>

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

这样同样能实现咱们想要的成果，且不会影响 margin-top 和 margin-bottom 的属性

那同理，有没有能只影响竖直方向的 margin 的简写呢？当然有，那就是 margin-block

一起来看另一个例子🌰

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

    .child {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: red;
    }
</style>

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

成果如下：

这是一种对于非绝对定位的垂直程度居中办法（记好了，面试官问你垂直程度居中的办法又多了一个 ），我是从 HTML 原生的 <dialog/> 标签中理解到的（之前在 12 个可能你没见过，但十分实用的 HTML 标签介绍过 <dialog/> 标签）

为什么要用这个例子呢，我就是想引申出这个知识点，跟大家分享一下我最近看到的小 tips

咱们能够删除 margin: auto，用上后面说的 margin-inline: auto 和 margin-block: auto

论断：margin 的简写不如 background 那么简单，但应用上了 margin-inline 和 margin-block 也能够给本人升高心智累赘

下面说了那么多简写带来的隐患，要不再来说说简写带来的益处？

还是举个例子🌰

<style>
  .parent {
    position: relative;
    border: 3px solid blue;
    margin: 200px;
    width: 300px;
    height: 300px;
  }

  .child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
  }
</style>

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

这段代码大家应该都很相熟，咱们给 .child 元素设置成了相对定位，并赋予了以下属性：

top: 0;
bottom: 0;
left: 0;
right: 0;

而后元素就撑满父元素了，达到了 width: 100% + height: 100% 的成果，那为啥不间接设置宽高都 100% 呢？只用设置两个属性

❌❌❌ 不这么做的起因还是要回到 position 自身，当一个元素脱离文档流时，若未设置 top、bottom、left、right，默认元素停留的地位就是其未脱离文档流时的地位

可能有点绕，间接上张图

能够看到，零一这个元素在脱离文档流后，依然是停留在它处于文档流时的地位，那此时如果给他设置宽高 100% 会是什么样呢？

丑陋，超出父元素了，尽管解决这个问题也很简略，间接加一个 left: 0 即可但咱们还有更简略的办法，那就是用 inset 这个属性

其实 inset 就是 top、right、bottom、left 的简写，不晓得为什么，我看过很多人的代码，都没用过这个属性，所以也给大家安利一下

语法跟 margin 相似，因而咱们用它来简化方才的代码

<style>
  .parent {
    position: relative;
    border: 3px solid blue;
    margin: 200px;
    width: 300px;
    height: 300px;
  }

  .child {
    position: absolute;
-   top: 0;
-   bottom: 0;
-   left: 0;
-   right: 0;
+   inset: 0;
    background-color: red;
  }
</style>

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

这里为什么我又举荐大家用 inset 了呢？实质是因为此处咱们的确是须要同时设置上下左右四个值的，那为何不必 inset 呢？

😖 天呐，受不了了！怎么全是平时罕用到的属性，有这么多坑吗？

其实 border 这个还好，还是倡议用简写的哈，只不过有一个非凡的 case，想给大家分享一下，防止踩坑

有这样一个场景：一个元素自身没有边框，当鼠标移入时呈现边框，边框从有到无要有过渡动画；同时鼠标移除，边框隐没，也随同有过渡动画

<style>
  .demo {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: none;
    box-sizing: border-box;
    transition: border 1s linear;
  }

  .demo:hover {border: 4px solid red}
</style>

<div class="demo"/>

大部分人都会这么写对不对？成果如何呢？惋惜只胜利了一半！

为什么鼠标移出时，border 的过渡动画隐没了？

图中能够看到，border: none 其实就是把 border-style 设置成了 none，大家都晓得 transition 对于 border 的过渡动画其实是针对 border-color 和 border-width 的，但如果 border-style 都没有，那还怎么看失去过渡动画呢？

所以咱们想要实现鼠标移出时的过渡动画，就不能用 border: none 这个简写了，那该怎么办？

我想到了一个思路，可能不是最完满的，但基本看不出瑕疵，大家能够借鉴一下：

将元素的 border 初始状态设置为 border: 0px solid transparent，这样既保证了 border-style 的存在，又能保障边框会从 4px 过渡到 0px，色彩也从 有 过渡到 无

成果如下：

对于 「咱们到底该如何应用简写？」 这个问题，我认为：须要一次性设置简写属性中全副或绝大部分属性时，能够应用简写 ；反之，则 不太应该应用简写

我是零一，分享技术，不止前端！

心愿本文对你有所帮忙，我在用心写文章，心愿大家不要悭吝本人的赞👍

若有疑难或者倡议，欢送评论区留言，一起相互交换探讨，共同进步！

background

margin

inset

border

总结