在学习uni-app过程中使用的css样式记录

​在学习uni-app过程中，记录下使用的css样式，持续更新

在uni-app常用的css样式

lang=“scss” 和scoped
// lang=“scss”:是定义样式的方式；scoped：只在当前页面生效的样式
width: 100vw; //设置宽，单位px、%、vw（设置屏幕宽，只能是0-100之间）
height: 200px; //设置高，单位px、%、vh（设置高）
align-items: center; //设置子节点对齐方式
justify-content: center; //设置在父组件中的各个子节点的排列方式
display: flex; //设置元素是否被视为块或者内联元素及子元素的布局
flex-direction: column; //内部元素在flex容器中布局定义的方向
background: #f4f4f4;//背景颜色
border: 1px solid red; //设置边框的宽度，solid：边框线的颜色
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); //属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色
border-bottom: 1px solid #e8e8e8; //简写属性把下边框的所有属性：border-bottom-color，border-bottom-style 与 border-bottom-width 设置到了一个声明中。这些属性描述了元素的下边框样式。
image { //直接设置组件的样式
width: 100px;
height: 100px;
border-radius: 50% ; //设置设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。
}
.userName { // 定义的组件名称
padding: 10px 0;
font-size: 15px;
}
padding：当是一个值的时候：是周围四边，两个值：第一个是：上下；第二个是左右；当三个值：第一是上。第二个是左右，第三个是下；当是四个值：第一个是上，第二个右，第三个下，第四个左
text-align:设置块元素或者单元格框的行内内容的水平对齐;//start、end、（这两个类似left、right）、center、justify（文字向两侧对齐，对最后一行无效）、justify-all（和 justify 一致，但是强制使最后一行两端对齐）、match-parent（和 inherit 类似，区别在于 start 和 end 的值根据父元素的 direction 确定，并被替换为恰当的 left 或 right 值）

overflow

其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。
visible
内容不能被裁减并且可能渲染到边距盒（padding）的外部
hidden
如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。
clip
类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。
scroll
如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。

auto
取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。

white-space

用于设置如何处理元素内的空白字符。
normal
连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
nowrap
和 normal 一样合并空白符，但阻止源码中的文本换行。
pre
连续的空白符会被保留。仅在遇到换行符或
元素时才会换行。
pre-wrap
连续的空白符会被保留。在遇到换行符或
元素时，或者根据填充行框盒子的需要换行。
pre-line
连续的空白符会被合并。在遇到换行符或
元素时，或者根据填充行框盒子的需要换行。
break-spaces
与 pre-wrap 的行为相同，除了：
任何保留的空白序列总是占用空间，包括行末的。
每个保留的空白字符后（包括空白字符之间）都可以被截断。
这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容——min-content——大小和最大内容——max-content——大小）。

text-overflow

用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。
clip
默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 text-overflow: ‘’，为了能在两个单词过渡处截断，你可以使用一个空字符串值（‘’）作为 text-overflow 属性的值。
ellipsis
这个关键字会用一个省略号（‘…’、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。
实验性
用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小以至于连字符串本身都容纳不下，那么这个字符串也会被截断。
fade 实验性
这个关键字将会截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。
fade( | ) 实验性
这个函数将会截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。 参数决定淡出特效的距离。 以行宽而定。小于 0 的值视为 0。大于行宽的值视为行宽。

grid-template-columns

display: grid;
gap: 15rpx;//属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式
grid-template-columns: repeat(3,1fr);
//display：grid 是转为网格布局，这个是必须的
// grid-template-columns：1fr | px 这是将网格分为几列，1fr是自适配单位，可以当成栅格,这里也可以是用repeat（3,1fr），是平分成三列，然后自适应宽度，这里看自己需求需要分成几列
//grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 这种写法可以用来做响应式布局，auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。注意：实现这种响应式布局，一定要注意父容器不能使用固定宽度，可以将父容器改为如：80%，这样就能根据屏幕的宽度，自动展示一行展示几个了。
// gap:30px 这是网格四周的间隔
// 注意：这三个属性是给父容器添加的，子元素，可以不用设置宽度，也不用设置margin间距即可完成如下布局。
// grid-row和grid-column可以控制某个元素占领几份
// 以grid-row行为例，从第几列开始 / 第几列+想占几个；
// grid-row: 1/3;
// grid-column: 1/3;
这在老师的博客和视频中都有详细介绍，
grid网格布局，比flex方便太多了，介绍几种常用的grid布局属性
backdrop-filter: blur(20rpx); //backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）
transform: scale(0.8);//属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
transform-origin: left top; //更改一个元素变形的原点
last-child代表一组兄弟元素中的最后元素
deep 表示深度选择器
!important修改优先级，这是把当前的设置作为最高的优先，
后期持续更新，有不对的，欢迎指正

​