一波~总结总结

目录

平滑的回到顶部效果

使用hover选择父元素产生效果

媒体查询实现自适应

隐藏元素的几种方式以及他们的区别

css实现切角

---

今天考核了22级前端们，我也学到了不少的东西。自己大一的时候都没用过，相同的效果不同的实现方式就很不错，咱就是说在这总结一波~

• 平滑的回到顶部效果

css平滑滚动_css丝滑滚动_年年有鱼@的博客-优快云博客

此处放上学长推荐博客，非常全面（包含css，原生js，jq等方法）

• 使用hover选择父元素产生效果

• 父对子

    #a:hover #b {
        background-color: blue;
    }

• 子对父

    #a:has(#c:hover) {
        height: 700px;
    }

• 对该元素同级往后的元素

    #b:hover + #c {
        background-color: greenyellow;
    }
//或者
    #b:hover ~ #c {
        background-color: greenyellow;
    }

• 媒体查询实现自适应

这个查看菜鸟教程的用法就可以

CSS3 多媒体查询 | 菜鸟教程

• 隐藏元素的几种方式以及他们的区别

不查不知道，实现的方法原来那么多，我就知道其中的两三种，补充补充，还是附上一个链接

css隐藏元素的9种方法 - 掘金

其中包含隐藏之后元素占不占位的问题，学到了学到了！

• css实现切角

这个实现的方式很多，像是多个盒子拼起来组成，最简单的还是这个属性，之前俺也是不知道的

详细内容看这篇文章就够了

【css】实现切角_css实现切角_richest_qi的博客-优快云博客