Vue小程序项目知识积累(三)

1.CSS中的var( )

var() 函数用于插入自定义属性(也称为CSS变量)的值。

var(--main-bg-color,20rpx)

设置一个CSS变量的值,但是如果 --main-bg-color 变量不存在,它将默认返回 20rpx

CSS变量必须在一个有效的CSS规则(如选择器)内定义,否则它们不会被识别。如果你在 :root 伪类中定义了 --main-bg-color,那么你可以在任何后代元素中使用 var() 函数来引用它。

:root {--main-bg-color: #fff; /* 定义一个名为 --main-bg-color 的CSS变量,值为 #fff */
}.element {background-color: var(--main-bg-color); /* 使用 var() 函数来引用 CSS 变量 */
}

我们首先在 :root 伪类中定义了 --main-bg-color 变量,然后在一个名为 .element 的类中使用 var() 函数来设置背景颜色。

如果你在JavaScript中动态设置CSS变量,你可以这样做:

document.documentElement.style.setProperty('--main-bg-color', '#fff');

这个方法将动态设置 --main-bg-color 变量的值。请确保在执行这个操作的时候,DOM已经完全加载,否则可能不会生效。

2.display:flex

  justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。/* 对齐方式 */justify-content: center;     /* 居中排列 */justify-content: start;      /* 从行首开始排列 */justify-content: end;        /* 从行尾开始排列 */justify-content: flex-start; /* 从行首起始位置开始排列 */justify-content: flex-end;   /* 从行尾位置开始排列 */justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */justify-content: right;      /* 元素以容器右边缘为基准,一个挨着一个对齐, *//* 基线对齐 */justify-content: baseline;justify-content: first baseline;justify-content: last baseline;/* 分配弹性元素方式 */justify-content: space-between;  /* 均匀排列每个元素首个元素放置于起点,末尾元素放置于终点 */justify-content: space-around;  /* 均匀排列每个元素每个元素周围分配相同的空间 */justify-content: space-evenly;  /* 均匀排列每个元素每个元素之间的间隔相等 */justify-content: stretch;       /* 均匀排列每个元素'auto'-sized 的元素会被拉伸以适应容器的大小 *//* 溢出对齐方式 */justify-content: safe center;justify-content: unsafe center;/* 全局值 */justify-content: inherit;justify-content: initial;justify-content: unset;
flex-direction 属性规定灵活项目的方向。row:默认值。灵活的项目将水平显示,正如一个行一样。
row-reverse:	与 row 相同,但是以相反的顺序。
column:	灵活的项目将垂直显示,正如一个列一样。
column-reverse:	与 column 相同,但是以相反的顺序。
initial;	设置该属性为它的默认值。请参阅 initial。
inherit:	从父元素继承该属性。请参阅 inherit。
align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。stretch:默认值。元素被拉伸以适应容器。	如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
center	:元素位于容器的中心。 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
flex-start	:元素位于容器的开头。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	:元素位于容器的结尾。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
baseline	:元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
initial  :设置该属性为它的默认值。请参阅 initial。
inherit	:从父元素继承该属性。请参阅 inherit。

3.linear-gradient() 

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。

/* 从上到下,蓝色渐变到红色 */
linear-gradient(blue, red);/* 渐变轴为45度,从蓝色渐变到红色,顺时针的转动 */
linear-gradient(45deg, blue, red);/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);/* 从左侧开始的线性渐变,从红色开始,转为黄色 */
linear-gradient(to right, red , yellow);/* 从左上角到右下角的线性渐变 */
linear-gradient(to bottom right, red , yellow);/* 90度线性渐变,顺时针的90度 */
linear-gradient(90deg, red, yellow);/* -90度线性渐变,顺时针的90度 */
linear-gradient(-90deg, red, yellow);/* 多个终止色的线性渐变 */
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);/* 使用了透明度的线性渐变 */
linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));/* 从下到上的线性渐变 */
linear-gradient(180deg, #0066cc 0%, #0066cc 50%, #f8f8f8 50%, #f8f8f8 100% );

4.flex-shrink: 1

按照给的比例进行划分份数。

flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

A、B、C 显式定义了 flex-shrink 为 1,D、E 定义了 flex-shrink 为 2,所以计算出来总共将剩余空间分成了 7 份,其中 A、B、C 占 1 份,D、E 占 2 份,即1:1:1:2:2

.box { flex-shrink: 1;
}.box1 { flex-shrink: 2; 
}<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>

5.vertical-align

vertical-align 属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom使元素及其后代元素的底部与整行的底部对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length将元素升高或降低指定的高度,可以是负数。
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。
 vertical-align:middle;

6.CSS position

position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。

描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成固定定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
sticky

粘性定位,该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

inherit规定应该从父元素继承 position 属性的值。
initial设置该属性为默认值,详情查看 CSS initial 关键字。
    position:absolute;left:100px;top:150px;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/15669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型

使用vue3tsviteuniapp开发小程序或者跨平台app的趋势越来越高&#xff0c;有一个顺手的UI的框架还是非常重要的&#xff0c;官方维护的 uni-ui&#xff0c;支持全端&#xff0c;而且有类型提示&#xff0c;目前已经内置到 GitHub - Sjj1024/uniapp-vue3: 使用uniapp和vue3 ts …

搭建CMS系统

搭建CMS系统 1 介绍 内容管理系统&#xff08;Content Management System&#xff0c;CMS&#xff09;是一种用于管理、发布和修改网站内容的系统。开源的CMS系统有WordPress、帝国CMS等&#xff0c;国产的Halo很不错。 WordPress参考地址 # 官网 https://wordpress.org/# …

为什么IP地址需要划分为公有和私有地址?

一.知识点的解释 1.在现在的网络中&#xff0c;IP地址分为公网IP地址和私有IP地址。公网IP是在Internet使用的IP地址&#xff0c;而私有IP地址则是在局域网中使用的IP地址。 2.私有IP地址是一段保留的IP地址。只使用在局域网中&#xff0c;无法在Internet上使用。 二.为什么…

Python脚本必加代码:99%的程序员都忽视了这个细节!

文章目录 一、初识 if __name__ __main__二、__name__ 和 __main__ 是什么&#xff1f;三、实战讲解四、实际应用场景测试代码提高代码可重用性避免不必要的执行 五、深入理解和更多用法使用 argparse 解析命令行参数使用 unittest 进行单元测试使用 multiprocessing 创建子进…

c#入门学习笔记

p35 字符串 在字符串之前加上一个&#xff0c;可以保持原生字符&#xff0c;不用再进行转义&#xff08;除了双引号&#xff09;。 例如&#xff1a; "A short list: item 1 item 2"或者&#xff1a; "C:\Temp\MyDir\MyFile.doc"这相当于"C:\\Tem…

网盘攻略,羊毛薅到底,这4招太狠了

仅供参考 先买原石会员账户&#xff0c;再绑手机。 自己手机千万不要去注册115&#xff0c;先去马云家买原石会员帐户(五十多自带33T永久空间&#xff0c;非常实惠)。买完原石帐户后再用手机登录绑定帐户和修改密码。买8T永久空间8年VIP 然后再花560元买8T永久空间8年vip&…

嵌入式全栈开发学习笔记---C语言笔试复习大全22

目录 结构体 结构体的声明 定义结构体变量 访问结构体成员进行初始化 通过结构体变量名访问结构体成员 结构体指针 结构体指针的定义 通过结构体指针访问结构体成员 结构体数组 结构体数组的定义 遍历结构体数组 结构体的长度&#xff08;笔试重点&#xff09; 上一…

深入理解C++多态-虚函数

引言 C多态的实现方式可以分为静态多态和动态多态&#xff0c;其中静态多态主要有函数重装和模板两种方式&#xff0c;动态多态就是虚函数。下面我们将通过解答以下几个问题的方式来深入理解虚函数的原理&#xff1a; 为什么要引入虚函数&#xff1f;&#xff08;用来解决什么…

2024年最新信息安全标准汇总

这些标准是我们在数字化时代保障网络安全、数据安全的重要基石&#xff0c;对于维护国家安全、企业利益和个人信息安全具有至关重要的作用。 随着科技的快速发展&#xff0c;网络空间的安全威胁也在不断演变&#xff0c;从复杂的网络攻击到个人信息泄露&#xff0c;这些安全风…

JAVA面试题大全(十四)

1、Kafka 可以脱离 Zookeeper 单独使用吗&#xff1f;为什么&#xff1f; kafka不能脱离zookper单独使用&#xff0c;因为kafka使用zookper管理和协调kafka的节点服务器。 2、Kafka 有几种数据保留的策略&#xff1f; Kafka提供了多种数据保留策略&#xff0c;这些策略用于定…

哈希双指针

文章目录 一、哈希1.1两数之和1.2字母异位词分组1.3最长子序列 二、双指针2.1[移动零](https://leetcode.cn/problems/move-zeroes/description/?envTypestudy-plan-v2&envIdtop-100-liked)2.2[盛最多水的容器](https://leetcode.cn/problems/container-with-most-water/d…

嵌入式0基础开始学习 ⅠC语言(7)指针

0.问题引入 int a 5; a 1024; //把1024存放到变量a的地址中去 b a; // 取变量a的值&#xff0c;赋值给b >在c语言中&#xff0c;任何一个变量&#xff0c;都有两层含义 (1)代表变量的存储单元的地址&#xff1a;变量的地址…

蓝桥楼赛第30期-Python-第三天赛题 统计学习数据题解

楼赛 第30期 Python 模块大比拼 统计学习数据 介绍 JSON&#xff08;JavaScript Object Notation, /ˈdʒeɪsən/&#xff09;是一种轻量级的数据交换格式&#xff0c;最初是作为 JavaScript 的子集被发明的&#xff0c;但目前已独立于编程语言之外&#xff0c;成为了通用的…

分享10个国内可以使用的GPT中文网站

在今天的人工智能领域&#xff0c;基于对话的语言模型已成为研究的热点&#xff0c;尤其是像 ChatGPT 这样因其出色的语言理解与对话交互能力而广受关注的模型。本文将介绍10个国内可以直接使用GPT的网站&#xff0c;旨在为大家在选择和使用这些优秀的AI工具时提供有价值的参考…

使用pyqt绘制一个爱心!

使用pyqt绘制一个爱心&#xff01; 介绍效果代码 介绍 使用pyqt绘制一个爱心&#xff01; 效果 代码 import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget from PyQt5.QtGui import QPainter, QPen, QBrush, QColor from PyQt5.QtCore import Qt, Q…

[保姆式教程]使用目标检测模型YOLO V8 OBB进行旋转目标的检测:训练自己的数据集(基于卫星和无人机的农业大棚数据集)

最近需要做基于卫星和无人机的农业大棚的旋转目标检测&#xff0c;基于YOLO V8 OBB的原因是因为尝试的第二个模型就是YOLO V8&#xff0c;后面会基于YOLO V9模型做农业大棚的旋转目标检测。YOLO V9目前还不能进行旋转目标的检测&#xff0c;需要修改代码 PS:欢迎大家分享农业大…

【研发日记】Matlab/Simulink技能解锁(九)——基于嵌入式处理器仿真

文章目录 前言 基于嵌入式处理器仿真 使用方式 第一步&#xff0c;硬件连接 第二步&#xff0c;配置硬件资源 第三步&#xff0c;配置XCP协议 第四步&#xff0c;加载Contrl Model 第五步&#xff0c;运行仿真 第六步&#xff0c;仿真报告 分析和应用 总结 参考资料 前言…

无线技术整合到主动噪声控制(ANC)增强噪声降低性能

主动噪声控制&#xff08;ANC&#xff09;已成为一种广泛使用的降噪技术。基本原理是通过产生与外界噪音相等的反向声波&#xff0c;将噪音中和&#xff0c;从而达到降噪的效果。ANC系统通常包括以下几个部分&#xff1a;参考麦克风、处理芯片、扬声器和误差麦克风。参考麦克风…

家政保洁服务小程序怎么做?家政公司快速搭建专属小程序

在数字化时代背景下&#xff0c;家政保洁服务行业也迎来了线上转型的新机遇。家政保洁服务小程序&#xff0c;作为一种新型的线上服务平台&#xff0c;不仅能够提升家政公司的服务效率&#xff0c;还能为顾客提供更加便捷的预约上门服务体验。那么家政保洁服务小程序怎么做呢&a…

AI与量子计算:科技新时代的双重飞跃

在科技的浪潮中,每一次技术革新都如同一次深海潜行,探寻着未知的奥秘。近年来,人工智能(AI)和量子计算两大领域的发展尤为引人注目,它们不仅代表了科技的未来趋势,更是人类社会进步的强大动力。本文将深入探讨这两项技术的最新进展、潜在影响以及它们之间的潜在联系。 …