CSS
文章平均质量分 95
CSS 相关知识
XianZhe_
简单的事情重复做上百次上千次,体会是不同的,在往前冲的同时也不要忘记了身后所走过的路,加油吧骚年!
展开
-
『精』Sass 核心程序设计指南(这一篇就够了!)
Sass(英文全称:Syntactically Awesome Stylesheets),在前端领域中,Sass 作为 CSS 的预处理器,即使没使用过,大概率也或多或少听说过 Sass。Sass 包括两套语法。最开始的语法叫做“缩进语法”,与 Haml 类似,使用缩进来区分代码块,并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”,使用和 CSS 一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法分别对应 .sass 和 .scss 两个文件扩展名。原创 2024-04-26 10:27:45 · 496 阅读 · 2 评论 -
『精』CSS 小技巧之BEM规范
BEM风格规范指的是 Block、Element、Modifier 这三者的简称,这个规范将 CSS 拆分成块、元素、修饰符,根本作用是帮助开发者快速理解HTML与 CSS 之间的关系。那么通过使用 BEM 能获得到什么好处呢?如果我们想制作一个组件的新样式,比如改个字体/背景色,可以很容易地看到有哪些样式项已经存在,只需要新增一个修饰符即可,甚至可能意识到一开始就不需要编写任何样式,有一个预先存在的修饰符可以满足我们的需求。原创 2023-12-27 18:16:36 · 1159 阅读 · 0 评论 -
CSS 快速实现水平垂直居中
本文探究的是如何快速实现水平垂直居中,重点在于快速两个字,我对于快速的理解,一是不需要编写大量的 CSS 属性,二是不需要手动计算居中的具体位置数值,基于这两个前提下,使用像和定位布局这种方式是不被允许的,那还剩下什么选择呢?答案就是使用弹性布局。原创 2023-10-24 18:58:19 · 495 阅读 · 0 评论 -
CSS 这个就叫优雅 | 多行文本溢出省略
在编写页面时,难免会用到文本溢出处理,但如果每遇到一次就要把上面的样式重新再写一次的话未免过于繁琐。如果你正在使用SCSS/LESS这种CSS预处理语言,那么我强烈建议你对其进行封装处理。原创 2023-01-09 16:46:01 · 3216 阅读 · 0 评论 -
CSS 奇技淫巧Box-shadow实现圆环进度条
其实使用Box-shadow进行实现的关键点在于控制阴影按照顺序延时移动,移动的越快速度则越快,反则越慢。为解决最后一阴影移动便宜的问题,需要新增一个优先级高的阴影提前进行覆盖,当然嫌麻烦的话可以不用。因为是移动四个不同的阴影来控制进度,在阴影的切换处很明显会有顿挫感,对于需要平滑进度条的场景来说不太适用,但对于需要顿挫感的场景来说又很适用,可谓是一把双刃剑,关键要看在哪里用。使用阴影控制圆环进度条,这个方法是比较难想到的,实现起来还需要一层父元素,编写起来需要一定的熟练度。原创 2022-12-29 18:22:06 · 3895 阅读 · 0 评论 -
CSS 长度单位的详解『你还是只会使用PX吗?(╬▔皿▔)╯』
CSS 长度单位的详解『你还是只会使用PX吗?』文章目录CSS 长度单位的详解『你还是只会使用PX吗?』一、CSS的长度单位🥣二、绝对长度单位三、相对长度单位四、相对长度的应用参考资料🥪相关博客一、CSS的长度单位🥣CSS中有相当一部分属性的值是需要使用到长度,而说到长度就一定会有长度单位的出现,长度单位在CSS中并不是统一的。CSS的长度单位主要分为绝对长度单位和相对长度单位。1、in(英寸)2、cm 厘米3、mm 毫米原创 2022-03-20 20:35:48 · 2702 阅读 · 0 评论 -
CSS 伪类和伪元素的区别以及详解o((>ω< ))o
一、伪类🛸**关于伪类的定义,先来看看在 CSS3 建议文档是怎么说的:**- 伪类存在的意义是为了通过选择器找到那些 ①不存在于DOM树中的信息 以及 ②不能被常规CSS选择器获取到的信息- 伪类由一个冒号 `:` 开头,冒号后面是伪类的名称和包含在圆括号的可选参数。- <font color=green>任何常规选择器都可以在任何位置使用伪类。- 一些伪类的作用会互斥,另外一原创 2022-03-13 23:29:11 · 2090 阅读 · 1 评论 -
CSS 关于 选择器的优先级(重点)
CSS 关于 选择器的优先级(重点)文章目录CSS 关于 选择器的优先级(重点)权重标签选择器类选择器ID选择器内联样式权重标签选择器类选择器ID选择器内联样式原创 2021-02-25 14:21:32 · 640 阅读 · 3 评论