
CSS
文章平均质量分 66
样式相关
动画相关
CSS CSS3相关
北北~Simple
往前的路 过眼云烟 不记于心
往后的路 勇往直前 一望无际
展开
-
覆盖CSS样式,抛弃important吧
在定义修改样式的时候,我们经常需要修改样式去满足UI不同的样式,在绝大部分情况下,当我们使用后面的样式覆盖前面的样式不生效的时候,就会简单粗暴的使用important来提高它的绝对地位,不允许修改。但在实际开发中,比如我们引用了第三方库的样式,此时如果要对样式进行修改,以上方法提高样式优先级都不太可行。所以往往我们在覆盖样式时候,除了加id class等样式名以提高样式等级之外,在权重等级相同的时候,只能使用先后顺序来覆盖样式。我之前写的样式呢,谁把我的样式覆盖了,无语。原创 2024-11-14 16:37:41 · 506 阅读 · 0 评论 -
CSS函数
此函数用于访问元素属性的值。让我们通过例子来理解它attr函数不是CSS3或其他CSS的一部分,它仍然是CSS3的草稿,甚至最新的浏览器都还没有完全支持当前仅在content属性上支持attr(),该属性可用于伪元素(例如:before,:after)原创 2024-10-28 09:21:18 · 886 阅读 · 0 评论 -
scss小记
如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下划线。Sass 的连接符号 - 与下划线符号 _ 是相同的,也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。但,Sass @import 指令将文件包含在 CSS 中,不需要额外的 HTTP 请求。当一个样式与另一个样式基本相同的时候,只有少量的区别的时候,就可以用@extend来继承相同的部分 不同的部分额外定义即可。原创 2024-10-30 09:38:22 · 306 阅读 · 0 评论 -
滚动条样式
:-webkit-scrollbar-track-piece 内层滚动槽 (剩余可以滚动的区域)::-webkit-scrollbar-track 外层轨道(滚动条可滚动的整体区域)::-webkit-scrollbar-thumb 滚动的滑块(滚动的对象)::-webkit-scrollbar-button 滚动条两端的按钮。::-webkit-scrollbar 滚动条整体,可以设置宽度等。::-webkit-scrollbar-corner 边角。原创 2024-10-22 10:01:27 · 175 阅读 · 0 评论 -
不常用的css合集
filter属性值是1-100 呈现效效果都是线性的。原创 2024-10-22 09:42:26 · 337 阅读 · 0 评论 -
scss基本使用
符号标识来定义变量变量名用中划线和下划线分隔其实是表示一个意思$color_base和$color-base其实指向的是同一个变量。父选择器的标识符&div{color:red;&:hover{}}群组选择器的嵌套//css使用}// sass嵌套使用.aaa{h1,h2,h3{}}h2{}}子组合选择器和同层组合选择器:>、+ 和 ~// 子组件选择器// 选择 .aaa 的子元素中的 p 标签.aaa > p{}// 选择 .aaa下所有的 p 标签。原创 2022-12-28 20:50:50 · 3496 阅读 · 0 评论 -
CSS伪类
伪类选择器以一个选择器列表为参数,选择该列表中某个选择器可以选择的任何元素可用于简化代码比如有一堆元素,需要其字体颜色一致编辑。原创 2024-10-23 09:11:40 · 397 阅读 · 0 评论 -
鲜为人知的CSS实用技巧
鲜为人知的CSS实用技巧原创 2022-12-29 20:11:31 · 119 阅读 · 0 评论 -
grid布局使用总结
父元素属性:属性 说明 display 设置grid布局原创 2022-04-27 11:35:35 · 6684 阅读 · 0 评论 -
如何用一行 CSS 实现 10 种现代布局
超级居中place-item:center 实现垂直居中父级元素设置一下属性即可 display: grid; place-items: center;解构煎饼式布局:flex: baseWidth 是设置盒子基本宽度 如果没有设置 则取默认的宽度grow 是当父级盒子有剩余空间时候 剩余空间给子级填充剩余空间的比例shrink 是当父级元素宽度不够时候 那么子级元素进行压缩适配父级的比例案例如下:<!DOCTYPE html><html lang="e原创 2022-04-22 17:00:54 · 546 阅读 · 0 评论 -
css新属性
allall 一共有3个属性– initial 将元素所有的属性设置成初始值或回退值– inherit 将所有的元素设置成父元素的值– unset 将所有的元素设置成父元素的值或初始值其兼容性 如下:原创 2022-03-25 16:59:56 · 268 阅读 · 0 评论