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

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

width：组件宽度。百分比情况下会对父组件的总宽度进行百分比换算。单位：1px=2rpx（rpx可以在不同屏幕尺寸的设备上都能尽量保持一样的比例大小。px则不行）%，hv。
height：组件高度。同上。
background-color：所有组件都可以设置背景颜色，就算是text也可以，不过如果没有设置宽高度，就没有办法渲染颜色。变量取值：rgb(a,b,c)（a,b,c取值0~255）；#000000~ffffff（十六进制取色），RED/BLUE/PINK（英文单词对应的各种颜色）
display：组件内的元素显示方式。通常设置为flex，使元素更加灵活。
flex-direction：设置为flex后，可以使用该属性。column为列排序；row为行排序。
align-items：各元素在盒子内的位置。center居中，flex-start居首，flex-end居尾。
justify-content：元素周围留白的方式。space-around各元素周围留白。space-between元素与元素之间留白。center元素居中（该属性很厉害）在这里居中的话，align-items就会被屏蔽。
position：规定该元素/盒子定位方式。relative相对定位-以上一层盒子的左上角为(0,0)，absolute绝对定位-以整个页面的左上角为(0,0)。fixed黏着定位-以整个页面的左上角为(0,0)，不会随着屏幕的滚动而改变位置，悬浮窗、悬浮按钮之类的就是这样做的。
left、right、top、bottom：距离左、由、上、下盒子的距离，用来具体定位元素在盒子里的位置。单位同width。hv似乎不适用，我没有尝试过。设置left的时候就没有必要设置right，因为你只需要让该组件距离left多少，而并不需要知道它距离right多少，同理top、bottom。
z-index：设置该元素/盒子的层次顺序，变量取数字0~无穷大，类似ps中的图层顺序。越大的排在视图的前面，低级的会被高级的遮挡住。悬浮窗、悬浮组件的实现同样需要将顺序设置为全局中最高的。
padding：变量取值： a b c d 。分别代表该元素距离所在盒子的左、上、右、下的内边距距离。也可padding-left/right/top/bottom：a 。具体规定某个方向的内边距距离。
margin：设置外边距。变量取值、具体设置、用法同上。
border-radius：变量取值：a b c d。代表左上、右上、右下、左下角的圆角框的半径。不设置的情况下为0，即该元素/组件为方角。如果只赋值a，则a=b=c=d。单位px、rpx。PS一句复杂定义：如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的（官方定义，基本废话难以理解所以可以忽略，因为你完全可以 a 0 b 0这样去赋值，很方便）
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。
opacity：元素的不透明级别，取值0.0~1.0，对应完全透明~完全不透明。运用：opacity+positio+z-index去规定一个view容器，就可以做屏幕上的遮罩层，再用background-color+width+height，去规定容器的颜色、大小。
font：设置字体属性，所有的组件中只要含有字体元素都可以使用该属性，比如input、button、view等等。常用四种：font-size:大小;color:颜色;font-style:字体样式;font-width:字体粗细。
line-height：常用于button中，设置按钮内字体的高度。
。。。。未完待续

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

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

日后有空，再来补充

微信小程序---wxss常用属性相关推荐

微信小程序wxss布局属性-全
尺寸 1.高度 2.宽度 3.设置方法像素值百分比背景 1.backgroung 2.background-attachment:图像是否固定,或随着页面的其余部分滚动 3.bacground- ...
微信可以识别哪些HTML语言,微信小程序一些常用标签与HTML的对应关系
参考地址: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/ 微信小程序中的常用标签: view(视图容器). ...
微信小程序开发常用的npm包
本篇主要介绍在微信小程序中使用 npm 包以及使用微信开发者工具开发微信小程序时最常用的 Vant Weapp 小程序 UI 组件库.miniprogram-api-promise 将 API Pro ...
style 对象微信小程序_微信小程序wxss设置样式
对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Conta ...
微信小程序：常用功能8——小程序视频组件中的弹幕功能
微信小程序:常用功能8--小程序视频组件中的弹幕功能昨天我们刚说了微信小程序的视频组件和分享功能微信小程序:常用功能8--在小程序添加视频组件,并将页面分享到朋友圈,今天想把弹幕功能说一下,但是感觉 ...
微信小程序实现watch属性监听数据变化
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...
微信小程序之常用js脚本
微信小程序之常用的JavaScript脚本由于最近项目需要,自(bei)愿(po)加入前端微信小程序开发,前后一起抓,总结下最近几个月小程序中常用的一些js脚本,仅供参考,路过的各位,留下你们的宝贵 ...
微信小程序：常用功能5——在线客服功能的实现
微信小程序:常用功能5--在线客服功能的实现微信小程序的客服功能比较纯熟,非常简单易用,只要在公众平台小程序账号中设置好相关客服人员,基本用户就能实现与客服人员的实时对话. 首先登陆微信公众平台小程 ...
微信小程序 wxss之 background 属性
1. backgroundcolor <view class="teststycleone">这是一个测试</view> .teststycleone{ w ...

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

微信小程序---wxss常用属性相关推荐

最新文章

热门文章