微信小程序____CSS篇之尺寸(Dimension)、外边距（margin)、内边距（padding）和边框(Border)

引言

---

尺寸(Dimension)

---

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

取值：auto／数字／百分比。

注意点：
虽然有很多的选择，不过在小程序中还是尽量用rpx吧，省的适配。
当元素设置了line-height的同时，也设置了max-height，实际取值的时候会以max-height的值显示，剩余的将隐藏。

外边距（margin)

---

外边距：设置对象四边的外延边距。

• margin： 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• margin： 20rpx：如果只提供一个，将用于全部的四边。
• margin： 20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。
• margin： 20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
• 某些相邻的margin会发生合并，称之为margin折叠，具体的现象就是如果两个块级元素都设置了margin，那取两者之间的最大值做为两个元素的外边距。

margin-top，margin-right，margin-bottom，margin-left对应的分别是上右下左外边的距离，可取值：auto／数值／百分比。

padding

---

内边距：设置对象四边的内部边距。

• padding： 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• padding：20rpx：如果只提供一个，将用于全部的四边。
• padding：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。
• padding：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

padding-top，padding-right，padding-bottom，padding-left对应的分别是上右下左内边的距离，可取值：auto／数值／百分比。

边框(Border)

---

设置对象的边框

1.语法：

border：length   style  color 

2.style：

none ，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。

wxml：

  我是dotted
  我是dashed
  我是solid
  我是double
  我是groove
  我是ridge
  我是inset
  我是outset

wxss：

.margin1 {
  width: 80%;
  border: 8rpx dotted greenyellow;
  margin: 10rpx;
  text-align: center;
}

.margin2 {
  width: 80%;
  border: 8rpx dashed greenyellow;
  margin: 10rpx;
  text-align: center;
}

.margin3 {
  width: 80%;
  border: 8rpx solid greenyellow;
  margin: 10rpx;
  text-align: center;
}

.margin4 {
  width: 80%;
  border: 8rpx double greenyellow;
  margin: 10rpx;
  text-align: center;
}

.margin5 {
  width: 80%;
  border: 8rpx groove greenyellow;
  margin: 10rpx;
  text-align: center;
}

.margin6 {
  width: 80%;
  border: 8rpx ridge greenyellow;
  margin: 10rpx;
  text-align: center;
}

.margin7 {
  width: 80%;
  border: 8rpx inset greenyellow;
  margin: 10rpx;
  text-align: center;
}

.margin8 {
  width: 80%;
  border: 8rpx outset greenyellow;
  margin: 10rpx;
  text-align: center;
}

3.相关属性

1. border-width：设置边框宽度
   常用取值：
   medium：默认值，相当于3px。
   thin：1px。
   thick：5px。
   不可以为负值。

2. border-color:设置边框颜色

3. border-top:设置顶部边框。
   border-top-width,border-top-style,border-top-color 分别设置 宽度，样式以及颜色

4. border-right：设置右边框。

5. border-bottom：设置底边框。

6. border-left：设置左边框。

7. border-radius：设置对象使用圆角边框。取值为数字或者百分比。

wxml:

  我是radius

wxss:

.margin0{
  background-color: #00ff00;
  border-radius: 50%;
  margin: auto;
  text-align: center;  
  line-height: 250rpx;
  height: 250rpx;
  width: 250rpx;
}

8. 当然也可以给4个角单独的设置：

左上角：border-top-left-radius
右上角：border-top-right-radius
左下角：border-bottom-left-radius
右下角：border-bottom-right-radius

9. box-shadow:设置对象阴影

wxml:

  box-shadow

wxss:

.margin0{
  background-color: #00ff00;
  margin: auto;
  box-shadow: 16rpx 16rpx 6rpx 6rpx rebeccapurple;
  text-align: center;  
  line-height: 250rpx;
  height: 250rpx;
  width: 250rpx;
}

第一个值：设置水平方向阴影偏移量。
第二个值：设置垂直方向阴影偏移量。
第三个值：设置对象的阴影模糊值。不允许为负值
第四个值：设置对象的阴影外延值，不允许为负值
第五个值：color。
第六个值：inset，阴影在左上位置，如下图：box-shadow:6rpx 6rpx 6rpx 6rpx rebeccapurple inset

10. border-image：对象的边框样式使用图片来填充。

• border-image-source:设置图片的来源。使用绝对或者相对地址或者渐变色来确定图片。
• border-image-slice :设置边框背景图的分隔方式。取值：数值／百分比 /fill。该属性指定从上右下左来分割图片，将图像分成4个角，4条边以及中间区域。中间区域始终是透明的，除非使用关键字fill。
• border-image-width:设置边框背景的宽度。用于指定使用多厚的边框来承载被裁剪后的图像。
• border-image-outset：设置对象的边框背景图的扩展，意思就是说假如设置了10rpx，那么图像就会在原来基础上外延10rpx在显示。
• border-image-repeat：设置对象的边框图片的平铺方式。
  • stretch:拉伸。
  • repeat：平铺，碰到边界的时候截断。
  • round：根据边框的尺寸动态调整图片的大小，使得刚好可以铺满整个边框。
  • space：根据边框的尺寸动态调整图片的之间的间距，使得刚好铺满整个边框。

应用

wxml:

wxss:

.hd{
  content: "";
  height: 16rpx;
  width: 16rpx;
  border-width: 4rpx 4rpx 0 0;
  border-color: red;
  border-style: solid;
  transform: rotate(-45deg);
  position: absolute;
  top: 20rpx;
  left: 30rpx;
}
.hd:hover {
  transform: rotate(135deg);
}

未被点击时：

被点击时：