DIV与CSS
盒子模型盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。
１、盒子模型的概念
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置。
一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这４个部分组成。
http://dl.iteye.com/upload/picture/pic/83543/3ec1a41c-a4e9-3fa1-9dde-82635f4f5862.bmp
border、padding、margin属性
border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。
border主要有３个属性，分别是color（颜色）、 width（粗细）、 style（样式）。
下面示例：
<html><head><title>Test div</title><style type="text/css"><!--div{background-color: #FFFFCC;border-color:#000000;border-width:6px;padding:20px;margin:10px;}--></style></head><body><div style="border-style:double">The border-style of dashed</div><div style="border-style:groove">The border-style of dashed</div><div style="border-style:dashed">The border-style of dashed</div></body></html>
效果：
http://dl.iteye.com/upload/picture/pic/83563/cfd06bb3-da02-3d30-9a80-7f2ef1881c57.jpg
其它内容请参见：http://www.sxszjzx.com/~c17/2009-1ja/2009-1web/files/17-3/17-3.html
页:
[1]