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(默认,各行伸展以占用额外空间)
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。