小程序中wxml和wxss的样式，彻底搞定布局排版
⼩程序中wxml和wxss的样式，彻底搞定布局排版
对于css不熟悉的程序员来说，开发⼩程序⾯临的⼀个⽐较困难的问题就是界⾯的排版了。⼩程序的排版就跟wxml和wxss有关了，它们两者相当于布局⽂件，其中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画布
关于这⼋⼤类的属性和具体⽤法可参考以下参考⽂献链接：
⼆、wxss
跟女生聊天的话题wxml理解起来容易，但光搭好了框架，并不能达到我们想要的界⾯效果，这就需要⽤到wxss样式了。
wxss样式决定了组件应该如何显⽰，并在css的基础上做了⼀些功能扩展，主要包括：
1.尺⼨单位
超大特大城市最新名单
rpx（responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx。⼀般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下：
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6s1rpx = 0.552px1px = 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 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：多栏多列布局 www.360doc/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组件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。