uniapp中style常用设计样式

字体相关：
font-family：设置字体，例如 font-family: Arial, sans-serif;
font-size：字体大小，例如 font-size: 20px;
font-weight：字体粗细，例如 font-weight: bold;
font-style：字体样式，例如 font-style: italic;
文本相关：
color：文本颜色，例如 color: red;
text-align：文本对齐方式，例如 text-align: center;
text-decoration：文本装饰，例如 text-decoration: underline;
背景相关：
background-color：背景颜色，例如 background-color: #f0f0f0;
background-image：背景图片，例如 background-image: url('image.jpg');
边距和填充：
margin：外边距，例如 margin: 10px; 或者 margin: 10px 20px 10px 20px;（分别代表上、右、下、左）
padding：内边距，例如 padding: 10px;
尺寸：
width：宽度，例如 width: 200px;
height：高度，例如 height: 100px;
边框：
border：边框，例如 border: 1px solid black; （1 像素宽的黑色实线边框）
border-width：边框宽度，border-width: 1px;
border-style：边框样式，像 border-style: solid;
border-color：边框颜色，border-color: red;
显示方式：
display：例如 display: block; 或 display: none; （分别表示块级显示和隐藏）
定位：
position：例如 position: absolute; 或 position: relative;（绝对定位和相对定位）
top、right、bottom、left：用于精确定位元素的位置
行高设置：
line-height：例如 line-height: 2; （行高为字体大小的两倍）

 

.container 设置
通常是一个用于定义特定样式或布局的类名

display：flex：（弹性容器，该容器内部的子元素将按照弹性布局的规则进行排列和对齐。）

flex-direction：用于指定内部元素在主轴上的排列方向，可选值包括row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。

justify-content：设置伸缩项目沿着主轴线的对齐方式，可选值有center（居中）、flex-start（左对齐或顶部对齐）、flex-end（右对齐或底部对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（项目两侧间隔相等）。

align-items：用于设置伸缩项目所在行沿着侧轴线的对齐方式，可选值包括center（侧轴居中）、flex-start（侧轴起点对齐）、flex-end（侧轴终点对齐）、baseline（根据伸缩项目的基线对齐）、stretch（默认，拉伸填充整个侧轴）。

flex-wrap：决定伸缩容器的子元素是单行显示还是多行显示，可选值为nowrap（单行显示，可能导致溢出）、wrap（多行显示，第一行在上方）、wrap-reverse（多行显示，第一行在下方）。

align-content：设置伸缩行的对齐方式，对单行弹性盒子模型无效，可选值有center（各行向伸缩容器的中间位置对齐）、flex-start（各行向伸缩容器的起点位置对齐）、flex-end（各行向伸缩容器的终点位置对齐）、space-between（各行平均分布）、space-around（各行平均分布，两端保留一半的空间）、stretch（默认，各行伸展以占用额外空间）