摘要: 目录继承继承的作用域占位符 % sass中的继承使用@extend标识符,一次可以继承一个或多个样式。 继承 可以一次继承一个或多个样式。例如: .alert{ height:30px; width:100px; } .title{ color:yellow; } .success{ @extend 阅读全文
posted @ 2023-12-27 22:24 Ewar-k 阅读(68) 评论(0) 推荐(0) 编辑
摘要: 目录数据类型运算颜色值运算字符串运算插值语句 # 数据类型 sass支持以下6中主要类型: 数字,1, 2, 13, 10px 字符串,有引号字符串与无引号字符串,"foo", 'bar', baz 颜色,blue, #04a3f9, rgba(255,0,0,0.5) 布尔型,true, fals 阅读全文
posted @ 2023-12-27 22:22 Ewar-k 阅读(7) 评论(0) 推荐(0) 编辑
摘要: 目录变量局部变量全局变量变量默认值多值变量用法一用法二 列表列表函数maps映射有关maps的其它函数map-has-key(map,key)map-keys(map) 变量 定义一个变量(以$号开头):$name:green 使用定义好的变量:color:$name 变量也可以用在属性选择器上:# 阅读全文
posted @ 2023-12-27 22:21 Ewar-k 阅读(5) 评论(0) 推荐(0) 编辑
摘要: 目录选择器嵌套属性嵌套父选择器引用 &@at-root跳出嵌套高级用法 选择器嵌套 选择器嵌套可以简化后代选择器的书写,它允许我们将拥有相同父选择器的选择器写在一起。例如: div { width:100px; height:200px; .head{ height:50px; background 阅读全文
posted @ 2023-12-27 22:19 Ewar-k 阅读(7) 评论(0) 推荐(0) 编辑
摘要: Element.animate()实现 <div id="app"> <button @click="startAmi">开始</button> <p>{{msg}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue. 阅读全文
posted @ 2023-12-27 22:16 Ewar-k 阅读(61) 评论(0) 推荐(0) 编辑
摘要: 目录css中使用百分比时的参照padding&margin css中使用百分比时的参照 padding&margin 使用百分比值时,参照的是父元素的宽度,例如 利用该特性可以实现根据父元素宽度变化,父元素内部的图片依然保持正方形的效果,下面是一个通过flex布局实现两列布局的例子: <!docty 阅读全文
posted @ 2023-12-26 22:45 Ewar-k 阅读(11) 评论(0) 推荐(0) 编辑
摘要: 安装 pnpm add pinia 创建一个pinia实例(根store)并将其传递给应用: import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const p 阅读全文
posted @ 2023-12-26 21:07 Ewar-k 阅读(6) 评论(0) 推荐(0) 编辑
摘要: 目录简介flex容器基本概念flex-direction:决定主轴的方向(即元素的排列方向)flex-wrap: 指定弹性盒子的子元素换行方式justify-content:定义了元素在主轴的对齐方式align-items:设置弹性盒子元素在交叉轴(与主轴垂直)方向上的对齐方式align-conte 阅读全文
posted @ 2023-12-26 17:16 Ewar-k 阅读(6) 评论(0) 推荐(0) 编辑
摘要: backdrop-filter:为元素后面区域添加图形效果 该属性可以让你为一个元素后面区域(即背景区域)添加图形效果(如模糊或颜色偏移)。它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。作用于元素背后的区域所覆盖的所有元素 与filter的区别:filter作用于元素本身 阅读全文
posted @ 2023-12-20 22:43 Ewar-k 阅读(56) 评论(0) 推荐(0) 编辑
摘要: 绝对定位居中 设置水平居中 先设置子元素左侧移动到水平中心位置 left: 50%; , 再设置 margin-left: -40px 向左移动 50% ; /* 绝对定位元素 - 水平居中 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolu 阅读全文
posted @ 2023-12-20 22:30 Ewar-k 阅读(9) 评论(0) 推荐(0) 编辑