.wxml
<!--index.wxml-->
<view class="box">
<view class="title">盒模型</view>
<view class="box1">
xxxxxsjkdkjaldjsaldaskldja
</view>
<view class="box2">
kwqhejkwqhekjqwhekqw
</view>
<view class="box3">
klfjsdfkjsdklfjsdlk
</view>
</view>
.wxss
.box1{
width: 80%;//宽度
height: 100px;//高度
background-color: yellow;//背景颜色
border: 3px dashed red;//边框(dashed 虚线)
padding: 20px;//内边距
margin: 20px;//外边距
}
.box2{
width: 80%;
height: 100px;
border: 5px solid green;//边框(solid 实线)
padding-top: 20px;//内上距
margin-bottom: 20px;//外下距
}
.box3{
width: 50%;
height: 120px;
border: 5px dotted rebeccapurple;//边框(dotted 点实线)
padding-left: 20px;
margin: 0 20px;//外上下边距为0,外左右边距为20px
}