日期:2014-04-30 浏览次数:23476 次
文章简介:CSS中margin,padding,border-style有几种书写规范. |
在我们使用CSS时,经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义呢,在WEB标准中,它们会有以下含义,它适合于CSS中的margin,padding,border-style等属性
第一种情况,四个值都有,它们的含义如下
属性:上 右 下 左
第二种情况,只有三个值,它们的含义如下
属性:上 右左 下
第三种情况,只有两个值,它们的含义如下
属性:上下 右左
第四种情况,只有一个值,它们的含义如下
属性:上下右左
注意,如果属性值为0,可以不加单元
直接是属性:0;
如果不为0,则必须加单元
如属性:10px;
下面是w3school中所举的例子,我直接拿来主义了,呵呵
例子 1
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线例子 2
border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线例子 3
border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线例子 4
border-style:dotted;
所有 4 个边框都是点状
例子 1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px例子 2
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px例子 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px例子 4
margin:10px;
所有 4 个外边距都是 10px
例子 1
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px例子 2
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px例子 3
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px例子 4
padding:10px;
所有 4 个内边距都是 10px