随笔分类 -  CSS3

vue-cli 使用webpack5 编译后生产环境 link 标签插入的样式顺序是由什么决定的？
摘要：vue-cli 使用webpack5 编译后生产环境 link 标签插入的样式顺序是由什么决定的？ 在 Vue CLI 项目中使用 Webpack 5 编译后，生产环境中 <link> 标签插入样式的顺序主要由几个因素决定： 1. 样式文件的引入顺序 在 .vue 文件或 JavaScript/JS 阅读全文
posted @ 2025-05-27 16:49 龙陌 阅读(97) 评论(0) 推荐(0)
bem.scss 这个sass工具要如何使用，给出使用文档和示例
摘要：constants.scss $namespace: 'longmo' !default; $common-separator: '-' !default; $element-separator: '__' !default; $modifier-separator: '--' !default; 阅读全文
posted @ 2025-03-16 23:00 龙陌 阅读(61) 评论(0) 推荐(0)
design-token 是什么样式方案？
摘要：Design Tokens 是一种用于存储和管理设计系统中视觉风格（如颜色、字体、间距等）的值的方法。 它们作为设计决策的基本单位，可以跨不同平台和工具（包括但不限于Web、iOS、Android等）保持一致的设计语言。 Design Tokens并不是一种样式方案，而是一种概念或方法论，它帮助设计 阅读全文
posted @ 2025-03-16 22:23 龙陌 阅读(197) 评论(0) 推荐(0)
css border-radius 如何设置不占div宽度,向外突出
摘要：在CSS中，border-radius 用于创建元素的圆角边框，但边框圆角本身是包含在元素的总宽度和高度内的，并不会额外占用外部空间或使元素尺寸变大。如果你想让圆角“向外突出”，即不占用div本身的宽度和高度，可以通过一些技巧来模拟这种效果。 一种常见的方法是使用伪元素 (::before 和 :: 阅读全文
posted @ 2024-05-10 10:44 龙陌 阅读(632) 评论(0) 推荐(0)
@import '~@/commonStyles/index.less'; 这里的'~@是什么写法
摘要：在现代前端项目中，特别是在使用webpack等构建工具时，~@ 是一种约定的写法，用于处理模块化的CSS或预处理器（如Less、Sass）文件的导入。 这里的 ~@/commonStyles/index.less 表示： ~ 符号：在一些构建系统中（尤其是webpack），此符号告诉构建工具这是一个 阅读全文
posted @ 2024-02-06 15:58 龙陌 阅读(475) 评论(0) 推荐(0)
margin上边距下边距覆盖
摘要：margin上边距下边距覆盖 首先，我们知道水平间距不会重合覆盖 但是，两个或多个块级盒子的垂直相邻边界会重合。 边界宽度结果的如下： 如果都是正值：相邻边界宽度中最大的值。 如果有一个负值：在最大的正边界中减去绝对值最大的负边界。 如果都是负值：从零中减去绝对值最大的负边界。 但是，事有例外，下面 阅读全文
posted @ 2024-01-21 18:24 龙陌 阅读(66) 评论(0) 推荐(0)
text-overflow:ellipsis 设置超出省略号不管用的原因可能是哪些
摘要：text-overflow:ellipsis 设置超出省略号不管用的原因可能是哪些 text-overflow: ellipsis 设置超出文本内容显示省略号（…）可能不管用的原因有以下几点： 容器宽度没有限制： text-overflow: ellipsis 与 overflow: hidden 阅读全文
posted @ 2024-01-21 17:53 龙陌 阅读(1733) 评论(0) 推荐(0)
注意：当鼠标悬浮在DOM元素上时，显示的宽度和高度通常是包含`padding`但不包含`margin`的。
摘要：注意 当鼠标悬浮在DOM元素上时，显示的宽度和高度通常是包含padding但不包含margin的。 这是因为padding表示元素内容和边框之间的空间，而margin则表示元素边框和周围元素之间的空间。 常用的，给div设置高度，然后使用padding设置空隙。 css margin和padding 阅读全文
posted @ 2024-01-21 17:49 龙陌 阅读(100) 评论(0) 推荐(0)
请使用scss写一个util，用于方便创建毛玻璃特效的背景图片，支持文字在图片上显示，不被遮挡
摘要：下面是一个使用 SCSS 编写的 util，用于创建毛玻璃特效的背景图片，并确保文字不被遮挡。该 util 使用 ::before 伪元素来创建毛玻璃效果，同时在伪元素上添加文字，以确保文字显示在图片上方。 @mixin glassBackground($imageUrl, $textColor: 阅读全文
posted @ 2024-01-14 23:00 龙陌 阅读(99) 评论(0) 推荐(0)