微信小程序---wxss常用属性

以下内容均为个人理解，主要用于备忘
—–前言即废话篇——-
微信小程序的代码和网页编程非常相似，两者都有JS、JSON文件，同时WXML=>HTML，WXSS=>CSS。
附上两条链接：w3school关于CSS的完整教程，w3school关于HTML的完整教程。
因为相似，所以熟悉网页编程的就能够很快上手小程序的编写。

1. width：组件宽度。百分比情况下会对父组件的总宽度进行百分比换算。单位：1px=2rpx（rpx可以在不同屏幕尺寸的设备上都能尽量保持一样的比例大小。px则不行）%，hv。

2. height：组件高度。同上。

3. background-color：所有组件都可以设置背景颜色，就算是text也可以，不过如果没有设置宽高度，就没有办法渲染颜色。变量取值：rgb(a,b,c)（a,b,c取值0~255）；#000000~ffffff（十六进制取色），RED/BLUE/PINK（英文单词对应的各种颜色）

4. display：组件内的元素显示方式。通常设置为flex，使元素更加灵活。

5. flex-direction：设置为flex后，可以使用该属性。column为列排序；row为行排序。

6. align-items：各元素在盒子内的位置。center居中，flex-start居首，flex-end居尾。

7. justify-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。hv似乎不适用，我没有尝试过。设置left的时候就没有必要设置right，因为你只需要让该组件距离left多少，而并不需要知道它距离right多少，同理top、bottom。

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

11. padding：变量取值： a b c d 。分别代表该元素距离所在盒子的左、上、右、下的内边距距离。也可padding-left/right/top/bottom：a 。具体规定某个方向的内边距距离。

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

13. border-radius：变量取值：a b c d。代表左上、右上、右下、左下角的圆角框的半径。不设置的情况下为0，即该元素/组件为方角。如果只赋值a，则a=b=c=d。单位px、rpx。PS一句复杂定义：如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的（官方定义，基本废话难以理解所以可以忽略，因为你完全可以 a 0 b 0这样去赋值，很方便）

14. border：设置元素/盒子的边框样式。变量取值：a b c。a-边框宽度，b-边框样式,c-边框颜色。border是统一设置四个边框（左右上下）的属性，而border-left/right/top/bottom是具体规定某个边框的样式。PS很重要：如何在屏幕上画一条线？？申请一个view，属性设置为border-bottom/left:a b c。bottom为横线，left为竖线。a为线的粗细，b为样式，c为颜色。bottom的时候该view的width要设置为你想要的线的长度；而left的时候该view的height要设置为你想要的线的高度。如果不设置width/height的话，则会继承父容器的width/height。

15. opacity：元素的不透明级别，取值0.0~1.0，对应完全透明~完全不透明。运用：opacity+positio+z-index去规定一个view容器，就可以做屏幕上的遮罩层，再用background-color+width+height，去规定容器的颜色、大小。

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

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

18. 。。。。未完待续

---

以上就是个人在实习期间入坑小程序经手的项目训练中总结出来的，CSS属性非常非常非常多，列举的17条属性是项目编写过程中出场率90%以上的，不同属性之间的联合就可以变幻出非常华丽的页面，不过这就需要对CSS有一定掌握才能实现的吧。内容参考了很多CSDN前辈的技巧。

喜欢的点赞留言，不足或者表达不明确的欢迎提问！

日后有空，再来补充