熟悉基础知识，掌握Flex布局，了解动态修改样式、引入less预编译的方法
通过本节，你将学会：
教程文档对应的项目代码文件：src/StyleLayout目录
盒模型
框架使用border-box模型，暂不支持content-box模型与box-sizing属性
布局所占宽度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
长度单位
框架目前仅支持长度单位px和%。与传统web页面不同，px是相对于项目配置基准宽度的单位，已经适配了移动端屏幕，其原理类似于rem
开发者只需按照设计稿确定框架样式中的px值即可。设计稿1px与框架样式1px转换公式如下：
设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度
项目配置基准宽度：项目的配置文件(/src/manifest.json)中config.designWidth的值，默认为750
示例如下：
若设计稿宽度为640px，元素A在设计稿上的宽度为100px，实现的两种方案如下：
方案一：
修改项目配置基准宽度：将项目配置基准宽度设置为设计稿基准宽度，则框架样式1px等于设计稿1px
设置项目配置基准宽度，在项目的配置文件(/src/manifest.json)中，修改config.designWidth：{
"config": {
"designWidth": 640
}
}
设置元素A对应的框架样式：width: 100px;
方案二：
不修改项目配置基准宽度：若当前项目配置的项目配置基准宽度为750，设元素A的框架样式xpx，由转换公式得：100 / 640 = x / 750
设置元素A对应的框架样式：width: 117px;
设置定位
1060 开始，position 将支持三种属性值：relative、absolute 和 fixed，并且默认值为 relative，入门可以参考 CSS 文档
设置样式
开发者可以使用内联样式、tag选择器、class选择器、id选择器来为组件设置样式
同时也可以使用并列选择、后代选择器设置样式
示例如下：
内联样式
ID选择器
class选择器
tag选择器
.tutorial-page {
flex-direction: column;
}
/* tag选择器 */
text {
color: #0000FF;
}
/* class选择器(推荐) */
.title {
color: #00FF00;
}
/* ID选择器 */
#title {
color: #00A000;
}
/* 并列选择 */
.title, #title {
font-weight: bold;
}
/* 后代选择器 */
.tutorial-page text {
font-size: 42px;
}
/* 直接后代选择器 */
.tutorial-page > text {
text-decoration: underline;
}
export default {
onInit () {
this.$page.setTitleBar({ text: '设置样式' })
}
}
通用样式
通用样式如 margin,padding 等属性可以点击此处
Flex布局示例
框架本身的布局使用Flex布局模型，关于具体Flex布局教程可以参考外部文档：Flex 布局教程
div组件为最常用的Flex容器组件，具有Flex布局的特性；text、a、span、label组件为文本容器组件，其它组件不能直接放置文本内容
示例如下：
item1
item2
.tutorial-page {
/* 交叉轴居中 */
align-items: center;
/* 纵向排列 */
flex-direction: column;
}
.tutorial-page > .item {
/* 有剩余空间时，允许被拉伸 */
/*flex-grow: 1;*/
/* 空间不够用时，不允许被压缩 */
flex-shrink: 0;
/* 主轴居中 */
justify-content: center;
width: 200px;
height: 100px;
margin: 10px;
background-color: #FF0000;
}
export default {
onInit () {
this.$page.setTitleBar({ text: 'Flex布局示例' })
}
}
动态修改样式
动态修改样式有多种方式，与传统前端开发习惯一致，包括但不限于以下：
修改class：更新组件的class属性中使用的变量的值
修改内联style：更新组件的style属性中的某个CSS的值
修改绑定的对象：通过绑定的对象控制元素的样式
修改绑定的样式字符串：通过样式字符串控制元素的样式
点击我修改文字颜色
点击我修改文字颜色
点击我修改文字颜色
点击我修改文字颜色
.normal-text {
font-weight: bold;
}
.text-blue {
color: #0faeff;
}
.text-red {
color: #f76160;
}
export default {
private: {
className: 'text-blue',
textColor: '#0faeff',
styleObj: {
color: 'red'
},
styleText: 'color: blue'
},
onInit () {
this.$page.setTitleBar({ text: '动态修改样式' })
},
changeClassName () {
this.className = 'text-red'
},
changeInlineStyle () {
this.textColor = '#f76160'
},
changeStyleObj () {
this.styleObj = {
color: 'yellow'
}
},
changeStyleText () {
this.styleText = 'color: green'
}
}
引入less/scss预编译
less 篇
less 语法入门请参考less 文档学习
使用 less 请先安装相应的类库：less、less-loader，npm i less less-loader
详见文档style 样式 --> 样式预编译；然后在
less示例!
/* 引入外部less文件 */
@import './style.less';
/* 使用less */
scss 篇
scss 语法入门请参考scss 中文官网学习
使用 scss 请在快应用项目下执行以下命令安装相应的类库：node-sass、sass-loader，npm i node-sass sass-loader
详见文档style 样式 --> 样式预编译；然后在
less示例!
/* 引入外部scss文件 */
@import './style.scss';
/* 使用scss */
使用 postcss 解析 css
快应用支持 postcss 来解析 css，看 postcss 的官方文档都知道，postcss 可以采用类似 less，sass 的语法来解析 css 了，比如支持变量，嵌套，定义函数等功能了。
使用 postcss 解析 css 分为 3 个步骤：
1.安装对应的 loader
npm i postcss-loader precss@3.1.2 -D
2.在项目的根目录新建一个 postcss.config.js，增加如下内容：module.exports = {
plugins: [require('precss')]
}
其中 precss 为 postcss 的插件。
3.在页面对应的 style 标签上增加 lang="postcss"，如下
/* 使用postcss */
.tutorial-page {
justify-content: center;
background-color: #00beaf;
#title {
color: #FF0000;
}
}
这样你就可以在 css 里面书写对应的代码了。
说明：
如果你想支持更多的语法格式，可以在 postcss.config.js 文件里面添加更多的插件，关于 postcss 的插件见插件地址。
总结
了解页面的样式与布局后，开发者就可以着手设计开发页面了