第6章 WXSS样式处理教学课件微信小程序开发与实战.pptx

《第6章 WXSS样式处理教学课件微信小程序开发与实战.pptx》由会员分享，可在线阅读，更多相关《第6章 WXSS样式处理教学课件微信小程序开发与实战.pptx（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第6章 WXSS样式处理教学课件微信小程序开发与实战第第6章章 WXSS样式式处理理WXSS尺寸单位WXSS样式导入WXSS选择器WXSS布局01020403WXSS尺寸尺寸单位位WXSS尺寸单位rpx（全称 responsive pixel）单位在渲染过程中可以根据屏幕宽度进行自适应，会将rpx按比例换算成px，WXSS规定屏幕宽度为750px。例如在iPhone6中，屏幕宽度为375px，共有750个物理像素，换算成rpx就是750rpx=375px，由此可以得出，在iPhone6中1rpx=0.5px=1物理像素。WXSS尺寸单位设备rpx换算px(屏幕宽度/750)rpx换算px(75

2、0/屏幕宽度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6 Plus1rpx=0.552px1px=1.81rpxWXSS尺寸单位rem（全称 root em）单位与rpx的用法类似，WXSS规定屏幕为20rem，我们还以iPhone6为例。iPhone6的屏幕宽度为375px，换算成rem就是20rem=375px，由此得出，在iPhone6中1rem=18.75px。WXSS尺寸单位设备设备rpxrpx换算换算pxpx(屏幕宽度屏幕宽度/750)/750)rpxrpx换算换算pxpx(750/(750/屏幕宽度屏

3、幕宽度)remrem换算换算pxpx(屏幕宽度屏幕宽度/20)/20)pxpx换算换算remrem(20/(20/屏幕宽度屏幕宽度)iPhone51rpx=0.42px1px=2.34rpx1rem=15.75px1px 0.0635remiPhone61rpx=0.5px1px=2rpx1rem=18.75px1px=0.053remiPhone6 Plus1rpx=0.552px1px=1.81rpx1rem=20.7px1px 0.048remWXSS选择器器WXSS选择器CSS选择器用于选择需要添加样式的页面元素，WXSS对CSS选择器属性也做了部分兼容。在WXSS中实现了CSS的部分

4、选择器，其规则也和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选择器语法：选择器样式属性:属性值;样

5、式属性:属性值;WXSS样式式导入入WXSS样式导入在小程序中，每个组件上都有一个style的公共属性，用于设置组件的样式。组件上的style属性定义的样式会在小程序运行时被解析，如果是非必要的情况，不建议直接将样式定义在组件的style属性中，这会影响页面渲染速度。WXSS样式导入内联样式示例代码：/index.wxml 标题 第1行内容；第2行内容；第3行内容；/index.wxss.body border:1px solid#000;height:30%;text-align:center;.title font-size:40rpx;font-weight:600;.line-item

6、 font-size:30rpx;line-height:80rpx;WXSS样式导入在实际项目开发中，为了方便统一管理样式属性，我们会将WXSS文件按照不同的模块拆分成多个样式文件，也会封装公共的样式文件来减少代码的冗余。这种样式模块化的操作就需要使用到import样式导入语句。WXSS样式导入外联样式导入示例代码：/index.wxssimport“./base.wxss”;.body border:1px solid#000;height:30%;text-align:center;WXSS布局布局WXSS布局盒子模型也是CSS布局的基础，每个盒子都是由内容（content）、内边距（p

7、adding）、边框（border）、外边距（margin）这四个部分组成。这些盒子模型看起来像个矩形框，矩形框中的所有项默认宽度均为0。WXSS布局盒子模型WXSS布局浮动不完全是定位，同时它也不是正常流布局，通过设置float属性，浮动框可以向左或者向右移动，直到其外边缘碰到父元素边框或浮动框的边框为止。由于浮动框不在正常文档流中，所以其表现与普通文档流中的表现不一样，其他内容会环绕在浮动框的周围。WXSS布局浮动与定位WXSS布局Flex布局主要由容器和项目构成，采用Flex布局的元素，称为Flex容器（flexcontainer），它的所有直接子元素自动成为容器成员，称为Flex项目（

8、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：定义项目的缩小比例。flex-basis：定义在分配多余空间之前，项目占据的主轴空间（mainsize）。flex:flex-grow、flex-shrink和flex-basis的简写。align-self：用来设置单独的伸缩项目在交叉轴上的对齐方式，可覆盖默认的algin-items属性。