微信小程序——WXSS常用属性_小程序view的长度在wxss怎么设置

最近在弄微信小程序，官方写的东西对于文档来说算是很全的了。
不过，当你像我一样，想写微信小程序的时候依次了解了一下
微信小程序的组件：
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: 继承父元素。