微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面

ie盒子模型

Flex弹性布局

三大特性：

块元素和内联元素的转换

background-image背景图片

尺寸单位rpx

定位

练习：色子的六面

ie盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

简单来说，IE盒子模型就是把border的边框长度计算在宽和高中。

box-sizing: border-box;

Flex弹性布局

flex布局属性，用六个字概括便是简单、方便、快速。

　　flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。

使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。

以下6个属性设置在容器上。

flex-direction：主轴方向，row：从左到右，column：从上到下

flex-wrap：换行，当前项目的总宽度超过了容器的宽度时，会换行。nowrap：不换行，wrap：换行

flex-flow

justify-content：主轴对齐 flex-start flex-end center space-around space-between

align-items：交叉轴的单行（单根轴线对齐） flex-start flex-end center

align-content：交叉轴的多行（多根轴线对齐）flex-start flex-end center space-around space-between

比如：

/* 控制主轴方向：默认row 从左到右 *//* flex-direction:row; *//* column 从上到下 */flex-direction: column;/* 当子项目的宽度超出容器的宽度时，会压缩子项目的宽度，不换行。*//* flex-wrap: nowrap; *//* 当子项目的宽度超出容器的宽度时会换行 */flex-wrap: wrap;/* 消除换行的间距 */align-content: flex-start;/* 控制主轴的对齐 *//* justify-content: flex-start;  对齐左边 *//* justify-content: center; *//* justify-content: flex-end; 对齐右边 *//* justify-content: space-between; 各个元素间左右产生间隔,最边上的元素仅靠边 *//* justify-content: space-around; 各个元素间左右产生间隔*/
/* 交叉轴 */align-items: center;

以下6个属性设置在项目上。

order：给项目排序，order的值越大排在越后面，所有的默认为1

flex-grow：平分剩余空间，前提是有剩余空间

flex-shrink：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。为0时不压缩

flex-basis：如果写了这个值，宽度就没有效果，以flex-basis设置的宽度为准

flex：flex是上面三个的简写，

align-self：单个元素在交叉轴的位置

border-radius：圆角度

box-shadow：盒子阴影

三大特性：

层叠性：

样式一样的后面的会覆盖前面的，不一样的样式会保留下来（优先级相同)

类选择器的优先级比元素选择器高

优先级：

元素：0，0，0，1
类和伪类nth-child:0，0，1，0
id：0，1，0，0
style：1，0，0，0

优先级可以相加

继承性：类似color，font，line等属性可以继承

优先级：0，0，0，0

块元素和内联元素的转换

块级元素：

独占一行，可以设置宽高

text元素：

不能独占一行，和其他行内元素显示在一行，内联元素可以设置水平方向内边距和垂直方向内边距padding-left\right\top\bottom

不可以设置其内外边距的垂直方向，可以设置水平方向

将内联元素转换为块元素：display：block；

将块元素转换为内联元素：display：inline；

将一个元素设置为行内块元素，既可以设置宽高，又不独占一行：display：inline-block

background-image背景图片

background-image：url(图片路径)

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。

例子：将图片作为送恋人的背景

.a1 view:nth-child(1){background-image: url(https://img02.hua.com/m/home/img/m_home_use_love.png);background-size: 100% 100%;
}

尺寸单位rpx

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。

无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。

微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx

定位

定位偏移量：top/left/right/bottom

定位模式：绝对定位、相对定位、固定定位

相对定位：保留原来的位置，不脱离文档流，相对于自身来定位的

view:nth-child(2){background-color: blue;/* 相对定位 */position: relative;top: 10px;left: 20px;right: 0px;
}

绝对定位：不保留原来的位置，脱离文档流，如果父元素或者祖先元素没有定位的话，根据最左上上角定位。此外要根据最近定位的祖先元素来定位。

view:nth-child(2){background-color: blue;/* 相对定位 */position: absolute;top: 10px;left: 20px;right: 0px;
}

固定定位：不占据位置

position:fixed

定位元素比一般元素的层级高，后面的定位元素会覆盖前面的定位元素。

设置图像的 z-index：

img{position:absolute;left:0px;top:0px;z-index:-1;}

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

练习：色子的六面

WXML代码：

<view class='a'><!-- 第一个色子 --><view><view class='a1'></view></view><!-- 第二个色子 --><view><view class='a1'></view><view class='a1'></view></view><!-- 第s三个色子 --><view><view class='a1'></view><view class='a1'></view><view class='a1'></view></view>
</view><view class='b'>
<!-- 第四个色子 --><view class='s4'><view class='row'><view class='a1'></view><view class='a1'></view></view><view class='row'><view class='a1'></view><view class='a1'></view></view></view><!-- 第五个色子 --><view class='s4 s5'><view class='row'><view class='a1'></view><view class='a1'></view></view><view class='row'><view class='a1'></view></view><view class='row'><view class='a1'></view><view class='a1'></view></view></view><!-- 第六个色子 --><view class='s4'><view class='row'><view class='a1'></view><view class='a1'></view><view class='a1'></view></view><view class='row'><view class='a1'></view><view class='a1'></view><view class='a1'></view></view></view>
</view>

WXSS代码：

.a{display: flex;height:60px;justify-content: space-between;
}
.a>view{margin-top: 5px;width: 15%;height:56px;background-color: #E7E7E7;border-radius: 7px;/* box-shadow写阴影的 第一个是水平方向的阴影 第二个是垂直方向的阴影 第三个值是模糊程度在前面加上inset就会变成内阴影*/box-shadow: 2px 0px 4px #D7D7D7,-2px 0px 4px #D7D7D7,0px 2px 4px #D7D7D7,0px -2px 4px #D7D7D7;padding: 2px;
}
.a1{width: 15px;height: 15px;border-radius: 50%;background-color: black;
}
/*  第1个色子 */
.a view:nth-child(1){display: flex;justify-content: center;align-items: center;
}
/*  第2个色子 */
.a view:nth-child(2){display: flex;justify-content: space-between;
}
.a view:nth-child(2) view:nth-child(2){align-self: flex-end;
}
/*  第3个色子 */
.a view:nth-child(3){display: flex;justify-content: space-between;align-items: center;
}
.a view:nth-child(3) view:nth-child(1){align-self: flex-start;
}
.a view:nth-child(3) view:nth-child(3){align-self: flex-end;
}
.b{display: flex;justify-content: space-between;
}
/*  第4个色子，第5个色子，第6个色子 */
.s4{margin-top: 20px;width: 15%;height:56px;background-color: #E7E7E7;border-radius: 10px;box-shadow: 2px 0px 4px #D7D7D7,-2px 0px 4px #D7D7D7,0px 2px 4px #D7D7D7,0px -2px 4px #D7D7D7;padding: 2px;display: flex;justify-content: space-between;
}
.row{display: flex;flex-direction: column;justify-content: space-between;
}
/*  第5个色子的中间点 */
.s5 view:nth-child(2){display: flex;justify-content: center;align-items: center;
}

运行效果：

一起学习，一起进步 -.- ，如有错误，可以发评论