微信小程序> 微信小程序——WXSS常用属性

微信小程序——WXSS常用属性

浏览量:8186 时间: 来源:疯狂的Little_Bee

最近在弄微信小程序,官方写的东西对于文档来说算是很全的了。
不过,当你像我一样,想写微信小程序的时候依次了解了一下
微信小程序的组件:
https://developers.weixin.qq.com/miniprogram/dev/component/
然后了解了一下微信小程序的Api:
https://developers.weixin.qq.com/miniprogram/dev/api/
最后又看了一下微信小程序的框架:
https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
发现,里面关于如果写UI介绍的太少了。

微信小程序的UI是通过wxml里写完组件后,绑定wxss里面的属性,当然,你也可以在wxml里面直接绑定属性,不过要注意先后顺序,属性是会覆盖的,同list里面的赋值一样,当遇到同名的情况下,是会将原来的属性进行覆盖。

我这里列举一些UI比较常用的属性,不一一例举了,后面附带些自己对属性的了解,如果你想了解更多关于CSS的属性的话,
推荐使用以下网站:
http://www.runoob.com/cssref/css-reference.html

好了,不说废话了,接下来就上属性:

1.width:组件宽度。百分比情况下会对父组件的总宽度进行百分比换算。

2.height:组件高度。同上。这俩其实算是最不该说的,但是也是最常用的。

3.background-color:所有组件都可以设置背景颜色,使用英语或者颜色值都可以  包含rgba(),rgb(),#FFFFFF,white

4.display:组件内的元素显示方式。通常设置为flex,使元素更加灵活,通过flex-direction:row/column 来设置行列。
更多关于display的属性,还是在上面的网站上看吧,其中还算比较常用的就是inline,inline-block(2.1新增)总结出来四个字就是"使成一行"。

5.flex-direction:设置为flex后,可以使用该属性。column为列排序;row为行排序。

6.align-items:(子行序列 justify 子纵序列)各元素在容器(盒子)内的位置。center居中,flex-start居首,flex-end居尾。
这个元素主要是容器(盒子)内的元素进行的

7.justify-content:(父纵序列 align-content 父行序列)元素周围留白的方式。space-around各元素周围留白。space-between元素与元素之间留白。center元素居中(该属性很厉害)在这里居中的话,align-items就会被屏蔽。这个说明了这个父亲不是白当的!

8.position:规定该元素/容器(盒子)定位方式。relative相对定位-以上一层盒子的左上角为(0,0),absolute绝对定位-以整个页面的左上角为(0,0)。fixed黏着定位-以整个页面的左上角为(0,0),不会随着屏幕的滚动而改变位置,悬浮窗、悬浮按钮之类的就是这样做的。

9.left、right、top、bottom:距离左、由、上、下容器(盒子)的距离,用来具体定位元素在容器(盒子)里的位置。单位同width。

10.z-index:设置该元素/盒子的层次顺序,变量取数字0~无穷大,类似ps中的图层顺序。越大的排在视图的前面,低级的会被高级的遮挡住。悬浮窗、悬浮组件的实现同样需要将顺序设置为全局中最高的。

11.padding:变量取值: 左、上、右、下的内边距距离。也可padding-left/right/top/bottom:x 。具体规定某个方向的内边距距离。按钮里面的文字我比较喜欢使用的属性。

12.margin:设置外边距。变量取值、具体设置、用法同上。

13.border-radius:变量取值:左上、右上、右下、左下角的圆角框的半径。不设置的情况下为0,即该元素/组件为方角。如果只赋值一个值,则四个角的圆角框半径相同。

14.border:设置元素/盒子的边框样式。变量取值:border-width-边框宽度, border-style-边框样式, border-color-边框颜色。border是统一设置四个边框(左右上下)的属性,而border-left/right/top/bottom是具体规定某个边框的样式。

PS如何在屏幕上画一条线??
申请一个view,属性设置为border-bottom/left:
border-bottom-width  线的粗细, border-bottom-style 样式,border-bottom-color 颜色。
bottom为横线,left为竖线。
bottom的时候该view的width要设置为你想要的线的长度;
而left的时候该view的height要设置为你想要的线的高度。
如果不设置width/height的话,则会继承父容器的width/height。

15.opacity:元素的不透明级别,取值0.0-1.0  从全透明-----完全不透明。运用:opacity+positio+z-index去规定一个view容器,就可以做屏幕上的遮罩层。

16.font:设置字体属性,所有的组件中只要含有字体元素都可以使用该属性,比如input、button、view等等。
常用四种:font-size:大小;color:颜色;font-style:字体样式;font-width:字体粗细。

17.line-height:常用于button中,设置按钮内字体的高度。

18.overflow: 指定容器内的内容溢出容器框了,发生的事情 visible: 不剪内容,显示在元素外(默认值), hidden:内容被修剪,其余内容不可见,scroll:内容被修剪,但可通过滚动查看 auto:如果内容被修剪,则可以通过滚动查看, inherit:属性继承父元素

19.float : left – 元素向左浮动。   right – 元素向右浮动。  none:默认值,元素不浮动 (如果设置设个属性还设置个none的话,我就不知道说啥好了) inherit: 继承父元素。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎