本文共 5401 字，大约阅读时间需要 18 分钟。

目录

ie盒子模型

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

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

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

box-sizing: border-box;

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代码：

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;}

运行效果：

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

转载地址：https://kongchengji.blog.csdn.net/article/details/93777359 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！