.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元素，它包括：边距，边框，填充和实际内容，模型结构如图所示：
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> </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>
Flex是Flexible Box的缩写，意为“弹性布局”，用来对盒状模型进行布局
2、Flex弹性盒模型布局：对整个容器如何布局，对每个项目如何布局
3、Flex容器布局的几个属性如下：
4、Flex项目布局的几个属性如下：
*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的空间内是居中的了。