盒模型

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