[ 基础系列 ] - CSS 小测 13本篇是张鑫旭老师的 CSS 基础测试15 的阅后笔记。参考我知道你不知道的负M

系列文章

说在前面

本篇是张鑫旭老师的 CSS 基础测试15 的阅后笔记。

老规矩，先上题目：

分析

要实现题目中的效果，核心有三点：

布局
边线
图标

布局

看到这个布局，并且没有兼容性要求，那么第一反应应该是 grid —— 事实上，通过 grid 布局，两行核心代码就可以实现此布局效果：

.nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

效果如下：

实现了基本的布局效果，在根据题目微调一下：

:root {
  --primaryBgColor: #524940;
  --primaryTextColor: #e9e3e1;
}

.nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  color: var(--primaryBgColor);
  background-color: currentColor;
  overflow: hidden;
}

.nav-item {
  text-align: center;
  color: var(--primaryTextColor);
  padding: 30px 15px;
  text-decoration: none;
}

效果如下：

边线

实现边线的时候，需要注意以下两点：

缺角
只有内侧有边线

要实现缺角，我们可以伪元素：

伪元素画边线
本体通过 border-radius + overflow: hidden 实现缺角

具体实现如下：

.nav-item {
  position: relative;
  text-align: center;
  color: var(--primaryTextColor);
  padding: 30px 15px;
  text-decoration: none;
  border-radius: 15px;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 1px;
  right: 1px;
  bottom: 1px;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--primaryTextColor);
}

效果如下：

那么接下来的问题是，如何去掉外部的边线和内部重合的边线呢？

参考我知道你不知道的负Margin，我们知道，可以通过 margin 负值实现边框去重 —— 总地来说，就是当 margin-top、left 为负值的时候与参考线的距离减少，当 margin-right、bottom 为负值的时候参考线就向左、上面移动。

.nav-item {
  margin: -1px;
}

效果如下：

到这里，已经实现了外边线的去处，但由于各自都有 margin: -1px 所以导致内边线错开了，显然这里已经不能再通过修改 margin 的方式来去处内边线多余的部分，这里，grid 提供的一个属性就能很好的解决这个问题：

.nav-list {
  grid-gap: 1px;
}

效果如下：

图标

事实上，图标的实现方案很多，这里介绍一下 XboxYan 让我眼前一亮的 html 自定义元素的方法。关于什么是 html 自定义元素，可以看看阮老师的这篇文章HTML 自定义元素教程。

这里我们来看看 XboxYan 同学的代码：

<css-icon class="nav-item-icon icon-mail"></css-icon>

<style>
css-icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  font-size: 20px;
  box-sizing: border-box;
  text-indent: -9999px;
  vertical-align: middle;
  position: relative;
}
  
css-icon::before,
css-icon::after {
  content: '';
  box-sizing: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

通过这样的写法，就可以写出语义性非常好的 HTML 代码，非常值得学习。

结束语

参考

demo

demo