小程序中WXSS样式的使用,与网页前端的CSS基本一致,我们可以通过对CSS的学习来掌握小程序视图样式的编写。
这里共享一些常用的CSS样式,供备忘查询用;
如有补充,欢迎各位看官留言!
★ width/height:分别代表视图的宽度/高度,常用的单位有px、rpx和%,自适应屏幕宽高或父对象宽高可以用100%表示。
★ font-size:字体大小,如font-size:16px。
★ color:字体颜色,接受十六进制颜色或颜色名,例如#FFFFFF、white等。
★ text-align:文本水平对齐方式,常用值有left、center、right。
★ line-height:设置文本行高,当单行文本的行高等于屏幕或父对象高度时,文本为垂直居中。
★ background:背景颜色,一般填写十六进制颜色或颜色名。
★ border-style:边框样式,值可以为none、solid、dotted、double等,分别表示无边框、实线、点状线、双线。
★ border-width:边框宽度,通常用以表示边框宽度,与width类似。
★ border-radius:边框圆角,常用单位px、em等,如border-radius:10px。
★ margin:组件的外边距,margin:20px指外边距均为20px,margin:20px,40px,20px,40px指上右下左(顺时针顺序)边距分别为20、40、20、40像素,margin-top:20px则特指上边距为20px。
★ position:定位组件位置,常用值有fixed、relative、static等。
★ overflow:定义内容溢出边框的处理方式,值有visible(默认,内容无视边框全部可见)、hidden(超过边框部分被剪切)、scroll(始终添加滚动条)、auto(自动模式,若内容超过边框则出现滚动条)。
★ letter-spacing:字间距,适用于定义英文字母之间或汉字之间的距离。
★ word-spacing:用于定义英文单词之间的距离,对中文无效。
★ display:常用值有none(不可见)、block(可见)、flex(多栏多列),WXML中还可以用<view hidden=’’>来定义元素是否可见,hidden值为空时可见,值不为空时不可见。
★ flex-direction:值有row和column,分别表示flex容器水平分布或垂直分布。
查看原文更多详细资料,欢迎关注公众号【一人从零开发小应用】(或搜索微信号:xiaochengxu1038):