《三》微信小程序中的 WXSS

WXSS 用于描述页面的样式。

不支持 \n 的换行，可以添加 css 属性 white-space:pre-wrap; 来让其支持；但是 是支持的。

超出文本显示省略号：

.box {
   width: xxx; // 宽度
   display: -webkit-box; // 设置为弹性盒子。非标准属性，所以要加兼容性代码
   -webkit-box-orient: vertical;  // 从上到下垂直排列子元素
   -webkit-line-clamp: 1; // 显示几行文本。设置为第一行超出后显示省略号
   overflow: hidden; // 超出隐藏
   text-overflow: ellipsis; // 显示省略号
   word-break: break-all; // 强制英文单词自动换行
}

组件上支持使用 class、style 属性来控制样式。

1. class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

   静态的样式统一写到 class 中。

   // index.html
   静态 class
   动态 class
   静态 class 和动态 class
   
   // index.wxss
   .nav {
   	color: gray;
   }
   .activitedNav {
   	color: red;
   }
   
   // index.js
   data: {
   	activited: 0，
   }
   

2. style：style 接收动态的样式，在运行时会进行解析。

   要尽量避免将静态的样式写进 style 中，以免影响渲染速度。

   // index.wxml
   静态 style
   动态 style
   静态和动态 style
   
   // index.js
   data:{
   	color: '#FFF'
   }
   

尺寸单位：

rpx：可以根据屏幕宽度进行自适应。

微信小程序规定屏幕宽为 750rpx。例如：在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 750 物理像素 = 375px，1rpx = 1 物理像素 = 0.5px。

样式导入：

使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** index.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

全局样式与局部样式：

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。