盒子模式

  CSS 中有个重要的概念,就是盒子模式 (Box model)网上找了一个盒子模式图形,如下

盒子里由外至里说明如下:
margin  页边空白 也有人称之为:边距、边界、外边距等等
border  边框
padding 填充      也有人称之为:间隙、内边距、补白等等
content 内容      

CSS 页边空白属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离;
CSS 边框属性 (border) 用来设定一个元素的边线;
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离;

CSS 背景属性指的是 content 和 padding 区域;
CSS 属性中的 width 和 height 指的是 content 区域的宽和高;


 

CSS设置这些属性的顺序为 top(上)、right(右)、bottom(下)、left(左)

例子代码如下:

完整CSS:
body
{
margin-top
:100px;
margin-right
:40px;
margin-bottom
:10px;
margin-left
:70px;
}
简写CSS:
body
{
margin
: 100px 40px 10px 70px;
}
posted @ 2009-12-29 11:07  岩仔  阅读(216)  评论(0编辑  收藏  举报