美烦资源网

这几天刚开始写一个Vue项目，遇到了一个定位问题，觉得挺有意思的，这里分享给大家。

其实就是一个首页顶部固定的问题，一提到顶部固定，相信大家都第一反应是想到了

position:fixed;

下面来看一下这个页面

我们学习 CSS 背景属性。

假设这里有个 div 容器，宽 400，高 300，默认情况下，这个 div 是没有背景的，或者说它的背景是透明的，我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下，背景是透明的。

我们每天都在网上摸鱼，作为前端开发人员，网站上微妙的细节变化通过比别人会更关注。我一直注意到的一件事是网站上的动画的流畅性。动画对于用户体验来说是非常好的，有时我们可以一些有趣的动画来留住用户。

前端小伙伴们还搞不清楚css overflow的属性的各种用法吗？今天这篇文章总结了几种情况，一起来看下吧。

CSS中的overflow属性用于控制当内容溢出元素框时的行为。它有以下几个值，每个值都有其特定的用途和效果：

1. visible: 默认值。内容不会被剪裁，会呈现在元素框之外。

本篇将介绍几个css小技巧，目录如下：

1. 自定义引用标签的符号
2. 重置所有标签样式
3. 禁止文本选择
4. 制作小三角形

在实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形，那么这些如何用css来实现呢？

例1

例2

例3

原理：

仔细想想，原理非常简单，利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻border会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜色设置为transparent表示边框透明，而将右边框颜色再设置为红色就发现三角形出现了，其实这个三角形是你设置颜色的边框。

css知识点回顾

1.嵌入css代码的四种方式:

1).内嵌模式:

<a style = "width:80px;height:90px;" href = "http://www.baidu.com/" target = "_blank">百度</a>

2).内部样式

<style>

CSS的position属性用于指定元素在文档流中的定位方式，position属性和top、bottom、left、right属性一起决定元素的最终位置。position属性拥有static、relative、absolute、fixed、sticky五个可选项，下面动画展示了一个吸顶导航菜单的样式，当向上滚动页面时导航菜单始终黏在顶部位置，使用sticky属性可以轻松实现这个效果。

最近接了个项目，PM 又来催：“登录弹窗能不能加点透明毛玻璃效果？活动标题再做点酷炫的渐变？对了，用户的反馈框能不能调整大小？”听完这要求，我脑袋直接嗡了：又想炫酷，又不想加班，这不扯嘛！

正当我愁得要改 JS 的时候，隔壁老王一脸淡定：“兄弟，这些 CSS 技巧轻轻松松搞定，少写代码，效果还好。”于是，我抱着试一试的态度研究了一波，才发现 CSS 的隐藏技能简直是“救命稻草”！今天就把这些技巧整理分享给大家，让你应对需求时不用慌，写出既高效又美观的代码！