第6章 WXSS样式处理

第6章WXSS样式处理WXSS尺寸单位WXSS样式导入WXSS选择器WXSS布局01020403WXSS尺寸单位WXSS尺寸单位rpx（全称responsivepixel）单位在渲染过程中可以根据屏幕宽度进行自适应，会将rpx按比例换算成px，WXSS规定屏幕宽度为750px。例如在iPhone6中，屏幕宽度为375px，共有750个物理像素，换算成rpx就是750rpx=375px，由此可以得出，在iPhone6中1rpx=0.5px=1物理像素。WXSS尺寸单位设备rpx换算px(屏幕宽度/750)rpx换算px(750/屏幕宽度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus1rpx=0.552px1px=1.81rpxWXSS尺寸单位rem（全称rootem）单位与rpx的用法类似，WXSS规定屏幕为20rem，我们还以iPhone6为例。iPhone6的屏幕宽度为375px，换算成rem就是20rem=375px，由此得出，在iPhone6中1rem=18.75px。WXSS尺寸单位设备rpx换算px(屏幕宽度/750)rpx换算px(750/屏幕宽度)rem换算px(屏幕宽度/20)px换算rem(20/屏幕宽度)iPhone51rpx=0.42px1px=2.34rpx1rem=15.75px1px≈0.0635remiPhone61rpx=0.5px1px=2rpx1rem=18.75px1px=0.053remiPhone6Plus1rpx=0.552px1px=1.81rpx1rem=20.7px1px≈0.048remWXSS选择器WXSS选择器CSS选择器用于选择需要添加样式的页面元素，WXSS对CSS选择器属性也做了部分兼容。在WXSS中实现了CSS的部分选择器，其规则也和CSS一样，如果对CSS比较熟悉的话，可以快速掌握WXSS选择器的使用。WXSS选择器选择器样例描述.class.content选择所有拥有class=”content”的组件#id#demo选择拥有id=”demo”的组件elementview选择所有view组件element,elementview,checkbox选择所有文档的view和checkbox组件::afterview::after在view组件后边插入内容::beforeview::before在view组件前边插入内容WXSS选择器CSS选择器语法：选择器{样式属性:属性值;样式属性:属性值;}WXSS样式导入WXSS样式导入在小程序中，每个组件上都有一个style的公共属性，用于设置组件的样式。组件上的style属性定义的样式会在小程序运行时被解析，如果是非必要的情况，不建议直接将样式定义在组件的style属性中，这会影响页面渲染速度。WXSS样式导入内联样式示例代码：//index.wxml<viewclass="body"><viewclass="title">标题</view><viewclass="line-item">第1行内容；</view><viewclass="line-item">第2行内容；</view><viewstyle="font-size:30rpx;font-weight:bold;">第3行内容；</view></view>//index.wxss.body{border:1pxsolid#000;height:30%;text-align:center;}.title{font-size:40rpx;font-weight:600;}.line-item{font-size:30rpx;line-height:80rpx;}WXSS样式导入在实际项目开发中，为了方便统一管理样式属性，我们会将WXSS文件按照不同的模块拆分成多个样式文件，也会封装公共的样式文件来减少代码的冗余。这种样式模块化的操作就需要使用到@import样式导入语句。WXSS样式导入外联样式导入示例代码：//index.wxss@import“./base.wxss”;.body{border:1pxsolid#000;height:30%;text-align:center;}WXSS布局WXSS布局盒子模型也是CSS布局的基础，每个盒子都是由内容（content）、内边距（padding）、边框（border）、外边距（margin）这四个部分组成。这些盒子模型看起来像个矩形框，矩形框中的所有项默认宽度均为0。WXSS布局盒子模型WXSS布局浮动不完全是定位，同时它也不是正常流布局，通过设置float属性，浮动框可以向左或者向右移动，直到其外边缘碰到父元素边框或浮动框的边框为止。由于浮动框不在正常文档流中，所以其表现与普通文档流中的表现不一样，其他内容会环绕在浮动框的周围。WXSS布局浮动与定位WXSS布局Flex布局主要由容器和项目构成，采用Flex布局的元素，称为Flex容器（flexcontainer），它的所有直接子元素自动成为容器成员，称为Flex项目（flexitem）。可以设置display:flex或display:inline-flex将任何一个元素指定为Flex布局。WXSS布局Flex弹性盒子WXSS布局Flex容器支持的属性有：display：通过设置display属性，指定元素是否为Flex布局。flex-direction：指定主轴方向，决定了项目的排列方式。flex-wrap：排列换行设置。flex-flow:flex-direction和flex-wrap的简写形式。justify-content：定义项目在主轴上的对齐方式。align-items：定义项目在交叉轴上的对齐方式。align-content：定义多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。WXSS布局Flex项目支持的属性有：order：定义项目的排序顺序。flex-grow：定义项目的放大比例。flex-shrink：