Uni-app 知识 CSS

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

前言

学习前端必须都要学会 CSS 的使用，里面提供的属性非常多，最好还是一个一个用一下，下面的内容都是我把我知道的每一个属性进行使用，截图效果和代码，直接复制就能运行看到效果，然后有一些通常是结合一起使用的也会具例子，然后再通过需求一起结合使用，更快的融汇贯通

CSS 样式

.view-box{
	
	
	display: inline-block;
	flex-direction: row; 

    width: fit-content;
	width: 50%;
	width: 200upx  50%;
	height: 200upx;
	max-height: 200upx;
	background-color: aquamarine;
	color: bisque;
	font-size: 40upx;
	line-height: 200upx;
	font-weight: bold;
	text-align: center;


	border-radius:100%;
	border-radius:10rpx;
	
	
	
	
	
	overflow: hidden;
	
	border: 1upx solid #CCCCCC;
	border-bottom: 10upx solid #FEDE33;

	padding: 30upx;
	
	padding: 0 10px;
	
	padding: 1px 4px 2px 3px;
	
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 10px;
	padding-right: 10px;

	margin: 100upx; 
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
	
	
	backdrop-filter: blur(20rpx);

	
	box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.8);
	
	text-shadow: 0 4rpx rgba(0,0,0,0.3);

    
    box-sizing: border-box;
	filter: blur(10px);
	white-space: nowrap;
	flex-shrink: 0;
	

	
	height:env(safe-area-inset-bottom);
	padding-bottom:env(safe-area-inset-bottom);
	padding-bottom:calc(env(safe-area-inset-bottom) + 50rpx);

	
	overflow: hidden;
	white-space: nowrap; 
	text-overflow: ellipsis;  
	overflow-x: auto; 
	
	
	transform: scale(0.8);
	transform-origin: left top;
}


position: relative;
position: absolute;
bottom: 44rpx;
left: 50%;
letter-spacing: 6rpx;
z-index: 1;

.mask-view {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); 
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999; 
}

Demol 列表调试用到

例子一

例子二

封装颜色

定义 scss 颜色变量 deep()修改子组件 css 样式

注意：新定义的颜色，是预编译的，一定要重新启动项目才能生效

创建一个颜色封装的文件 + 导入使用

base-style.css

$brand-theme-color:#28B389;      // 品牌主体红色

$border-color:#e0e0e0;           // 边框颜色
$border-color-light:#efefef;     // 边框亮色

$text-font-color-1:#000;         // 文字主色
$text-font-color-2:#676767;      // 副标题颜色
$text-font-color-3:#a7a7a7;      // 浅色
$text-font-color-4:#e4e4e4;      // 更浅

导入

@import "@/common/style/base-style.scss";

必须要重新启动项目才生效

使用

CSS 的使用，修改颜色

修改图标的颜色

:deep(){}是: 穿透的意思

!important. 加大权重

:deep(){ 
	.uni-icons{color:$brand-theme-color !important;}
}	

CSS 属性

display 显示方式

display: block;

特点：
占据整行，自动换行

每一个块会自己独占一行，也就是每一个块元素会占据整行

会不会自动换行，有待确认，我认为会，GBT 说不会

block 是一个块元素，块元素需要占据整个屏幕的宽度，也就是当有一个块需要占据整个屏幕的宽度就需要用到 block，并在其前后添加换行符

display: inline;

特点：
最多占据父类宽度，不换行

inline 行内元素, 不会换行, 子元素超出父类容器不会换行

inline: 元素会显示为行内元素，只占据其内容所需的宽度，不会换行

display: inline-block;

特点：
排列在一行内，自动换行，可以设置宽高，可以设置 padding，margin

GBT 解析
结合了 inline 和 block 的特性。它的行为特点如下：

行内显示: 元素会像 inline 元素一样排列在同一行内，不会强制换行。如果一行的空间不足以容纳所有的 inline-block 元素，它们会自动换行到下一行。

块级特性: 元素可以设置宽度和高度，并且可以在元素周围添加边距（margin）和填充（padding），类似于 block 元素。这样，你可以控制元素的尺寸和布局，同时保持行内排列的特性。

display: flex;

flex-direction: row; 布局方向

一般结合 display: flex; 使用，子元素的主轴方向

GBT 解析：
在 Uni-app 的开发中，flex-direction 属性用于定义主轴的方向，从而控制子元素的排列方向。它有四个值：row（默认值，水平排列）、row-reverse（水平反向排列）、column（垂直排列）、column-reverse（垂直反向排列）。

justify-content (主轴方向)

常用: center(中心对齐) space-between(贴边均匀分布) space-around(均匀分布)
justify-content 属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取 5 个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items (交叉轴 - 单行)

常用: center(中心对齐)
align-items 属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取 5 个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

align-content (交叉轴 - 多行)

侧轴有多行的,uni-app 开发比较少用, 都是单行的约束控件比较多
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

column 竖轴

row 横轴

flex-wrap 是否允许换行

nowrap：默认值，所有 flex 项目都在同一行上，不换行。
wrap：允许项目换行。如果需要，项目会换行到多行。
wrap-reverse：允许项目换行，但换行的方向与 wrap 相反

nowrap 不允许换行

wrap 允许换行

wrap-reverse 允许换行 – 反方向

flex-flow 布局方向和是否换行缩写

flex-flow: row nowrap; 横向 不允许换行

flex-flow: row wrap; 横向 允许换行

flex-flow: column nowrap; 竖向 不允许换行

其实没什么用，因为可以滑动

flex-flow: column wrap; 竖向 允许换行

其实没什么用，因为可以滑动

flex-shrink 控制子容器的缩小比例

当自容器的宽度大于父容器宽度的时候是否允许缩小
flex-shrink: 1：表示项目可以缩小，默认值为 1。
flex-shrink: 0：表示项目不缩小。
flex-shrink: 2：表示项目缩小的比例是其他项目的两倍。

width

width: 300rpx;

width: 50%;

width: auto;

使元素的宽度自适应内容。也就是说，元素的宽度会根据其内容的实际宽度进行调整，而不是固定一个值或按父容器的百分比设置。

width: fit-content;

也是一种有效的设置 宽度 的方式。这种设置方式会使元素的宽度适应其内容的宽度，但不会超过其父容器的宽度

min-height

max-height: 200upx;

max-height

max-height: 200upx;

s

box-sizing: border-box;

ChatGBT 解析

不加 box-sizing: border-box; 会增加总大小
width 和 height 属性只应用于元素的内容。任何添加的 padding 和 border 都会增加元素的总大小。

例如，如果设置了 width: 100px;，然后又添加了 padding: 10px; 和 border: 5px;，元素的实际宽度将是 100px (内容宽度) + 20px (左右填充) + 10px (左右边框)，总共 130px。

加上 box-sizing: border-box; 不会增加总大小
width 和 height 包括元素的内容、内边距 (padding) 和边框 (border)。

例如，如果设置了 width: 100px;，并添加了 padding: 10px; 和 border: 5px;，元素的内容宽度会自动调整，使元素的总宽度仍然为 100px，其中包含内容、内边距和边框。

需求

做一个下面样子的层次关系的嵌套 view

加 – box-sizing 出来的效果

不加 – box-sizing 出来的效果

line-height

line-height: 30px; 设置行高

background-color

color

颜色名称 : 使用预定义的颜色名称。
十六进制值: 使用 #RRGGBB 或 #RRGGBBAA 格式。
RGB: 使用 rgb(R, G, B) 格式，其中 R、G 和 B 是 0 到 255 之间的整数。
RGBA: 使用 rgba(R, G, B, A) 格式，其中 A 是从 0 到 1 之间的透明度值。
HSL: 使用 hsl(H, S%, L%) 格式，其中 H 是色相角度，S 是饱和度百分比，L 是亮度百分比。
HSLA: 使用 hsla(H, S%, L%, A) 格式，其中 A 是透明度值。

font-size 文本大小

font-weight

文字粗体

text-align 文字对齐方式

text-align: center;
text-align: left;
text-align: right;

border 边框

border 四周边框

border-top 顶部边框

border-right 右边边框

border-bottom 底部边框

border-left 左边边框

border-width 边框宽度

border-style 边框样式

border-color 边框颜色

border-radius 圆角

border-radius: 15px;

border-radius: 100%;

border-radius: 10px 20px 30px 40px;

padding 内边距

margin 外边距

box-shadow 阴影

box-shadow: h-offset v-offset blur spread color inset;

h-offset 是阴影的水平偏移量。
v-offset 是阴影的垂直偏移量。
blur 是模糊半径，决定阴影的模糊程度。
spread 是阴影的扩展半径，决定阴影的大小。
color 是阴影的颜色。
inset 是可选的，将阴影设置为内阴影。

box-shadow: 5px 5px 10px gray;

box-shadow: 5px 5px 10px 5px gray;

box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);

box-shadow: inset 5px 5px 10px gray;

box-shadow: 5px 5px 15px 3px rgba(0, 0, 0, 0.4);

box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2), 20px 20px 50px rgba(0, 0, 0, 0.2);

text-shadow 文本阴影

多阴影多颜色

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), -4px -4px 6px rgba(182, 03, 72, 0.7);

backdrop-filter 模糊遮罩

transform 变形

transform: rotate(45deg); 旋转 45 度

transform: scale(1.5); 放大 1.5 倍

transform: translateX(50px); 水平平移 50 像素

translateX

.content {
  background-color: lightgray;
  transform: translateX(50px); /* 水平平移 50 像素 */
}

translateY

.content {
  background-color: lightgray;
  transform: translateY(30px); /* 垂直平移 30 像素 */
}

translate

.content {
  background-color: lightgray;
  transform: translate(50px, 30px); /* 同时水平平移 50 像素和垂直平移 30 像素 */
}

transform: skewX(20deg); 水平倾斜 20 度

skewX

.content {
  background-color: lightgray;
  transform: skewX(20deg); /* 水平倾斜 20 度 */
}

skewY

.content {
  background-color: lightgray;
  transform: skewY(10deg); /* 垂直倾斜 10 度 */
}

skew

.content {
  background-color: lightgray;
  transform: skew(20deg, 10deg); /* 同时水平倾斜 20 度和垂直倾斜 10 度 */
}

组合变换

transform-origin 变换点设置

上面的 transform 属性变换默认是中心点作为参数，transform-origin 可以变换参考点

transform-origin: left;：将变换原点设置在元素的左边缘。
transform-origin: top;：将变换原点设置在元素的上边缘。
transform-origin: center;：将变换原点设置在元素的中心（这是默认值）。
transform-origin: 25% 75%;：将变换原点设置在元素的左下角 25% 和 75% 的位置。
transform-origin: ; 例如：transform-origin: 1，1，1(可选)。例如：transform-origin: left，top

white-space 处理空白字符

normal：默认值。连续的空白字符合并为一个空格，文本会自动换行。
nowrap：文本不会换行，所有文本都在同一行中显示，空白字符不会被折叠。
pre：文本会保留空白字符和换行符。文本会在元素中按原样显示，类似于 HTML 的

overflow 内容溢出处理

hidden：内容溢出容器时会被裁剪，不显示在容器外部。
scroll：内容溢出容器时会显示滚动条，允许用户滚动查看超出部分。
auto：内容溢出容器时，如果需要会显示滚动条。
visible：内容溢出容器时会显示在容器外部，默认值。

还可以设置控制元素在水平方向上的溢出行为 overflow-x: visible / hidden / scroll / auto

text-overflow 文字溢出

clip：文本溢出时裁剪，超出的部分不可见。
ellipsis：文本溢出时用省略号（…）表示超出的部分。
string：自定义的文本溢出处理方式。虽然 string 在 CSS 中不常用，但可以用来显示自定义的文本内容（在某些特定的实现中可能有支持）

text-overflow 需要和 overflow 属性与 white-space 属性一起配合使用

relative 相对定位

父类 position: relative; 跟子类 position: relative;(相对定位 ) 配合很少用，感觉参考的是父类的零点

absolute 绝对定位

父类 position: relative; 跟子类 position: absolute;(绝对定位 ) 配合，参考的是父类的零点

fixed 相对屏幕定位

父类 position: relative; 跟子类 position: fixed;(相对屏幕定位 ) 配合，参考屏幕的是父类的零点

z-index 堆叠顺序

UI 需求

CollectionView 竖向滚动

CollectionView 横向滚动

CollectionView 瀑布流

嵌套 view – box-sizing: border-box;

View 添加背景图片

图片完整显示到 view 中

background-size: 100% 100%;

View 添加渐变颜色

.view-banner-one {background: linear-gradient(to bottom, #F79754, #D93426);
}

文本 – 限制一行显示

.view-banner-fire-item-title {
    display: block;      /* 将元素显示为块级元素，块级元素会独占一行，允许设置宽度和高度。*/     
    overflow: hidden;       /* 超出容器部分的内容会被隐藏，不会显示在容器外部。*/
    text-overflow: ellipsis;  /* 当文本内容超出容器宽度时，使用省略号“...”表示被截断的部分。*/
    white-space: nowrap;   /* 防止文本换行，文本会在同一行内显示，直到遇到容器边界或内容超出容器。*/
    font-size: 28rpx;         /* 设置文本的字体大小为 28rpx。rpx 是响应式像素单位，用于 uni-app。*/
    color: #333;                 /* 设置文本颜色为深灰色（#333）。*/
    text-align: center;      /* 将文本居中对齐。*/
    max-width: 100%;     /* 最大宽度设置为 100%，即容器宽度的 100%。确保文本不会超出容器的宽度。*/
    margin-left: 10rpx;     /* 设置左边距为 10rpx，创建与左侧内容的间距。*/  
}

实战一

.view-banner-fire-item-title {
    display: block;    
    overflow: hidden;      
    text-overflow: ellipsis;
    white-space: nowrap;   
    
    font-size: 28rpx;       
    color: #333;         
    text-align: center;    
    max-width: 100%;   
    margin-left: 10rpx;    
}

实战二

.product-choose-bottom-center {
	background-color: #f01123;
	flex: 1;

	// 使得能够剧中显示
	height: 35rpx;
	line-height: 35rpx;
	
	// 显示一行显示
	overflow: hidden;      
	text-overflow: ellipsis;
	white-space: nowrap;   
	
	display: block;// 能出现 ...
	justify-content: flex-start;
	align-items: center;
}

文本 – 限制两行显示

核心代码就是下面的前 5 行

.view-banner-four-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    
    font-size: 28rpx; 
    color: #333; 
}

.view-banner-four-description {
    display: -webkit-box;
    /* 将元素设置为 WebKit 的盒子模型，使其支持多行截断。*/

    -webkit-box-orient: vertical;
    /* 指定盒子模型的方向为垂直方向，允许多行文本显示。*/

    -webkit-line-clamp: 2;
    /* 限制文本显示的行数为 2 行，超出部分使用省略号表示。*/

    overflow: hidden;
    /* 隐藏超出容器边界的内容。*/

    text-overflow: ellipsis;
    /* 在文本超出容器边界时，使用省略号“...”表示被截断的部分。*/

    font-size: 28rpx; 
    /* 设置字体大小为 28rpx。rpx 是响应式像素单位，用于 uni-app。*/

    color: #333; 
    /* 设置文本颜色为深灰色（#333）。*/
}

文本 – 内容自动 换行

	1. 更新秒杀功能 n
	2. 更新拼团活动 n
	3. 更新礼尚往来

.mask-view-message {
	font-size: 28rpx;
	margin: 30rpx 10rpx 0 10rpx;
	background-color: rgba(12, 180, 0, 0.2);
	height: auto; /* 根据内容高度自适应 */
	white-space: pre-wrap; /* 保持文本中的换行符 */
	line-height: 50rpx;
	
	display: flex;
	justify-content: flex-start;
	align-items: center;
}