引言
尺寸(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：
<view class='container'>
<text class='margin1'>我是dotted</text>
<text class='margin2'>我是dashed</text>
<text class='margin3'>我是solid</text>
<text class='margin4'>我是double</text>
<text class='margin5'>我是groove</text>
<text class='margin6'>我是ridge</text>
<text class='margin7'>我是inset</text>
<text class='margin8'>我是outset</text>
</view>
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.相关属性
border-width：设置边框宽度
常用取值：
medium：默认值，相当于3px。
thin：1px。
thick：5px。
不可以为负值。border-color:设置边框颜色border-top:设置顶部边框。
border-top-width,border-top-style,border-top-color分别设置宽度，样式以及颜色border-right：设置右边框。border-bottom：设置底边框。border-left：设置左边框。border-radius：设置对象使用圆角边框。取值为数字或者百分比。
wxml:
<view class='container'>
<text class='margin0'>我是radius</text>
<view>
wxss:
.margin0{
background-color: #00ff00;
border-radius: 50%;
margin: auto;
text-align: center;
line-height: 250rpx;
height: 250rpx;
width: 250rpx;
}
- 当然也可以给4个角单独的设置：
左上角：border-top-left-radius
右上角：border-top-right-radius
左下角：border-bottom-left-radius
右下角：border-bottom-right-radius
-
box-shadow:设置对象阴影
wxml:
<view class='container'>
<text class='margin0'>box-shadow</text>
</view>
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
-
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:
<view class='container'>
<text class='hd'></text>
</view>
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);
}
未被点击时：
被点击时：
