微信小程序中wxml和wxss的样式说明，彻底搞定布局排版
对于css不熟悉的Android程序员来说，开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了，它们两者相当于android的布局文件，其中wxml指定了界面的框架结构，而wxss指定了界面的框架及元素的显示样式。
一、wxml
界面结构wxmL比较容易理解，主要是由八大类基础组件构成：
| 一、视图容器(View Container)： | 二、基础内容(Basic Content) | ||
| 组件名 | 说明 | 组件名 | 说明 |
| view | 视图容器 | icon | 图标 |
| scroll-view | 可滚动视图容器 | text | 文字 |
| swiper | 可滑动的视图容器 | progress | 进度条 |
| 三、表单组件(Form) | 四、操作反馈组件(Interaction) | ||
| 组件名 | 说明 | 组件名 | 说明 |
| button | 按钮 | action-sheet | 上拉菜单 |
| form | 表单 | modal | 模态弹窗 |
| input | 输入框 | progress | 进度条 |
| checkbox | 多项选择器 | toast | 短通知 |
| radio | 单项选择器 | 五、导航(Navigation) | |
| picker | 列表选择器 | 组件名 | 说明 |
| slider | 滑动选择器 | navigator | 应用内跳转 |
| switch | 开关选择器 | ||
| label | 标签 | ||
| 六、多媒体(Media) | 七、地图(Map) | ||
| 组件名 | 说明 | 组件名 | 说明 |
| audio | 音频 | map | 地图 |
| image | 图片 | ||
| video | 视频 | ||
| 八、画布(Canvas) | |||
| 组件名 | 说明 | ||
| canvas | 画布 | ||
关于这八大类的属性和具体用法可参考以下参考文献链接：
http://www.w3cschool.cn/weixinapp/itz51q8o.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
二、wxss
wxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。
wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：
1.尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下：
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
2.样式导入
可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。
例如：
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import “other.wxss“;
.content_text:{
margin:15px;
}
app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对全局样式中的相同属性会覆盖。
对于微信小程序wxss样式的使用来说，其实大部分都和css样式一致，下面简单的进行介绍一下：
| wxss样式属性 | ||
| 一、wxss display(显示) | ||
| 属性 | 说明 | |
| flex | 多栏多列布局 | flex-direction:row/column |
| inline-block | 行内块元素 | |
| inline | 此元素会被显示为内联元素，元素前后没有换行符 | |
| inline-table | 作为内联表格来显示（类似 <table>），表格前后没有换行符 | |
| inline-flex | 将对象作为内联块级弹性伸缩盒显示 | |
| none | 此元素不会被显示 | |
| block | 此元素将显示为块级元素，此元素前后会带有换行符 | |
| list-item | 此元素会作为列表显示 | |
| table | 会作为块级表格来显示（类似 <table>），表格前后带有换行符 | |
| table-caption | 作为一个表格标题显示（类似 <caption>） | |
| table-cell | 作为一个表格单元格显示（类似 <td> 和 <th>） | |
| table-column | 作为一个单元格列显示（类似 <col>） | |
| table-column-group | 作为一个或多个列的分组来显示（类似 <colgroup>） | |
| table-row | 作为一个表格行显示（类似 <tr>） | |
| table-row-group | 作为一个或多个行的分组来显示（类似 <tbody>） | |
| table-header-group | 作为一个或多个行的分组来显示（类似 <thead>） | |
| table-footer-group | 作为一个或多个行的分组来显示（类似 <tfoot>） | |
| inherit | 从父元素继承 display 属性的值 | |
| flex:多栏多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml | ||
| 二、wxss position(定位) | ||
| 属性 | 说明 | |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 | |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。 |
|
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 | |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） | |
| inherit | 规定应该从父元素继承 position 属性的值 | |
| 三、wxss float(浮动) | ||
| 属性 | 说明 | |
| left | 元素向左浮动 | |
| right | 元素向右浮动 | |
| none默认值 | 元素不浮动，并会显示在其在文本中出现的位置。 | |
| inherit | 规定应该从父元素继承 float 属性的值。 | |
| 四、wxss background(背景) | ||
| 属性 | 说明 | 语法(属性值) |
| background | 简写属性，作用是将背景属性设置在一个声明中 | background: color position size repeat origin clip attachment image; |
| background-color | 指定要使用的背景颜色 | |
| background-position | 指定背景图像的位置 | background-position:center |
| background-size | 指定背景图片的大小 | background-size:80px 60px;宽度 高度 |
| background-repeat | 指定如何重复背景图像 | repeat,repeat-x,repeat-y,no-repeat,inherit |
| background-origin | 指定背景图像的定位区域 |
padding-box 背景图像填充框的相对位置 border-box 背景图像边界框的相对位置 content-box 背景图像的相对位置的内容框 |
| background-clip | 指定背景图像的绘画区域 | 属性值，同上 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 |
scroll 背景图片随页面的其余部分滚动。这是默认 fixed 背景图像是固定的 inherit 指定background-attachment的设置应该从父元素继承 local 背景图片随滚动元素滚动 |
| background-image | 指定要使用的一个或多个背景图像 |
url(‘URL’) 图像的URL none 无图像背景会显示。这是默认 inherit 指定背景图像应该从父元素继承 |
| 五、wxss border(边框) | ||
| 属性 | 说明 | 语法(属性值) |
| border | 简写属性，用于把针对四个边的属性设置在一个声明 | border:5px solid red; |
| border-width | 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度 | border-top-width 上右下左边框厚度 属性值：thin medium thick length |
| border-style | 设置元素所有边框的样式，或者单独地为各边设置边框样式。 | border-top-width 上右下左边框样式 属性值：solid,dashed,dotted,double等 |
| border-color | 元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色 | border-top-width 上右下左边框颜色 |
| 六、xss 轮廓（outline） | ||
| 属性 | 说明 | 语法(属性值) |
| outline | 在一个声明中设置所有的外边框属性 | outline: outline-color, outline-style, outline-width |
| outline-color | 设置外边框的颜色 | |
| outline-style | 设置外边框的样式。 | 属性值：solid,dashed,dotted,double等 |
| outline-width | 设置外边框的宽度 | 属性值：thin medium thick length |
| 七、xss 文本属性（text） | ||
| 属性 | 说明 | 语法(属性值) |
| color | 设置文本颜色 | |
| direction | 设置文本方向。 | ltr:文本方向从左到右;rtl:文本方向从右到左 |
| letter-spacing | 设置字符间距 | |
| line-height | 设置行高 | |
| text-align | 对齐元素中的文本 |
left：把文本排列到左边。默认值，由浏览器决定。 right：把文本排列到右边。 center：把文本排列到中间。 justify：实现两端对齐文本效果。 inherit: 规定应该从父元素继承 text-align 属性的值。 |
| text-decoration | 向文本添加修饰 |
underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 |
| text-indent | 缩进元素中文本的首行 | |
| text-shadow | 设置文本阴影 |
text-shadow: h-shadow v-shadow blur color; h-shadow:水平阴影的位置,允许负值; v-shadow:垂直阴影的位置,允许负值; blur:模糊的距离; color:阴影的颜色 |
| text-transform | 控制元素中的字母 |
capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。 |
| unicode-bidi | 设置或返回文本是否被重写 | |
| vertical-align | 设置元素的垂直对齐 | |
| white-space | 设置元素中空白的处理方式 | |
| word-spacing | 设置字间距 | |
| 八、xss 字体属性（font） | ||
| 属性 | 说明 | 语法(属性值) |
| font | 在一个声明中设置所有字体属性 | font:font-style font-variant font-weight font-size/line-height font-family(按顺序) |
| font-style | 指定文本的字体样式 |
normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。 |
| font-variant | 以小型大写字体或者正常字体显示文本 |
normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承 font-variant 属性的值。 |
| font-weight | 指定字体的粗细 |
normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 inherit 规定应该从父元素继承字体的粗细。 |
| font-size | 指定文本的字体大小 |
smaller 把 font-size 设置为比父元素更小的尺寸。 larger 把 font-size 设置为比父元素更大的尺寸。 length 把 font-size 设置为一个固定的值。 % 把 font-size 设置为基于父元素的一个百分比值。 |
| font-family | 指定文本的字体系列 | |
| 九、xss margin(外边距)（margin） | ||
| 属性 | 说明 | 语法(属性值) |
| margin | 在一个声明中设置所有外边距属性。 | margin:10px 5px 15px 20px;(上边距，右边距，下边距，左边距) |
| margin-top | 设置元素的上外边距。 | |
| margin-right | 设置元素的右外边距。 | |
| margin-bottom | 设置元素的下外边距。 | |
| margin-left | 设置元素的左外边距 | |
| 十、xss padding(填充)（padding） | ||
| 属性 | 说明 | 语法(属性值) |
| padding | 使用缩写属性设置在一个声明中的所有填充属性 | padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充) |
| padding-top | 设置元素的顶部填充。 | |
| padding-right | 设置元素的右部填充 | |
| padding-bottom | 设置元素的底部填充 | |
| padding-left | 设置元素的左部填充 | |
| 十一、xss 选择器 | ||
| 选择器 | 样例 | 样例描述 |
| .class(类选择器) | .intro | 选择所有拥有class=”intro”的组件 |
| #id(id选择器) | #firstname | 选择拥有id=”firstname”的组件 |
| element | view | 选择所有view组件 |
| element, element | view checkbox | 选择所有文档的view组件和所有的checkbox组件 |
| ::after | view::after | 在view组件后边插入内容 |
| ::before | view::before | 在view组件前边插入内容 |
有一些属性值太多且实际应用的比较少 可以参考w3cschool的css文档：
http://www.w3cschool.cn/css/css-tutorial.html
对于微信小程序的文档手册可参考以下链接：
http://www.w3cschool.cn/weixinapp/9wou1q8j.html
微信小程序中wxml和wxss的样式说明，彻底搞定布局排版相关推荐
- 微信小程序中尺寸单位rpx及样式的用法
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375p ...
- 微信小程序的wxml、wxss、js、json的理解
微信小程序的基础学习(2) 小程序的有些语言,有时候按照官方的解释来理解非常的吃力,会把初学者搞得很懵很难受,不知道从何下手! 文件夹下四个文件的理解: 文件 中文解释(个人理解) .wxml 小程序 ...
- 微信小程序中wxml的标签说明
对于不熟悉web开发的童鞋来说,开发微信小程序会遇到一个比较大的困难就是界面的排版问题了.其中wxml文件中的很多标签都需要慢慢的去熟悉,下面我就列出常用的标签及其分类.能够帮助之前没有经历过微信小程 ...
- 微信小程序中wxml中用data-id传出的数据在js中的获取方法
wxml: view bindtap="touch" data-id="{{id}}" //{{id}}这里的id为js里面设置的数据: 需要注意的是,这里的d ...
- 微信小程序中wxml中用data-id传出的数据在js中的获取方法。
wxml: view bindtap="touch" data-id="{{id}}" //{{id}}这里的id为js里面设置的数据: 需要注意的是,这里的d ...
- 微信小程序中 button丢失其默认样式
ps: 微信官方没有提供 打开客服的api 所以只能通过button来打开客服 实现思路: 1.让botton按钮 宽度高度 百分百充斥整个盒子 2. 外面盒子设置相对定位 button设置绝对定位 ...
- 微信小程序中如何改变switch的样式
.wx-switch-input{ width:80rpx !important; height:48rpx !important; } /白色样式(false的样式)/ .wx-switch-inp ...
- 微信小程序（WXML语法、WXSS样式、事件系统、WXS脚本语法）
三.微信小程序视图层 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示.将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. ●WXML(WeiXin Markup languag ...
- 微信小程序在 wxml 文件中使用 Array.includes 方法
微信小程序中不能直接在wxml使用includes,否则 不起作用 需要通过wxs使用: 1.在wxs下创建一个includes.wxs var includes = function (array, ...
最新文章
- ASP.NET MVC 学习1
- 数据结构（字典，跳跃表）、使用场景（计数器、缓存、查找表、消息队列、会话缓存、分布式锁）、Redis 与 Memcached、 键的过期时间、数据淘汰策略、持久化（RDB、AOF）
- ASP.NET Core 实战：使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
- 木炭怎么获得_木炭机一体化流程中制做木炭是怎么完成的
- linux 25端口漏洞,一封突如其来的邮件443端口漏洞
- 新电脑怎么分盘_【磁盘分区教程】如何给电脑进行分区？
- lxml简单用法 解析网页
- MySQL安装配置教程（超级详细、保姆级）
- 用JAVA不失精度计算等额本息还款列表
- 快速获取Excel表格中的所有图片
- 利用朴素贝叶斯算法解决“公园凉鞋问题”
- 【LOJ2863】「IOI2018」组合动作
- 一个可以为你的任何创作加速的神软件
- bzoj1022 小约翰的游戏 anti-SG游戏
- 灵魂有香气的女子李筱懿：张弛有度做事，努力也需理智
- 基于CNN实现视频动作分类任务
- 批处理获取系统安装时间/系统开机时间/电脑唤醒时间及开机使用时间（二）完成
- JAVA一条龙持续集成方案（完整步骤+脚本+配置）
- 软件定义网络（SDN）为网络交换机厂商带来商机
- 大班音乐机器人反思_大班优秀音乐教案《机器人》含反思