css
文章平均质量分 93
css
夏安
这个作者很懒,什么都没留下…
展开
-
CSS-in-JS 指南
任何 JavaScript 前端框架或库都可以实现 CSS-in-JS 的思想。本文使用 React——迄今为止最流行的 JavaScript 前端库——来讨论 CSS-in-JS 的应用,以及它显著的优点和缺点。原创 2023-02-13 19:05:24 · 590 阅读 · 0 评论 -
深入了解 CSS 中的 :where() 和 :is() 函数
在本文中,我们将讨论 :where() 伪类函数,并演示如何在生产环境中使用它。我们将回顾与 :where() 函数相关的叠加、优先级和安全性。我们还将研究一些特定的用例,并讨论它与 :is() 函数的异同。原创 2023-02-12 21:57:40 · 7786 阅读 · 2 评论 -
细说 rem 与 em
本文我们将介绍CSS中的rem 和 `em,理解这两个单位之间的区别对于想要创建灵活、响应迅速、易于维护和修改的网页的 web 开发人员来说是至关重要的。原创 2023-02-01 15:04:45 · 5584 阅读 · 0 评论 -
使用 CSS 创建自定义鼠标游标
作为用户和网站之间的中间人,游标既可以限制用户体验网站的方式,也可以大大增强用户体验网站的方式。在本教程中,我们将了解什么是自定义游标,并学习如何使用CSS和JavaScript创建自定义游标。原创 2022-10-24 15:20:02 · 2203 阅读 · 0 评论 -
CSS calc() 使用指南
你听说过或使用过 CSS 的 `calc()` 函数吗?也许你听说过它,但从未尝试过,或者尝试过使用它,但在使用过程中遇到了一些问题。这篇指南可以帮助你。原创 2022-10-19 13:08:54 · 7173 阅读 · 1 评论 -
手把手实现 CSS 加载动画(一)
接下来便是旋转这三个圆,最方便的做法便是将容器进行旋转,但有一个地方需要注意,我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画,我们不可能让他在角落展示吧,我们当然需要将它水平垂直居中,水平垂直居中的方式有很多,这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间(为了方便观察,我们给容器加了一个背景颜色)。好了,到现在我们已经完成了初始状态,接下来我们要为它们分别定义动画。接下来我们来绘制三个圆,首先一开始三个圆是在容器中间。,这就是动画开始时一个圆分裂成三个圆的停顿时刻;...原创 2022-08-07 13:06:50 · 4503 阅读 · 1 评论 -
深入了解 border
盒尺寸中的 4 个盒子 content box、padding box、border box 和 margin box 分别对应 CSS 中的 、、和 属性,本文我们的主角是 border box。下面我们一起看看 都有哪些精彩的特性表现。虽然同属盒模型基本成员,但是 却不支持百分比。例如,设置:是无效的,直接声明无效。这一点和 和 都不一样,下面问题来了:为什么 不支持百分比呢?顾名思义, 是“边框宽度”,我们先来看看现实世界的物体的边框,假设我们现在有两台数码设备,分别是 iMac 和 i原创 2022-06-23 21:32:24 · 872 阅读 · 0 评论 -
深入理解 padding
盒尺寸中的 4 个盒子 content box、padding box、border box 和 margin box 分别对应 CSS 中的 、、和 属性,本文我们的主角是 padding box。 指盒子的内补间。“补间”这个词比较术语化,我们不妨将其理解为快递盒子内快递商品外包裹的那层起保护作用的海绵。只是在 CSS 中,这个“海绵”默认是透明的。因为 CSS 中默认的 是 ,所以使用 会增加元素的尺寸。例如:如果不考虑其他 CSS 干扰,此时 元素所占据的宽度就应该是 120 像素(80px原创 2022-06-22 23:20:54 · 4832 阅读 · 0 评论 -
CSS 元素的显示与隐藏
使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别。下面是我总结的一些比较好的隐藏实践。此时,图片 1.jpg 是不会有请求的。标签是不支持嵌套的,因此,如果希望在标签中再放置其他不渲染的模板内容,可以试试使用元素。例如:图片 2.jpg 也是不会有请求的。另外,标签隐藏内容获取使用 ,使用。如果希望元素不可见,同时不占据空间,辅助设备无法访问,但显隐的时候可以有淡入淡出效果,则可以使用:如果希望元素不可见,不原创 2022-06-21 14:28:04 · 4349 阅读 · 0 评论 -
CSS 条纹背景秘探
CSS 条纹背景秘探CSS 条纹背景秘探CSS 线性渐变background-size实现条纹垂直条纹斜向条纹CSS 条纹背景秘探要想在网页中实 现条纹图案,通常,我们的方法是创建一个单独的位图文件,然后每次需要做些调整时,都用图像编辑器来修改它。可能有人试过用 SVG 来取代位图,但这样还是会有一个独立的文件,而且它的语法也远远不够友好。那么如何直接在 CSS 中创建条纹图案呢?首先我们要先介绍 CSS 线性渐变,background-size。CSS 线性渐变线性渐变创建了一条沿直线前进的颜色原创 2022-05-27 13:29:32 · 502 阅读 · 0 评论 -
CSS 边框秘探
CSS 边框秘探1. 半透明边框相信你以前肯定尝试过 CSS 中的半透明颜色,比如 rgba() 和 hsla()。假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的:border: 10px solid hsla(0,0%,100%,.5);background: white;然而这个结果可能会令你摸不着头脑。我们的边框去哪儿了啊?而且如果我们连使用半透明颜色都不能实现半透明边框,那我们还有什么办法?!尽管看原创 2022-05-26 23:36:45 · 775 阅读 · 0 评论 -
CSS 的层叠规则
CSS 的层叠规则CSS 的层叠规则1. 层叠上下文和层叠水平1.1 什么是层叠上下文1.2 什么是层叠水平2. 元素的层叠顺序3. 层叠准则4. 深入了解层叠上下文4.1 层叠上下文的特性4.2 层叠上下文的创建4.2.1 根层叠上下文4.2.2 定位元素与传统层叠上下文4.2.3 CSS3 与新时代的层叠上下文4.3 层叠上下文与层叠顺序5. z-index 负值CSS 的层叠规则所谓“层叠规则”,指的是当网页中的元素发生层叠时的表现规则。在现实世界,凡事都有个先后顺序,凡物都有个论资排辈。例如,原创 2022-04-27 20:21:05 · 874 阅读 · 1 评论 -
万字总结 CSS 布局
万字总结 CSS 布局万字总结 CSS 布局概述1. 标准文档流1.1 常见现象1.1.1 空白折叠现象1.1.2 高矮不齐,底边对齐1.2 标准文档流等级2. 浮动2.1 CSS 浮动是什么2.2 高度塌陷3. 定位3.1 相对定位3.2 绝对定位3.3 固定定位3.4 粘性定位3.5 重叠的元素4. 弹性布局4.1 Flex布局是什么4.2 基本概念4.3 容器的属性4.3.1 flex-direction属性4.3.2 flex-wrap属性4.3.3 flex-flow4.3.4 justify-c原创 2022-01-09 18:42:15 · 376 阅读 · 2 评论