一、盒模型
/**index.wxss**/
.boxModel01 {
width: 80%;/* 宽度80% */
height: 100px;/* 高度100个像素 */
">yellow;/* 背景颜色黄色 */
border: 3px dashed #f00;/*边框 虚线 红色*/
padding: 20px;/*内边距20个像素,文本和边框的距离*/
margin: 20px;/*外边距*/
}
.boxModel02 {
width: 80%;
height: 100px;
border: 5px solid rgb(0, 255, 0);/*边框 宽度是5个像素,实线 绿色*/
padding-top: 20px;/*上内边距20个像素,上边文本和边框的距离*/
margin-bottom: 20px;/*外下边距20个像素,边框和下边内容的距离*/
}
.boxModel03 {
width: 80%;
height: 120px;
border: 5px dotted rgba(0, 0, 255, 0.3);/*边框 宽度是5个像素,点线 蓝色(透明度0.3)*/
padding-left: 20px;/*内左边距20个像素*/
margin: 0 20px;/*外边距 上下外边距0 左右外边距20个像素*/
}
---------------------
<!--index.wxml-->
<view class="box">
<view class="title">盒模型</view>
<view class="boxModel01">
.boxModel01{width:80%;height:100px;
border:3px
dashed #FF0000;padding:20px;margin:20px;}
</view>
<view class="boxModel02">
.boxModel02{width:80%;height:120px;
border:5px solid rgb(0,255,0);padding-top:
20px;margin-bottom:20px;}
</view>
<view class="boxModel03">
.boxModel03{width:80%;height:120px;
border:5px dotted rgba(0,0,255,0.3);
padding-left:20px;margin:0 20px;}
</view>
</view>
--------------------------
1、盒模型
所有WXML元素都可以看作盒子,在WXSS中,“box model”这一术语是用来设计和布局时使用。盒模型本质上是一个盒子,封装周围的WXML元素,它包括:边距,边框,填充和实际内容,模型结构如图所示:
![](https://img2020.cnblogs.com/blog/754388/202007/754388-20200717161033119-1371645518.png)
2、边框样式
border-style属性用来定义边框的样式,属性值如表所示。
3、边框宽度
border-width 属性用于设置边框宽度。
4、边框颜色
border-color属性用于设置边框的颜色。
边框颜色可以直接提供一个16进制的颜色,也可以通过rgb、rgba等函数来设置
5、单独设置各边
可以通过border-top 、 border-right 、 borderbottom、border-left属性设置不同的侧面具有不同的 边框。
6、一次性设置边框属性
可以利用border属性一次性设置边框宽度、边框样式和边框颜色。如:border: 3px dashed #00ff00。 #边框3个像素宽,虚线,边框颜色绿色
二、页面布局
1、flex弹性盒模型布局例子
三栏布局
<view style="display:flex;text-align:center;line-height:80px;">布局采用flex,针对里面内容进行布局,文本对齐,水平方向居中,如果view没有指定height,只指定了line-height,代表行高就是80px,line-height也是80px,height=line-height=80px,表示垂直方向文本也是居中的
<view style=""background-color:red;flex-grow:1">1</view>背景颜色红色,flex-grow表示如何分配父空间的剩余空间,三个都是1,所以是平分水平方向的宽度
<view style="background-color:green;flex-grow:1">2</view>
<view style="background-color:blue;flex-grow:1">3</view>
</view>
左右混合布局
<view style="display:flex;height:300rpx;text-align:center;">#整体控制,flex布局模式,高度300rpx,水平方向文本居中,flex-direction没有写,默认row,行布局,水平方向布局
<view style="background-color:red;width:250rpx;line-height:300rpx;">1</view>#line-height=height,1在垂直方向居中
<view style="display:flex;flex-direction:column;flex-grow:1;line-height:150rpx;">
<!-- flex类型布局,主流方向column,垂直方向 flex-grow:1代表 整体宽度-red背景色占的250rpx,line-height行高限定的是里面内部的元素,高度150rpx,整个高度300rpx,2,3分别占150rpx,flex-grow限定的是1和2+3如何分配整个外边父空间剩余的宽度,主轴方向是列方向因此是垂直分配 -->
<view style="background-color:green;flex-grow:1">2</view>2和3,flex-grow都是1,垂直方向是平均分配,颜色是绿和蓝
<view style="background-color:blue;flex-grow:1">3</view>
上下混合布局
<view style="display:flex;flex-direction:column;line-height:300rpx;text-align:center;">布局采用flex,方向是列,上下布局,行高300,水平居中
<view style="background-color:red;height:100rpx;line-height:100rpx;">1</view>
<view style="display:flex;flex-direction:row;flex-grow:1;">采用flex,方向是行,水平布局,
<view style="flex-grow:1">2</view>2和3,flex-grow都是1,均分水平方向父空间的剩余空间,颜色是绿和蓝
<view style="flex-grow:1">3</view>
</view>
</view>
![](https://img2020.cnblogs.com/blog/754388/202007/754388-20200717175205945-320521466.png)
Flex是Flexible Box的缩写,意为“弹性布局”,用来对盒状模型进行布局
2、Flex弹性盒模型布局:对整个容器如何布局,对每个项目如何布局
![](https://img2020.cnblogs.com/blog/754388/202007/754388-20200717183357534-786182832.png)
3、Flex容器布局的几个属性如下:
![](https://img2020.cnblogs.com/blog/754388/202007/754388-20200717184625173-929045187.png)
4、Flex项目布局的几个属性如下:
![](https://img2020.cnblogs.com/blog/754388/202007/754388-20200717184521470-679386531.png)
*flex属性是flex-grow, flex-shrink 和 flex-basis的简写,排列顺序是flex-grow, flex-shrink 和 flex-basis
5、利用line-height属性设置盒模式中文本垂直居中对齐
line-height可以理解为每行文字所占的高度。比如说, 有一行高度为20px的文字,如果设置为line-height:50px, 那就是说,这行文字的高度会占50px,由于每个字的 高度只有20px,于是浏览器就把多出来的30px(50px20px)在这行文字的上面加上了15px,下面加上了15px, 这样文字就在这50px的空间内是居中的了。