知方可补不足~CSS中margin,padding,border

来源:互联网 发布:小米6数据网络不稳定 编辑:程序博客网 时间:2024/04/30 04:27

参考文章:

http://www.w3school.com.cn

在我们使用CSS时,经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义呢,在WEB标准中,它们会有以下含义,它适合于CSS中的margin,padding,border-style等属性

第一种情况,四个值都有,它们的含义如下

属性:上 右 下 左

第二种情况,只有三个值,它们的含义如下

属性:上 右左 下

第三种情况,只有两个值,它们的含义如下

属性:上下 右左

第四种情况,只有一个值,它们的含义如下

属性:上下右左

注意,如果属性值为0,可以不加单元

直接是属性:0;

如果不为0,则必须加单元

如属性:10px;

下面是w3school中所举的例子,我直接拿来主义了,呵呵

例子 1border-style:dotted solid double dashed;     上边框是点状    右边框是实线    下边框是双线    左边框是虚线例子 2border-style:dotted solid double;    上边框是点状    右边框和左边框是实线    下边框是双线例子 3border-style:dotted solid;    上边框和下边框是点状    右边框和左边框是实线例子 4border-style:dotted;    所有 4 个边框都是点状例子 1margin:10px 5px 15px 20px;    上外边距是 10px    右外边距是 5px    下外边距是 15px    左外边距是 20px例子 2margin:10px 5px 15px;    上外边距是 10px    右外边距和左外边距是 5px    下外边距是 15px例子 3margin:10px 5px;    上外边距和下外边距是 10px    右外边距和左外边距是 5px例子 4margin:10px;    所有 4 个外边距都是 10px例子 1padding:10px 5px 15px 20px;    上内边距是 10px    右内边距是 5px    下内边距是 15px    左内边距是 20px例子 2padding:10px 5px 15px;    上内边距是 10px    右内边距和左内边距是 5px    下内边距是 15px例子 3padding:10px 5px;    上内边距和下内边距是 10px    右内边距和左内边距是 5px例子 4padding:10px;    所有 4 个内边距都是 10px

 

 


<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
原创粉丝点击