CSS布局与传统表格布局（表）最大的区别是，原来的位置是在形式上，通过间距或无色透明GIF图像控制论坛的布置间距的形式；现在是用来定位层（DIV），通过边缘层填充，边框和其他属性空间的控制部分。
1。定义的div
分析了一个典型的div定义。
#样本{ margin: 10px 10px 10px 10px；
填料：20px 10px 10px 20px；
硬盘市场关注调查：# CCC 2px固体；
border-right：# CCC 2px固体；
border-bottom：# CCC 2px固体；
border-left：# CCC 2px固体；
背景：URL（图像/ bg_poem .jpg）# fefefe没有重复右下；
COLOR: #666;
text-align：中心；
line-height：150%；宽度：60%；}
以下是以下内容：
该层的名称是示例，样式可以在页面中调用。
缘是一个空白，是左外边界的层，用于页边距或使其他层之间的空间。10px 10px 10px 10px代表左上和右下（顺时针方向）四的利润，如果相同，可简写为缘：10px；。如果利率为零，它应该写成缘：0px；。注意：当该值为零，除了RGB颜色值0%必须与别人后面可以不签，与PX单位。缘是一个透明的元素，不能定义颜色。
填料层的边界层的内容之间的空白。作为保证金，右下左边框被分配到距离的内容，分别。如果是相同的，它可以被简称为填充：0px。一个单独的任务可以离开写成padding-left：0px；。填充的是透明元素，不能定义颜色。
边界层的边界，border-right：# CCC 2px固体；是# CCC 右边框颜色定义层，如果你想要一个虚线样式，你可以用点缀。
背景是定义背景层。2层的定义，首先定义背景图片，使用URL（。 /图像/ bg_logo .gif）来指定背景图片的路径；其次，定义背景色# fefefe ，不重复意味着背景图片不需要重复。如果你需要重复repeat-x 下面右下；指的是背景图片从右下角。如果没有背景图片，它只能定义背景色背景：# fefefe
颜色用于定义字体颜色，在最后一节中引入了颜色。
text-align用于在层定义的内容安排、中心中，左左和右右。
line-height定义行高。150%是指150%的高度标准高度。它也可以写成line-height：1.5或line-height：1.5em。
宽度定义的层的宽度，可以使用一个固定的值，如网站500px，以及一个百分比，如60% ，这里需要注意的是，这个宽度仅指你的内容的宽度，不包括边缘、边界、和填充，但一些浏览器，你不定义它，你需要尝试更多的。
下面是这个层的实际性能：
下面是演示内容。以下是演示内容。以下是演示内容。以下是演示内容。以下是演示内容。以下是演示内容。以下是演示内容。以下是演示内容。
这是演示，这里是演示。
这里是演示内容，这里是演示内容，这里是演示内容。
我们可以看到，边界的那个灰色的，和背景图片不在右下重复。内容是关于左、左边界是20px。内容是在中间，一切都是expected.hoho，虽然不是很好，这是最基本的，你已经了解了CSS布局技术的一半。这是它的方式，不难！（另一半是什么）另一半是层和层之间的位置，我在后面解释。
2.css2盒模型
自从CSS1 1996推出，W3C组织提出，所有的网页都放在一个盒（箱）。设计师可以通过创建定义控制框中的属性，如段落、列表、标题、图片和层。盒模型主要定义四个区域：内容（内容）、框架（填充），距离边界（边界），及保证金（保证金）。上述样品层是一种典型的盒子，初学者，边缘、背景颜色、背景图像、填充、内容和边境经常被混淆。这里是一个3D的盒模型示意，希望能使你更容易理解和记住。
三.辅助图片用背景处理处理。
有了XHTML + CSS布局，有一种技术在一开始就不习惯你。它应该是一种不同于传统表布局的思维方式，也就是说，所有辅助图像都是在后台实现的：
背景：URL（图像/ bg_poem .jpg）# fefefe没有重复右下；
虽然它可以直接插在内容上，这是不推荐的。辅助图片在这里指的是一张没有内容的一部分被表示为一个页面，但只有修改，间隔和提醒。例如：在相册，照片的新闻图片，照片的3D盒模型都属于内容的一部分，他们可以使用直接插入页面中的元素，和其他游戏的LOGO，图片，图片必须使用前缀列表的背景或其他样式显示。
做这件事有2个理由。
表达式和结构的彻底分离（参见另一篇文章：理解性能和结构分离），使用CSS来控制所有的外观性能，并便于修改。
使页面更容易使用，更具亲和力。例如：盲目使用屏幕阅读器，以技术为背景实现图片不会被读出。