第6章 WXSS樣式處理

第6章WXSS樣式處理WXSS尺寸單位WXSS樣式導(dǎo)入WXSS選擇器WXSS布局01020403WXSS尺寸單位WXSS尺寸單位rpx（全稱responsivepixel）單位在渲染過程中可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，會將rpx按比例換算成px，WXSS規(guī)定屏幕寬度為750px。例如在iPhone6中，屏幕寬度為375px，共有750個(gè)物理像素，換算成rpx就是750rpx=375px，由此可以得出，在iPhone6中1rpx=0.5px=1物理像素。WXSS尺寸單位設(shè)備rpx換算px(屏幕寬度/750)rpx換算px(750/屏幕寬度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus1rpx=0.552px1px=1.81rpxWXSS尺寸單位rem（全稱rootem）單位與rpx的用法類似，WXSS規(guī)定屏幕為20rem，我們還以iPhone6為例。iPhone6的屏幕寬度為375px，換算成rem就是20rem=375px，由此得出，在iPhone6中1rem=18.75px。WXSS尺寸單位設(shè)備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中實(shí)現(xiàn)了CSS的部分選擇器，其規(guī)則也和CSS一樣，如果對CSS比較熟悉的話，可以快速掌握WXSS選擇器的使用。WXSS選擇器選擇器樣例描述.class.content選擇所有擁有class=”content”的組件#id#demo選擇擁有id=”demo”的組件elementview選擇所有view組件element,elementview,checkbox選擇所有文檔的view和checkbox組件::afterview::after在view組件后邊插入內(nèi)容::beforeview::before在view組件前邊插入內(nèi)容WXSS選擇器CSS選擇器語法：選擇器{樣式屬性:屬性值;樣式屬性:屬性值;}WXSS樣式導(dǎo)入WXSS樣式導(dǎo)入在小程序中，每個(gè)組件上都有一個(gè)style的公共屬性，用于設(shè)置組件的樣式。組件上的style屬性定義的樣式會在小程序運(yùn)行時(shí)被解析，如果是非必要的情況，不建議直接將樣式定義在組件的style屬性中，這會影響頁面渲染速度。WXSS樣式導(dǎo)入內(nèi)聯(lián)樣式示例代碼：//index.wxml<viewclass="body"><viewclass="title">標(biāo)題</view><viewclass="line-item">第1行內(nèi)容；</view><viewclass="line-item">第2行內(nèi)容；</view><viewstyle="font-size:30rpx;font-weight:bold;">第3行內(nèi)容；</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樣式導(dǎo)入在實(shí)際項(xiàng)目開發(fā)中，為了方便統(tǒng)一管理樣式屬性，我們會將WXSS文件按照不同的模塊拆分成多個(gè)樣式文件，也會封裝公共的樣式文件來減少代碼的冗余。這種樣式模塊化的操作就需要使用到@import樣式導(dǎo)入語句。WXSS樣式導(dǎo)入外聯(lián)樣式導(dǎo)入示例代碼：//index.wxss@import“./base.wxss”;.body{border:1pxsolid#000;height:30%;text-align:center;}WXSS布局WXSS布局盒子模型也是CSS布局的基礎(chǔ)，每個(gè)盒子都是由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）這四個(gè)部分組成。這些盒子模型看起來像個(gè)矩形框，矩形框中的所有項(xiàng)默認(rèn)寬度均為0。WXSS布局盒子模型WXSS布局浮動不完全是定位，同時(shí)它也不是正常流布局，通過設(shè)置float屬性，浮動框可以向左或者向右移動，直到其外邊緣碰到父元素邊框或浮動框的邊框?yàn)橹?。由于浮動框不在正常文檔流中，所以其表現(xiàn)與普通文檔流中的表現(xiàn)不一樣，其他內(nèi)容會環(huán)繞在浮動框的周圍。WXSS布局浮動與定位WXSS布局Flex布局主要由容器和項(xiàng)目構(gòu)成，采用Flex布局的元素，稱為Flex容器（flexcontainer），它的所有直接子元素自動成為容器成員，稱為Flex項(xiàng)目（flexitem）。可以設(shè)置display:flex或display:inline-flex將任何一個(gè)元素指定為Flex布局。WXSS布局Flex彈性盒子WXSS布局Flex容器支持的屬性有：display：通過設(shè)置display屬性，指定元素是否為Flex布局。flex-direction：指定主軸方向，決定了項(xiàng)目的排列方式。flex-wrap：排列換行設(shè)置。flex-flow:flex-direction和flex-wrap的簡寫形式。justify-content：定義項(xiàng)目在主軸上的對齊方式。align-items：定義項(xiàng)目在交叉軸上的對齊方式。align-content：定義多根軸線的對齊方式，如果只有一根軸線，該屬性不起作用。WXSS布局Flex項(xiàng)目支持的屬性有：order：定義項(xiàng)目的排序順序。flex-grow：定義項(xiàng)目的放大比例。flex-shrink：