CSS

需求描述 前段时间，工作中笔者接到了一个有意思的需求 就是给图片做特定的交互效果 图片中有几个特殊区域 当用户hover特殊区域的时候，高亮 点击特殊区域的时候，弹框给到一些提示信息 效果图和线上演示

常见的四种方式的高度过渡 目前常见的高度过渡的方式有四种 transition + height transition + max-height transition + tranform:scale

马赛克效果图 方式一 使用base64背景图 方式二 使用渐变背景图 完整代码 el-tree图标修改效果图 方式一 js修改指定dom的innerHTML 方式二 css隐藏+伪元素 方式三 css

需求描述 公司首页网站上，要加一个漂浮公告功能 就是一个醒目的盒子在来回漂浮 遇到边界再碰撞一下 就是重要信息的提醒 如下效果图 代码实现——requestAnimationFrame方式 建议复制粘

问题描述 有一个老项目，项目中用到了sass作为css预处理器 当需要穿透修改（子）组件的样式的时候 发现不能识别/deep/的语法，换成::v-deep也不行 报错截图举栗子如下： 解决方案 既然s

需求 页面分为顶部、内容区、底部（bottom） 内容区垂直滚动 当内容区内容少时，bottom在页面最底部（类似固定定位） 当内容区内容多时，bottom跟在内容区后方（要滚动到底才能看到botto

需求描述 页面中有一个图片，页面宽度变小（比如打开控制台，拖动边栏），图片宽高，要随之等比例自适应缩放，如下效果图 效果图 实现方案 方案一：使用宽度百分比和vw 方案二：宽度百分比加高度被paddi

问题描述 网上的帖子大多数是：判断一个元素是否在可视区域中 而帖子中举的例子，也是以浏览器最外层body/html的滚动条为例子，进行讲解，基本上都是如下的效果图： 实际上，我们页面的滚动条，有时，并

问题描述 我们有这样的需求，大容器中有很多的盒子，从左往右排列，空间不够的话，然后换行，继续从左往右排列，如下效果图 看到这样的需求，我们第一时间想到的就是弹性盒布局，给大容器开启弹性盒、允许换行，两

本文正在参加「金石计划 . 瓜分6万现金大奖」 使用方式 看名称效果图，有没有和自己想要的效果类似的 有的话，复制粘贴代码使用 也可以自己修改一下 css效果并不是特别难，只是有时候我们可能想不到 注

问题描述 有时候为了项目的美观程度，我们需要使用一些好看的字体，进行文字的优化。但是，一个字体文件一般都好几MB，文件太大，打包放到生产环境，很显然会浪费流量带宽，导致网站请求时间加长，这个肯定是不行

问题描述 前两天公司产品提出了一个奇葩需求，就是要把表格左上角的全选/全不选复选框给藏起来，用户想要勾选数据，只能一条条的勾选；想要取消勾选，只能一条条的取消勾选。黑人问号？？？好吧，既然产品大佬发话

什么是媒体查询 我们知道，我们给网页HTML写样式用的主要是CSS（层叠样式表）语言的规则，比如：盒模型设置宽高背景色什么的。 目前我们使用的最新版本的层叠样式表主要是CSS第三版，也就是CSS3，C

问题描述 我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的，选中以后可以右击出现面板然后去复制什么的。但是有的时候，这种效果我们并不想要的，比如用户点快了的时候，

css预编译器less的用法、css预编译器less的用法、css预编译器less的用法、css预编译器less的用法...

问题描述什么是sticky footer布局通俗来说，就是在网页中有一篇文章，文章可长可短，如果文章比较长，就在文章结束的地方，放置一个点赞按钮。如果文章比较短，就在页面的底部放置一个点赞按钮...

固定定位相对于视口定位，如果上方有一个div元素，开启固定定位以后，这个div就会脱离文档流（“漂浮走了”），那么原来的这个div所占据的位置，就会空出来，就会导致下方的div元素蹿升上来。就会导致布局的紊乱。解决方式其实很简单，再加一个div占据住 开启固定定位的元素的位置。…

谷歌浏览器自带的滚动条的样式，不太好看。所以有时候可能要修改一下其样式。本文以vue的项目为例，针对于使用webkit内核的浏览器，其对应浏览器滚动条的样式控制都有效。

前天开发中遇到一个小问题，就是连续输入许多数字发现不换行，会一直横向超出盒子的宽度。但是如果是输入连续汉字就会自动换行。后来试了试连续输入英文也是不会自动换行。后来经过一番研究将细节总结一下： 程序员其实就是记住前人设定的规则，并使用前人设定的规则。具体为什么会这样，全当做规则…