css盒子（box）

CSS盒子(CSS box)

首先要清楚，CSS中没有box这个属性。CSS的盒子(box)是由以下几个部分组成的：

内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。

盒子里由外至里依次是：

• margin 边距
• border 边框
• padding 间隙 (也有人称做补丁)
• content (内容，比如文本，图片等)

CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

CSS 边框属性 (border) 用来设定一个元素的边线。

CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

CSS 背景属性指的是 content 和 padding 区域。

CSS 属性中的 width 和 height 指的是 content 区域的宽和高。

下面我们来一个一个地介绍组成盒子的几个属性。

CSS边框(border)

边框风格属性(border-style)

这个属性用来设定上下左右边框的风格，它的值如下：

• none (没有边框，无论边框宽度设为多大)
• dotted (点线式边框)
• dashed (破折线式边框)
• solid (直线式边框)
• double (双线式边框)
• groove (槽线式边框)
• ridge(脊线式边框)
• inset (内嵌效果的边框)
• outset (突起效果的边框)

边框宽度属性(border-width)

这个属性用来设定上下左右边框的宽度，它的值如下：

• medium (是缺省值)
• thin (比medium细)
• thick (比medium粗)
• 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

边框颜色属性(border-color)

这个属性用来设定上下左右边框的颜色。例句如下

.d5 {border-color:gray;border-style:solid;}

边框属性(border)

这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：

.d1 {border:5px solid gray;}

单边边框属性

上下左右四个边框不但可以统一设定，也可以分开设定。

设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。

如下代码：

.box {
   background-color: #EEFAFF;
    30%;
   float: left;
   border: 1px solid #000000;
   }

在border: 1px solid #000000;一句中，我们一起为border指定了三个属性值，其实它等效与下面的CSS语句：

border-style:solid;
border-color:#000000;
border-1px;

其实CSS中还有一些属性支持这样的写法。下面为boxhead div添加一个1像素的虚线下侧边框，修改的代码如下：

.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
border-bottom:1px dashed #000000;
text-align: center;
 100%;
color: #FFFFFF;
}

上面的例子只用到了两种边框，下面来看看其它几种样式的边框。

<p >&nbsp;</p>

<p ></p>

<p ></p>

<p ></p>

<p ></p>

<p ></p>

CSS填充属性(padding)或间隙属性

填充属性定义的是内容(content)与边框(border)的距离，

CSS间隙属性

间隙属性(padding)是用来设置元素内容到元素边界的距离。

左间隙属性(padding-left)

这个属性用来设定左间隙的宽度。示例如下：

.d1{padding-left:1cm}

右间隙属性(padding-right)

这个属性用来设定右间隙的宽度。示例如下：

.d1 {padding-right:1cm}

上间隙属性(padding-top)

这个属性用来设定上间隙的宽度。示例如下：

.d1 {padding-top:1cm}

下间隙属性(margin-bottom)

这个属性用来设定下间隙的宽度。示例如下：

.d1{padding-bottom:1cm}

间隙属性(padding)

这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。

你可以为上下左右间隙设置相同的宽度。示例入下：

.d1 {padding:1cm}

你也可以分别设置间隙，顺序是上，右，下，左。示例如下：

.d1 {padding:1cm 2cm 3cm 4cm}

上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。

CSS边距属性(marging)

边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。

左边距属性(margin-left)

这个属性用来设定左边距的宽度。示例如下：

.d1{margin-left:1cm}

上边距属性(margin-top)

这个属性用来设定上边距的宽度。示例如下：

.d1 {margin-top:1cm}

下边距属性(margin-bottom)

.d1{margin-bottom:1cm}

边距属性(margin)

这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。

你可以为上下左右边距设置相同的宽度。示例入下：

.d1 {margin:1cm}

你也可以分别设置边距，顺序是上，右，下，左。示例如下：

.d1 {margin:1cm 2cm 3cm 4cm}

上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。