随笔分类 - CSS3
发表于 2024-05-10 10:44阅读:366评论:0推荐:0
摘要:在CSS中,border-radius 用于创建元素的圆角边框,但边框圆角本身是包含在元素的总宽度和高度内的,并不会额外占用外部空间或使元素尺寸变大。如果你想让圆角“向外突出”,即不占用div本身的宽度和高度,可以通过一些技巧来模拟这种效果。 一种常见的方法是使用伪元素 (::before 和 ::
阅读全文 »
发表于 2024-02-06 15:58阅读:306评论:0推荐:0
摘要:在现代前端项目中,特别是在使用webpack等构建工具时,~@ 是一种约定的写法,用于处理模块化的CSS或预处理器(如Less、Sass)文件的导入。 这里的 ~@/commonStyles/index.less 表示: ~ 符号:在一些构建系统中(尤其是webpack),此符号告诉构建工具这是一个
阅读全文 »
发表于 2024-01-21 18:24阅读:14评论:0推荐:0
摘要:margin上边距下边距覆盖 首先,我们知道水平间距不会重合覆盖 但是,两个或多个块级盒子的垂直相邻边界会重合。 边界宽度结果的如下: 如果都是正值:相邻边界宽度中最大的值。 如果有一个负值:在最大的正边界中减去绝对值最大的负边界。 如果都是负值:从零中减去绝对值最大的负边界。 但是,事有例外,下面
阅读全文 »
发表于 2024-01-21 17:53阅读:1368评论:0推荐:0
摘要:text-overflow:ellipsis 设置超出省略号不管用的原因可能是哪些 text-overflow: ellipsis 设置超出文本内容显示省略号(…)可能不管用的原因有以下几点: 容器宽度没有限制: text-overflow: ellipsis 与 overflow: hidden
阅读全文 »
发表于 2024-01-21 17:49阅读:52评论:0推荐:0
摘要:注意 当鼠标悬浮在DOM元素上时,显示的宽度和高度通常是包含padding但不包含margin的。 这是因为padding表示元素内容和边框之间的空间,而margin则表示元素边框和周围元素之间的空间。 常用的,给div设置高度,然后使用padding设置空隙。 css margin和padding
阅读全文 »
发表于 2024-01-14 23:00阅读:46评论:0推荐:0
摘要:下面是一个使用 SCSS 编写的 util,用于创建毛玻璃特效的背景图片,并确保文字不被遮挡。该 util 使用 ::before 伪元素来创建毛玻璃效果,同时在伪元素上添加文字,以确保文字显示在图片上方。 @mixin glassBackground($imageUrl, $textColor:
阅读全文 »