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 |
可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。
例如：
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
margin:15px;
}
-
3.wxss样式属性
1> 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
2> 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 属性的值 |
3> wxss float(浮动)
| 属性 |
说明 |
| left |
元素向左浮动 |
| right |
元素向右浮动 |
| none默认值 |
元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit |
规定应该从父元素继承 float 属性的值。 |
4> wxss background(背景)
| 属性 |
说明 |
语法(属性值) |
| background |
简写属性，作用是将背景属性设置在一个声明中 |
background: color position size repeat origin clip attachment image; |
| background-color |
指定要使用的背景颜色 |
#00000000 |
| 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--指定背景图像应该从父元素继承 |
5> 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 上右下左边框颜色 |
6> xss 轮廓（outline）
| 属性 |
说明 |
语法(属性值) |
| outline |
在一个声明中设置所有的外边框属性 |
outline: outline-color, outline-style, outline-width |
| outline-color |
设置外边框的颜色 |
#00000000 |
| outline-style |
设置外边框的样式。 |
属性值：solid,dashed,dotted,double等 |
| outline-width |
设置外边框的宽度 |
属性值：thin medium thick length |
7> xss 文本属性（text）
| 属性 |
说明 |
语法(属性值) |
| color |
设置文本颜色 |
#000000 |
| 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。hshadow:水平阴影的位置,允许负值。v-shadow:垂直阴影的位置,允许负值。blur:模糊的距离。color:阴影的颜色。 |
| text-transform |
控制元素中的字母 |
capitalize 文本中的每个单词以大写字母开头。uppercase 定义仅有大写字母。lowercase 定义无大写字母，仅有小写字母。 |
| unicode-bidi |
设置或返回文本是否被重写 |
'' |
| vertical-align |
设置元素的垂直对齐 |
middle：子元素的中线与兄弟元素的基线对齐。若兄弟元素都设置该项，则居中对齐 |
| white-space |
设置元素中空白的处理方式 |
nowrap：强制不换行。pre-wrap：文本保留空格和回车 |
| word-spacing |
设置字间距 |
数值 |
8> xss 字体属性（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 |
指定文本的字体系列 |
'' |
9> xss margin(外边距)（margin）
| 属性 |
说明 |
语法(属性值) |
| margin |
在一个声明中设置所有外边距属性。 |
margin:10px 5px 15px 20px;(上边距，右边距，下边距，左边距) |
| margin-top |
设置元素的上外边距。 |
'' |
| margin-right |
设置元素的右外边距。 |
'' |
| margin-bottom |
设置元素的下外边距。 |
'' |
| margin-left |
设置元素的左外边距 |
'' |
10> xss padding(填充)（padding）
| 属性 |
说明 |
语法(属性值) |
| padding |
使用缩写属性设置在一个声明中的所有填充属性 |
padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充) |
| padding-top |
设置元素的顶部填充。 |
'' |
| padding-right |
设置元素的右部填充 |
'' |
| padding-bottom |
设置元素的底部填充 |
'' |
| padding-left |
设置元素的左部填充 |
'' |
11> 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组件前边插入内容 |
另：
//单行 显示：
overflow:hidden; //超出一行文字自动隐藏
text-overflow:ellipsis;//文字隐藏后添加省略号
white-space:nowrap; //强制不换行
//显示多行文字，但不显示完全：
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
font-size: 28rpx;//自适应字体
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;//设置 需要显示的行数
