几个不常用的css属性对应的使用方法和场景

前言

接触前端的这些年，由于涉及业务的原因，处理的css样式无非是那么几种情况，但是以css现在的发展速度，隔一段时间就会推出一些好用的新属性，这些新属性可以用于解决原先需要js来实现的场景。可以说会用新属性的话写法方便而且效率又高。

今天说的这几个属性应该很早之前就有了，但是平时也就是了解过，这今天就来单独讲讲这几个属性的具体用法和使用场景吧。

初次阅读mdn的文档说明时，看完以后还是没有什么底，尤其是在实际需求里随意找了一个元素写上sticky和top属性后，发现实际上并没有达到预计的效果(说直白就是没有理解)。

针对这个情况，我自己尝试把文档反复读了几遍，再结合多个sticky实际例子操作了下，最后总结出了下面这几条使用心得，于是打算把它们先记录下来，方便后期再来参考学习。

首先找到sticky元素最近的一个块级父容器，且该容器的overflow只能是hiidden, scroll, auto, or overlay，除此之外，父容器的高度必须能够接受top的距离，否则不能看到定位top距离值不是0时的效果，因为此时sticky偏移的距离已经超出父容器的可使用的高度范围。
需要注意的是，top其实真正的偏移都是相对于浏览器窗口，类似于实际position为fixed定位时的状态，而不是我们理解的相对于父容器的偏移(这时其实是absolute的情况)，因此当sticky元素位置相对于浏览器窗口的值等于或小于top值时，才会触发sticky的效果。
当父容在随着滚动在浏览器窗口逐渐消失时，此时的top偏移值会直接缩小为父容器剩余可见高度值，由此推断，当父容器消失后，sticky会随着父容器消失，所以，对于想要固定位置的效果，需要确保sticky元素是最外层滚动元素的直接元素，这样能确保滚动的时候父容器始终可见，sticky的效果能一直保留。
还有一点要注意的是，同个父容器下如果存在多个sticky元素时，一般是以class类名来定位，随着滚动，最新可见的sticky元素会覆盖上一个sticky元素，这也就是mdn上面我们看到的示例效果。

页面上的a标签如果对应的href属性是和瞄点时，就是以#开头的链接，一般用于跳转定位到当前页面id属性相同的元素上，档用户点击标签触发跳转的时候，这个定位的原素变成为了target元素，这时就可以用css:target伪类来定义一些特殊样式了，例如高亮，加下划线等。

除此之外，下面要讲的一个属性也经常会配合使用。

上面讲到的瞄点定位点击时，浏览器还自带一个机制会自动将该元素进行置顶，前提是有剩余的滚动空间，一般情况下我们可以接受这种默认行为，但是当我们的页面出现了固定导航这种场景时，问题就来了，此时内容会出现在顶部导航条的下面，那这个时候该怎么解决呢？

网上有方案就是采用js监听浏览器的滚动事件，通过获取当前跳转的瞄点，定位到跳转元素的位置，再手动出去顶部导航栏的高度，最后再手动触发一次滚动操作。

这个方案因为有两次滚动，所以有时候就可以看到明显的抖动。那还有没有其他的解决方案呢？我在看了下mdn的官网的同样的业务时，注意到了他们使用了一个css属性来解决了这个问题，那就是scroll-margin-top,配合上面的:target伪类轻松搞定这个业务。

// 假设顶部需要预留的高度时90px
:target {
  scroll-margin-top: 90px
}

css虽然说写法很简单，但是有些概念理解起来还真挺抽象，只有靠平时多学习、尝试来积累经验，这样子才能够在今后遇到新的属性功能时不至于找不到头脑。