当前位置:首页 > 网站教程 > 内容列表

DIV+CSS网页模板中margin,padding,border-style的意思及其使用

点击次数:更新时间:2013-09-14 20:09:33【打印】【关闭】

在我们使用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

空间、网站业务联系QQ:2429256177 邮箱:beescms@163.com
客服

工作时间

周一至周日

8:00 - 18:00

在线客服

点击这里给我发消息 BUG反馈

点击这里给我发消息 网站建设

点击这里给我发消息 域名空间

点击这里给我发消息 授权服务

点击这里给我发消息 售前咨询

点击这里给我发消息 意见反馈

点击这里给我发消息 销售客服

联系手机

18288433386

powerd by BEESCMS