WeChat Mini Program Development Notes 3 Box Model

Box model


Example:

Source code of each page:

<!--pages/kj/BoxModelAndColor/index.wxml-->
<view class='box'>
  <view class='title'>盒模型</view>
  <view class='boxModel01'>
    .boxModel01{ width: 80%; height: 120px; background-color: yellow; 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>

/* pages/kj/BoxModelAndColor/index.wxss */

.boxModel01 {
  width: 80%;
  height: 100px;
  background-color: yellow; /* 背景颜色 */
  border: 3px dashed #f00;
  padding: 20px; /* 内边距 */
  margin: 20px; /* 外边距 */
}

.boxModel02 {
  width: 80%;
  height: 100px;
  border: 5px solid rgb(0, 255, 0);
  padding-top: 20px; /* 内上边距 */
  margin-bottom: 20px; /* 外下边距 */
}

.boxModel03 {
  width: 80%;
  height: 120px;
  border: 5px dotted rgba(0, 0, 255, 0.3);
  padding-left: 20px; /* 内左边距 */
  margin: 0 20px; /* 外上下边距为0，左右边距为20px */
}