小程序制作（超详解！！！）第五节盒模型

陌柒2333

于 2023-10-08 21:29:58 发布

阅读量184

点赞数 1

分类专栏：小程序制作（超详解！！！）文章标签：小程序前端

本文链接：https://blog.csdn.net/2201_76115387/article/details/133687947

版权

小程序制作（超详解！！！）专栏收录该内容

16 篇文章 3 订阅

订阅专栏

1.index.wxml

 <view class='box'>
  <view class="title">盒模型</view>
  <view class="boxMode101">啊哈哈哈哈哈</view>
  <view class="boxMode102">啊哈哈哈哈哈</view>
  <view class="boxMode103">啊哈哈哈哈哈</view>
</view>

2.index.wxss

.boxMode101 {
  width: 80%;/*宽度 总宽度的80%*/
  height: 100px;/*高度100个像素*/
  background-color: yellow;/*背景颜色*/
  border: 3px dashed #f00;/*边框宽度：3px ；虚线da:dashed;边框颜色：#f00（红色）*/
  padding: 20px;/*内边距（文本与虚线之间的距离）*/
  margin: 20px;/*外边距（虚线与外边框之间的距离）*/
}


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

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

3.总结

1.盒模型

2.边框样式

边框样式	说明
none	默认无边框
dotted	点线边框
dashed	虚线边框
solid	实线边框
double	两个边框
groove	3D沟槽边框。效果取决于边框颜色值
ridge	3D脊边框。效果取决于边框颜色值
inset	3D嵌入边框。效果取决于边框颜色值
outset	3D突出边框。效果取决于边框颜色值