1、盒模型

盒模型.jpg 盒模型图解.jpg

2、border属性说明

2.1、模板：

• border: 框线宽度 框线类型 框线颜色

//border属性设置例程1
border: 5px dotted rgba(0, 0, 255, 0.3);
//border属性设置例程2
border: 3px dashed #f00;
//border属性设置例程3
border: 5px solid rgb(0, 255, 0);

2.2、框线类型说明：

边框样式.jpg

3、框线其余设置选项（与border同一级别）

• border-width:边框宽度
• border-color:边框颜色
• border-top:设置上边框
• border-left:设置上边框
• border-bottom:设置上边框
• border-right:设置上边框
  =================================

4、实战

4.1、代码演示

wxml

<!--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>

wxss

/* 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 */
}

4.2、最终结果

结果展示.jpg