肥晨开发的学习之路

如果每次都手动编写 CSS 类，不仅效率低下，还容易出错。本文将详细介绍如何通过 Sass 或 Less 实现这一功能，并探讨其扩展性和应用场景。如果你有其他问题或更好的实现方式，欢迎在评论区分享！行业内幕，洞察先机。Sass 提供了强大的循环和插值功能，非常适合动态生成 CSS 类。在开发中，可以通过类名快速设置元素的间距，无需手动编写 CSS。结合媒体查询，可以为不同屏幕尺寸生成不同的间距类。在组件库中，工具类可以大大提高样式的复用性。在前端开发中，经常需要为元素设置不同的。中添加新的值即可，例如。

实现一个炫酷的横向手风琴效果。手风琴效果在网页设计中非常常见，通常用于展示折叠内容，但今天我们给它加点料——让它横向展开！本文将一步步带你实现这个效果，并附上完整代码。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。// JavaScript 代码见上文。接下来我们一步步实现它！今天我们来聊聊如何用。/* CSS 代码见上文 */

在网页设计中，添加动态元素如浮动云朵可以为用户带来更加生动和自然的体验。虽然HTML和CSS主要用于构建和样式化网页内容，但仍然可以通过一些创意和技巧，模拟出类似云朵漂浮的动画效果。

弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。

scss不支持这个选择器。/deep/ 变:deep。

想要控制文本长度？想要文本超出隐藏？还想要不用JavaScript实现？让我们来用css试试吧~

elementui修改提示文字（placeholder）的字体颜色el-input/el-input-number/el-select/el-cascader/el-time-select/el-date-picker都适用。

css裁剪（clip-path）这个属性平时率非常低。但是其实clip并不是CSS3的新属性，很早就开始出现了。CSS裁剪的这一概念最早是在CSS 2.1时代由clip属性引入，但该属性的限制非常多。裁剪初期只能应用于绝对定位的元素，并且只能裁剪成矩形。而在CSS3中，提供了强大的clip-path属性，突破了clip属性的众多限制。clip-path能够让你指定一个网页元素的显示区域，而不是显示全部。

margin 可以有4个值，分别对应影响的方向是上，右，下，左， 2个值的时候，对应第一个值是 控制上下距离，第二个值是控制左右， 所以magrgin：0 auto， 就是上下距离为0，auto是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。通过css3，给父元素设置相对定位，给子元素设置绝对定位，left：50% top：50% 通过transform：translate(-50%，-50%)拉回自身的宽和高的一半。

B代表：Black（块），独立实体，独立的意义，每个页面都可以看做是多个Block组成,见下图1-1；E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素，多个元素形成一个组件，见下图1-2；M代表： Modifier （修饰符），block 或 element 上的标记，是描述Block或Element的属性或状态，同一Block或Element可以有多个Modifier。

FC是Formatting Context的缩写，中文名：格式化上下文。是 W3C在CSS2.1 规范中的一个概念。FC是指页面中一篇渲染区域，渲染区域内使用的格式化上下文的渲染规则，决定了该区域以及其子元素如何定位。当然，使用同的渲染规则，也会对其他元素的起到相互关系的作用。Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

实现的核心是一个灯罩和一个灯芯。灯罩主要是使用了border-radius圆角边框，灯芯主要是radial-gradient径向渐变。灯芯的闪烁，主要是使用到了CSS的@keyframes动画和opacity透明度。由于一般子弹头的圆角柱状，上面的圆角比下面的大，所以上面使用的圆角数据，也需要比下面大。用于灯罩是红色，黄色光需要过度，所以使用从黄色到红色的渐变。使用简单的二维实现的话，我们先需要使用一个红色矩形。这样就实现了一个灯在灯罩内部常亮的一个效果。通过这些，就能基本实现一个简易的报警灯效果。

theme: cyanosis最近打火机与公主裙中的爱心代码超级火，看着特别心动，让俺用css来写个简易版！！！先看效果：代码拆解：主要是分为3大部分分子颗粒爱心动画代码实现：分子颗粒分子颗粒其实非常简单，主要是使用到的就是css的渐变：linear-gradient，然后再用css3新出的background-size来控制颗粒之间的距离。控制linear-gra...

1.简单的修改颜色原样式：修改后：HTML代码：<el-radio-group v-model="newlyAdded.discount"> <el-radio label="0">工品</el-radio> <el-radio label="1">供应商</el-radio></el-radio-g...

问题起因今天再使用calc时发现无法生效，我的写法是： width: calc(100%-100px);页面无效果，加空格后就发现有效果了： width: calc(100% - 100px);有亿点疑惑，这是为什么？calc是什么？css3的 计算属性，用于动态计算长度值。calc语法：calc(expression)//expression是数学表达式用法&...

一时兴起，突然想写一个Chrome浏览器插件，不知道写啥，就写了一个圣诞树小插件。项目源码>>Chrome浏览器插件Chrome浏览器插件最主要的是：index.html、manifest.json两个文件。下面是manifest.json的简单配置：{ "manifest_version": 2, //名称 "name": "圣诞树", //版本 "ver...

.father { padding: 20px; width: 200px; height: 50px; max-width: 800px; max-height: 800px; border: 1px solid rgba(0, 0, 0, 1); overflow: auto; resize: both }.son { width: 50px; height: 20px; padding:...

在此，我们重点用到的就是conic-gradient。conic-gradient不是什么新鲜东西了，CSS3出的新特性中的一种圆锥形渐变。 线性渐变(linear-gradient)和径向渐变(radial-gradient)这两个是常用的。下面是简单的小案例： 线性渐变(linear-gradient) F12查看代码 线性渐变(line...

Flex布局常见父项的属性：●flex-direction :设置主轴的方向Row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上●justify-content :设置主轴上的子元素排列方式flex-start 默认值从头部开始 如果主轴是x轴，则从左到右flex-end 从尾部开始排列(但元素的顺序还是从左到右)...

网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！盒模型说下盒模型?有两种盒模型，W3C盒模型和IE盒模型。通常说的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都为 content-box。当浏览器未设置<!doctype>声明时，盒模型都为 border-box。通过 css3 的box-sizing属性，可以更改元素...

CSS 滤镜 : backdrop-filterbackdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。滤镜：名称：方法案例：效果：blur()模糊: blur(5px)brightness()亮度: brightness(1.4);contrast()对比度:...