本文姿势点安排如下：
- 1、物理像素，设备独立像素，DPR，微信小程序特有尺寸rpx，设计稿尺寸；
- 2、WXSS样式导入的几种方式；
- 3、如何通过选择器定位到元素；
- 4、文档流与脱离文档流；
- 5、块级元素与行内元素，通过display属性转换；
- 6、盒子模型，box-sizing，外边距合并问题；
- 7、定位：相对定位，绝对定位，固定定位；
- 8、浮动与清除浮动；
- 9、多列布局multi-column，实现多列文本与简单图片瀑布流；
- 10、flex弹性布局；
- 11、布局实战：仿写每日优鲜首页。
0x1、微信小程序特有单位——rpx
px（pixel）像素，相信大家都不陌生吧，但是有三个名词要说下：
- ① 「物理像素」：设备屏幕实际拥有的像素点，比如iPhone 6的分辨率为750*1334，代表水平方向有750个像素点，竖直方向有1334个像素点。
- ②「设备独立像素」：可理解为反映在CSS/JS代码里像素点数。
- ③「设备像素比(DPR)」：一个设备的物理像素与逻辑像素的比。
看到这里，读者可能会有疑问：为何像素还要分两种，有区别吗？
答：很久以前是没区别的，在CSS里写1px，屏幕就渲染一个物理像素，即DPR=1。随着苹果Retina技术的出现，这种局面被打破，使用Retina技术可以使用多个物理像素来渲染一个逻辑像素，屏幕尺寸没变，分辨率变高了，而人的视网膜无法分辨出屏幕上的像素点，这也是感觉Retina屏却比非Retina屏细腻的原因。
在Retina屏上DPR不再是1，而是大于1，比如iPhone 6的DPR=2，物理像素是：750x1334，对应的逻辑像素: (750x1334)/2 = 375x667。
名词科普到这里，接着说回rpx（responsive pixel），微信小程序特有尺寸单位，可以根据「屏幕宽度进行自适应」，规定：小程序屏幕宽度为750rpx。可以简单地理解为：
把页面按比例分割为750份，而每一份的大小是1rpx。
然后iPhone 6的物理像素刚好为750*1334，所以在iPhone 6中：
1rpx = 1个物理像素(1px)
所以，如果设计尸以 iPhone 6 为标准画设计稿的话，标注是多少px，小程序就直接多少rpx，不用换算，而且还不用担心在各个平台上的适配情况，卧槽，美滋滋啊！！！最后总结下结论，不难得出这样的等式：
在iPhone 6中：1rpx = 0.5px逻辑像素 = 1物理像素
0x2、WXSS样式导入
关于CSS样式上节课就谈了，微信小程序中的WXSS稍微有点不一样。除了在目录下创建同名的.wxss文件会自动引用外。还可以使用@import语句 导入外部样式，相对路径，示例如下：
/* app.wxss */ @import './wxss/base.wxss';
除此之外，可以使用 style属性 设置内联样式，一般是接收 动态样式 用，而把 静态样式 统一写到class中，示例如下：
<view style="color:{{color}};" />
0x3、选择器定位元素
为元素设置样式，那你也得先定位到元素是吧！有如下三类最基础的选择器：
- 「标签选择器」：文档中 所有的特定标签 使用同一个CSS样式。
- 「id选择器」：元素以 id属性 来设置id选择器，选择器以「#」来定义。
- 「类选择器」：元素以 class属性 来设置类选择器，可以在多个元素中使用，以「.」号显示。
接着是具体定位到元素的各种操作示例：
/* 标签选择器*/ p{color: red;} /* id选择器 */ #id-choose {color: green;} /* class选择器 */ .class-choose {color: blue;} /* 对选择器进行分组，共享同一个样式，逗号隔开 */ text, button, checkbox { color: green; } .text-1, .text-2 { color: gold } /* x元素内所有的y元素，选择作为x元素后代的y元素，称后代选择器或包含选择器 */ view text{ color: purple } /* 还可使用*通配符选择所有元素 */ view *{ color: purple } /* 父元素为x元素中的所有y元素，又称：子元素选择器 */ view > text{ color: red } /* x元素后的所有y元素，又称：相邻兄弟选择器 */ view + text{ color: red } /* 选择前面有x元素的每个y元素 */ view ~ text{ color: red } /* 还可以通过属性来定位元素 */ <view aria-role="button" aria-label="submit-label">提交</view> [aria-role]{ color: purple } /* 带有某属性 */ [aria-role="button"]{ color: purple } /* 带某属性且等于xxx */ [aria-label~="label"]{color: purple} /* 带某属性且包含XXX单词 */ [aria-label|="submit"]{color: purple} /* 带某属性且XXX单词开头 */ [aria-label^="su"]{color: purple} /* 带某属性且xx开头，不需要单词 */ [aria-label$="el"]{color: purple} /* 带某属性且xx结尾，不需要单词 */ [aria-label*="el"]{color: purple} /* 带某属性且包含xxx */ /* 还可以搭配元素选择器玩耍 */ view[aria-role]{ color: purple } /* 伪类，根据顺序定位 */ .content-1 text:first-child{ color: pink } /* 父元素首个x元素 */ .content-1 text:last-child{ color: pink } /* 父元素最后一个x元素 */ .content-1 text:nth-child(n){ color: pink } /* 父元素第n个x元素 */ .content-1 text:nth-last-child(n){ color: pink } /* 父元素倒数第n个x元素 */ /* 伪元素 */ <view class="content">中间元素</view> /* 元素前添加内容 */ .content:before{ content: "插在前面的文字"; color: red; } /* 元素后添加内容 */ .content:after { content:url("http://codingboy.xyz/avator.png"); }
注意一点！！！
wxss无法获取本地图片资源，可使用 网络图片，base64后的图片 或 image标签！
再注意一点！！！
class属性值多个空格分隔，比如:<view class="font small blue">，其实就是指定多个class。这样写是为了CSS模块化设计，减少CSS重复代码，提高复用性。比如小程序中文本有几种，样式是基本一样的，可能只是字体大小或颜色不同，你就可以这样玩，代码示例如下：
<!-- wxml --> <view class="font"> <view class="font small"> <view class="font small blue"> <!-- wxss --> .font{ text-align: center; } .font.small{ text-size: 18rpx; } /* 小号字体 */ .font.big{ text-size: 24rpx; } /* 大号字体 */ .font.small.blue{ text-color: blue; } /* 蓝色小号字体 */ <!-- 写了多个，如果有重复属性定义，那么后面的会覆盖前面的！ -->
关于选择器更多内容可移步至：www.w3school.com.cn/cssref/css_…
0x4、文档流
文档内元素的流动方向，内联元素从左往右，块级元素从上往下。
简单点说：元素在页面出现的先后顺序。
可能有些模糊，举个例子：
<view style="background-color: #FFBBFF; height: 96rpx; line-height: 96rpx; text-align:center">块元素①</view> <text style="background-color: #CAFF70; ">行内元素①</text> <text style="background-color: #EED8AE; ">行内元素②</text> <text style="background-color: #FFA500; ">行内元素③</text> <view style="background-color: #F08080; height: 96rpx; line-height: 96rpx; text-align:center">块元素②</view> <view style="background-color: #EEEE00; height: 96rpx; line-height: 96rpx; text-align:center">块元素③</view>
运行结果如下：
按照：内联元素从左往右，块级元素从上往下(独占一行)，这样的规则就是「正常文档流」，如果我们通过一些手段，使得元素不按照这个规则进行排布，就叫「脱离文档流」。比如为行内元素②设置一个向右的浮动：
<text style="background-color: #EED8AE; float:right">行内元素②</text>
就变成了这样：
行内元素②没有跟在①后，而③也没有跟在②后，这就是 脱离文档流。
0x5、块级元素(block)与行内(inline)元素
块级元素：
- 独占一行，且宽度会占满父元素宽度，即容器的100%；
- 可设置width和height，不过即使设置了width还是会独占一行；
- 可设置margin和padding；
- 可容纳内联元素和其他块元素；
- 比如：<view>标签
行内(内联)元素：
- 不独占一行，相邻行内元素可以排在同一行；
- 宽高为文字或图片的宽高，不可变，即设置width/height无效；
- 设置margin和padding 水平方向有效，垂直方向无效；
- 只能容纳文本或者其他内联元素；
- 比如：<text>标签
可以通过 display 属性来完成行内元素和块级元素的切换，有三个可选值：
- block：设置为块元素。
- inline：设置为行内元素。
- inline-block：行内块元素，让元素具有块级元素和行内元素的特性，即能
设置宽高，margin和padding生效，还可以和其他行内元素并排。
举个例子：
<!-- test.wxml --> <view class="container"> <view class="block-1">块元素-1</view> <view class="block-2">块元素-2</view> <view class="block-3">块元素-3</view> <view class="block-3">块元素-4</view> <text class="inline-1">行内元素-1</text> <text class="inline-2">行内元素-2</text> <text class="inline-3">行内元素-3</text> <view> <view class="display-inline">行内块元素-1</view> <view class="display-inline">行内块元素-2</view> </view> <view> <text class="display-block">行内块元素-3</text> <text class="display-block">行内块元素-4</text> </view> <view> <view class="display-inline-block">行内块元素-5</view> <view class="display-inline-block">行内块元素-6</view> </view> </view>
/* test.wxss */ /* 块元素 */ .block-1{ background: red } /* 块元素可以直接设置margin和padding */ .block-2 { background: greenyellow; margin-right: 50rpx; margin-top: 50rpx; padding-bottom: 25rpx; padding-left: 25rpx; } /* 块元素设置宽高，但是依旧是占一行 */ .block-3 { background: paleturquoise; height: 96rpx; width: 200rpx; } /* 行内元素 */ .inline-1 { background: red } /* 行内元素设置margin和padding，只有水平方向生效 */ .inline-2 { background: greenyellow; margin-right: 50rpx; margin-top: 50rpx; padding-bottom: 25rpx; padding-left: 25rpx; } /* 行内元素设置宽高不生效 */ .inline-3 { background: paleturquoise; height: 96rpx; width: 200rpx; } /* 块元素转换为行内元素 */ .display-inline { display: inline; background: orange; margin-right: 50rpx; padding-bottom: 25rpx; padding-left: 25rpx; } /* 行内元素转换为块元素 */ .display-block { display: block; background: pink; margin-right: 50rpx; padding-bottom: 25rpx; padding-left: 25rpx; margin-top: 40rpx; height: 96rpx; width: 200rpx; } /* 行内块元素，同时拥有块级元素和行内元素的特性 */ .display-inline-block { display: inline-block; width: 300rpx; height: 100rpx; background: gold; margin-left: 50rpx; margin-top: 20rpx; }
