随笔分类 - Stylus、CSS和HTML
摘要：要实现效果如下：尾部带查看详情，前面有三个点省略号。之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，然后 append 上三个点和查看详情。vue-clamp 就是这么做的，包括很多博客也是这么讲的，但是讲真，如果是个列表，这种不断的判断，肯定
阅读全文
摘要：CSS3 线性渐变（linear-gradient）我们比较熟悉，但是有没有了解过重复线性渐变（repeating-linear-gradient）呢？ 一、重复线性渐变介绍 repeating-linear-gradient()函数创建一个由重复线性渐变组成的 。它类似于linear-gradie
阅读全文
摘要：一、CSS shapes 布局 shapes 表示形状，CSS Shapes 布局可以实现不规则形状的文字环绕效果，需要和浮动配合使用。 CSS shapes 布局相关属性并不多，主要是这 3 个属性：shape-outside、shape-margin、shape-image-threshold
阅读全文
摘要：长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。因此我们会经常采用时间分片、虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者c
阅读全文
摘要：一、css 样式覆盖实现 1、核心：通过切换 CSS 选择器的方式实现主题样式的切换 在组件中保留不变的样式，将需要变化的样式进行抽离 提供多种样式，给不同的主题定义一个对应的 CSS 选择器 根据不同主题设置不同的样式 2、如何实现： （1）通过 vuex 存储和控制全局的主题色； （2）在 te
阅读全文
浅析CSS中过渡transition学习：animation与transition的区别、过渡的4个属性及简写模式、过渡触发方式、过渡渐变（需绝对值）、如何使用硬件加速、过渡时间函数、过渡结束回调事件
摘要：一、过渡（transition） CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。这个定义有种熟悉的感觉，它仿佛和animation非常相似，那么他们实际上有何区别呢？ 1、CSS animation 与 CSS transition 的区别 （1）元素指定Transiton时，那么当其某个属
阅读全文
摘要：在用户界面中使用图片和动画已经成为现代网络应用的一个普遍现象。尽管这些现代设计的重点是改善你的应用程序的用户体验，但如果这些图像对所有设备都没有响应，事情就会变得适得其反。作为开发者，我们必须满足所有这些要求。但大多数时候，我们错过了一些小东西，而这些小东西可以带来巨大的差异，因为我们正在寻找更高层
阅读全文
摘要：一、问题背景 1、bug 描述 某日被告知有一个bug：在网页宽度较小时，发现 Flex 容器被子元素撑大导致UI显示异常的问题，如下 这是什么鬼...我期待它不管什么时候都能像下面这样显示（不撑破父容器），就如这样： 2、问题解决： 我试了试，发现给 flex-item 容器加个overflow:
阅读全文
摘要：官方描述：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin 一、crossOrigin属性总结 使用步骤： 1、在html标签中加了crossorigin=“anonymous”属性（如在img标签加了该
阅读全文
摘要：本篇文章翻译自adobe Web Platform Team的博客：CSS animations and transitions performance: looking inside the browser，虽然是一篇旧文，但是里面谈到的知识点很有用，对CSS的性能优化有很大帮助。 在这篇文章中，
阅读全文
摘要：在网上看到一个这样的问题： transform与position:absolute 有什么区别？查阅资料后发现这道题目其实不简单，涉及到重排、重绘、硬件加速等网页优化的知识。 一、问题背景 过去几年，我们常常会听说硬件加速给移动端带来了巨大的体验提升，但是即使对于很多经验丰富的开发者来说，恐怕对其背
阅读全文
摘要：今天遇到一个现象，设置了 position:fixed; 但是发现其行为却随文档流滚动，而不是相对于 viewport 固定在某处，所以查了一下，发现是个知识点。 一、现象背景 我理解的fixed元素是这样的：摘自 CSS布局基础 固定定位与absolute定位类型类似，但它的相对移动的坐标是视图（
阅读全文
摘要：一、瀑布流 瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布
阅读全文
摘要：一、基本实现原理 最常见的 textarea，默认是可以拉伸的。textarea 我们可以随便拉伸，那么要实现任意元素都有这个效果怎么办呢？ 需要借助 resize 特性，可以天然的实现元素拉伸特性。普通的元素要实现这样的效果也很容易，只需要在 overflow 不是 visible 的情况下，添加
阅读全文
摘要：当一个元素不设置height时，它的默认值是 auto，浏览器会计算出实际的高度。宽度类似。 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时，该怎么办呢？ 从 MDN 的描述可以查到 CSS 支持动画的属性中的 height 属性如下： height ：yes, as
阅读全文
摘要：一、atom-style CSS思想 最近看到GitHub新版首页的源代码，GitHub的部分页面使用到了 atom-style CSS，比如： <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1
阅读全文
摘要：CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。说实话属性选择器，平时用的不多，但是使用起来还是极为方便的。 1、简单属性选择 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。 // 如果您希望把包含标题（title）的所有元素变为红色，可以写
阅读全文
摘要：本文主要讲解如何使用 CSS 控制打印样式。 一、基本概念 使用 CSS 可以控制文档如何正确的显示在不同的媒介 (Media) 上。其中分页媒介 (Paged Media) ，不同于连续媒介 (Continuous Media)，它可以控制文档内容，将其分隔至一个或多个不相关联的页面 (如：书、幻
阅读全文
摘要：一、如何给 css 加上模块的功能呢？ 我们知道，浏览器里的 JS 之前没有模块的概念，都是通过不同的全局变量（命名空间）来隔离，后来出现了 AMD、CMD、CommonJS、ESM 等规范。 通过这些模块规范组织的 JS 代码经过编译打包之后，运行时依然会有模块级别的作用域隔离（通过函数作用域来实
阅读全文
摘要：直接想在div上监听键盘事件是不行的，但是比如input那些是可以的，为什么？等会解释 一、解决方案 如果需要在div上监听键盘事件怎么办呢？ 其实也很简单，只需要在需要监听 keydown 事件的 div 的属性中加上 tabIndex=0 即可，即： <div tabindex="0" οnke
阅读全文
