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

引言

尺寸(Dimension)

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

属性

描述

设置元素的高度。

设置元素的最大高度。

设置元素的最大宽度。

设置元素的最小高度。

设置元素的最小宽度。

设置元素的宽度。

取值：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.相关属性

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:

我是radius

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:

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

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);

}

未被点击时：

被点击时：