uniapp中style常用设计样式

满花楼 2024-10-04 13:03:01 阅读 50

字体相关:

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(默认,各行伸展以占用额外空间)

 



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。