首页 前端知识 uniapp中style常用设计样式

uniapp中style常用设计样式

2024-10-29 11:10:33 前端知识 前端哥 78 708 我要收藏

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

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19468.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!