常用CSS样式汇总帖——供备忘查询,也欢迎补齐!

  • • 发表于 7年前
  • • 作者 一人
  • • 6164 人浏览
  • • 2 条评论
  • • 最后编辑时间 7年前
  • • 来自 [技 术]

小程序中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):

转载文章 阅读原文

分享到:
2条评论
Ctrl+Enter
作者

一人

一人

APP:0 帖子:8 回复:17 积分:478

已加入社区[2446]天

小程序开发大白。

作者详情》
Top