wxss解析

Posted 2020-09-08 阳台

一、概述

　　wxss是样式语言，用于描述wxml组件样式；

　　在css基础上扩展而来：

　　　　1、尺寸单位： rpx， rem

　　　　2、支持样式导入 @import语句导入外联样式表

　　note：  微信小程序一般使用iphone6 来视觉稿的标准；

二、选择器

　　rpx: 规定屏幕宽为750rpx

　　rem：规定屏幕宽度为20rem

　　样式之高度：height

　　样式之宽度: width

　　样式之内间距: padding

　　样式之外间距：margin

　　样式之边框: border

　　样式之字体颜色: color

 1 <view class="container">
 2     <button id="swiperbutton" type="default">测试 </button>
 3     <view style="border:1px solid:" > </view>
 4 </view>
 5 
 6 //id选择器
 7 #swiperbutton{
 8     margin: 0px
 9 }
10 
11 .text {
12     border: 1px solid red;  //边框
13     //boder-left, border-right, border-top, border-buttom
14     //height: 100rpx;
15     height: 10rem;
16     width: 750rpx-20 * 2 rpx;
17     //padding   #内容与边框的间距
18     //margin    #边框之外的间距
19 }