CSS共0篇 第4页
CSS
排序
简述 pt、rpx、px、em、rem、%、vh、vw的区别
设备物理像素 pt：屏幕宽、分辨率，其中每一小份就是1pt。 css 像素 px： pc 机大屏幕显示器，1px约等于0.76个物理像素 手机小屏幕：以IPhone6为标准，物理像素750，分辨率375 1px = 2pt。 px ...
2年前
Antd Upload组件实现拖拽排序的方法
需求 一个管理后台项目用到了Antd中的Upload组件，需求是使用picture-card类型，同时支持拖拽排序。 初期思路 因为项目本身就使用了react-sortable-hoc这个拖拽组件库，所以遵循着能用就用的原...
2年前
前端创意探索：速览「50projects50days」项目精华 – 第一部分（1-5 天）
主打：快速获取完善开发思想。 您是否在众多文章中看到过「50projects50days」项目的详细描述？垂涎三尺了？没有时间？如果您时间有限，或者只想快速领略其中的亮点，那么您来对地方了。 50proj...
2年前
BEM 规范及实战快速生成
这篇文章我将基于Yike-Design组件库的开发具体讲述BEM规范 在此基础上我将介绍在实际开发过程中运用的命名空间方法以快速生成符合BEM规范的类名 1. 什么是BEM BEM（Block, Element, Modifier）...
2年前上级包裹盒子一定会影响子盒子css中的百分比计算吗
本文整理于：(布局和包含块 - CSS：层叠样式表 | MDN (mozilla.org))。 同时加上了自己的理解，并重新组织了介绍的顺序。 一个盒子中，需要进行百分比计算时，基准并不是上一级包裹的父盒子，而...
2年前
css单标签实现转转logo
转转品牌升级后更新了全新的Logo，今天我们用纯CSS来实现转转的新Logo，为了有一定的挑战性，这里我们只使用一个标签实现，将最大化的使用CSS能力完成Logo的绘制与动画效果。 新logo保留了原本l...
2年前
微前端中的 CSS
本文为翻译 本文译者为 360 奇舞团前端开发工程师 原文标题：CSS in Micro Frontends 原文作者：Florian Rappl 原文地址：dev.to/florianrapp… 我被问得最多的问题之一是如何在微前端中处理 CS...
2年前
写给初学者的HTML和CSS编码规范
HTML配置 文件应以“”首行顶格开始，推荐使用“”。 必须申明文档的编码charset，并且使用UTF-8编码。 移动端必须使用 viewport 适配 页面title是极为重要的不可缺少的一项。 以下是一个标准的...
2年前
基于css3写出的底部导航栏效果（详细注释）
进行准备工作 这边对基本的样式进行了设置，首先在html部分设置了一个名为nav的div，推荐大家语义化来写不要学我这种，随后进行基本的默认样式的清除，并且设置盒子为ie盒子方便后续的计算，整...
2年前
JS如何判断文字被ellipsis了？
如果想要文本超出宽度后用省略号省略，只需要加上以下的css就行了。 .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 3行css搞定，但是问题来了：如果我们想要...
2年前
理解 CSS 中的 Containing Block
前言 在开始本文之前先来看一个例子，下面一段简单的 html 代码，布局很简单： <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8' /> ...
2年前
【动画进阶】有意思的 Emoji 3D 表情切换效果
最近，群里面的同学发了这么一个非常有意思是动画效果： 原效果地址 -- CodePen Demo -- Letter Hop 当然，原效果，主要使用了 GSAP 动画库以及一个 3D 文字 JavaScript 库： import { Those3DT...
2年前元素水平垂直居中都有哪些方法
前言 让一个元素水平垂直居中在实际开发中经常遇到，在面试中也基本算是必考题，下面介绍几个常用的方法。 方法一：Flex Flex 布局是目前非常常用的一种布局方式，使用它实现水平垂直居中是最常...
2年前
借助 input range 实现图片对比功能
欢迎关注我的公众号：前端侦探 之前在项目中做了一个图片对比的工具，演示如下 有一些有趣的小细节，一起看看如何实现的吧 一、布局 布局比较简单，两张图片上下重叠在一起就行了 <div class...
2年前
总结CSS 实现新手引导效果的六种方式
前言 我们在平常做业务中，在功能变更，或者有大的改动时，经常会用到新手引导功能， 虽然有很多库可以使用， 但是有时候很简单的需求，没必要引入库， 本文用最简化代码，实现一下新手引导的遮...
2年前
说一说css的font-size: 0?
平常我们说的font-size：0；就是设置字体大小为0对吧，但是它的用处不仅仅如此哦，它还可以消除子行内元素间额外多余的空白！ 问题描述？ 是否出现过当多个img标签平铺的时候，会出现几个像素的...
2年前
理解了 HSL 颜色表示法，就能实现 ColorPicker 组件
选择颜色是常见需求，想必大家都用过 ColorPicker 组件。 比如 Chrome DevTools 的这个： antd 也有 ColorPicker 组件： 其实浏览器原生也支持 color 类型的 input： 功能更强大，还支持网页颜...
2年前
什么是像素
什么是像素 如果你是一位前端开发同学的话，那么你应该听说过像素，有什么像素呢？物理像素，逻辑像素，像素比之类的概念，作为小白的我，一直有听说，但从来没有真正理解。所以这篇文章就来了...
2年前
Tailwind css 在项目中的使用与问题
Tailwind CSS 是目前获得star数量最多的css框架，less只有16.9k，sass 14.6k；而目前正好我也在学习Next.js，Next默认搭配Tailwind css，既然这样那我也就从零开始学习一下它 Tailwind CSS 是什...
2年前
使用flex实现瀑布流
前言 大家好，这里是藤原豆腐店，之前说要写一篇文章来记录瀑布流的实现，一直拖到了现在，趁下午有空，赶紧补上。 什么是瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视...
2年前