CSS盒子和DIV布局
一、认识div层
1.&DIV&标记是一个区块容器标记，在标记之间可以放置其他一些HTML元素，例如p,h1,table,img,form等，然后使用css相关属性将div容器标记中的元素作为一个独立对象进行修饰，不会影响其他HTML元素。
2.Div和span的区别
大部分div层都可以使用span标记代替
Div是一个块级元素，其包含的元素会自动换行；span标记是一个行内标记，其前后不会发生换行。
Div标记可以包含span标记元素，但span标记一般不包含div标记。
在网页设计中，对于较大的块可以使用div完成，而对于具有独特样式的单独HTML元素，可以使用span标记完成。
二、盒子模型
1.将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。
CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。
2.盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。
content（内容）：盒子模型中必需的部分，可以是文字、图片等元素
padding（空白）：也称页边距或补白，用来设置内容和边框之间的距离
border（边框）：可以设置内容边框线的粗细、颜色和样式等。
margin（边界）：外边距，用来设置内容与内容之间的距离
一个盒子的实际高度（宽度）是由content+padding+border+margin组成。
可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。
3.border边框：是内边距和外边距的分界线，可以分离不同的HTML元素
有3个属性，分别是边框样式（style）、颜色（color）和宽度（width）
4.padding内边距:定义内容与边框之间的距离。
padding: padding-top |
padding-right | padding-bottom |
padding-left
5.margin外边距：用来设置页面元素与元素之间的距离，定义元素周围的空间范围
margin: auto |
margin-top |
margin-right | margin-bottom | margin-left
行内元素margin设置
非行内元素块之间margin设置
父子块之间的margin设置
其中子块的margin设置将会以父块的content为参考。
三、页面基本排版
CSS+DIV页面排版的思想是，首先在整体上进行&div&标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。
1.将页面用DIV分块&
首先要整体构思，将网页划分几个部分，采用的结构：上中下结构、左右两列结构等。
根据不同的部分，划分几个DIV块，用来存放不同的内容，大块中可以存放不同的小块
container：布局容器，整个页面结构和内容都在这个容器中。
banner：页头部分
footer：页脚部分
content：页面主体部分，又包含了两个层：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。CSS定位设置实例――盒子的定位
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&
&html xmlns=&http://www.w3.org/1999/xhtml&&&
&&& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&
&&& &link href=&css/reset.css& rel=&stylesheet& type=&text/css& /&&
&&& &link href=&css/layout.css& rel=&stylesheet& type=&text/css& /&&
&&& &title&无标题页&/title&&
&&& &div id=&wraper&&&
&&&&&&& &h3&&
&&&&&&&&&&& 热播电影&/h3&&
&&&&&&& &div id=&film&&&
&&&&&&&&&&& &img src=&images/06.jpg& width=&190& height=&254& alt=&电影封面& /&&
&&&&&&&&&&& &div class=&top&&&
&&&&&&&&&&& &/div&&
&&&&&&&&&&& &div class=&filmname&&&
&&&&&&&&&&&&&&& 忠犬八公的故事&/div&&
&&&&&&& &/div&&
&&& &/div&&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&&& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&&& &link href=&css/reset.css& rel=&stylesheet& type=&text/css& /&
&&& &link href=&css/layout.css& rel=&stylesheet& type=&text/css& /&
&&& &title&无标题页&/title&
&&& &div id=&wraper&&
&&&&&&& &h3&
&&&&&&&&&&& 热播电影&/h3&
&&&&&&& &div id=&film&&
&&&&&&&&&&& &img src=&images/06.jpg& width=&190& height=&254& alt=&电影封面& /&
&&&&&&&&&&& &div class=&top&&
&&&&&&&&&&& &/div&
&&&&&&&&&&& &div class=&filmname&&
&&&&&&&&&&&&&&& 忠犬八公的故事&/div&
&&&&&&& &/div&
&&& &/div&
&&& text-align:&
&&& position:&
&&& width: 190&
&&& height: 254&
#film .top&
&&& position:&
&&& top: 0;&
&&& left: 0;&
&&& width: 53&
&&& height: 48&
&&& background: url(../images/p_dot.png) 0px -1027&
#film .filmname&
&&& position:&
&&& bottom: 0&
&&& left: 0&
&&& width: 100%;&
&&& text-align:&
&&& color: R&
&&& font-size: 24&
&&& font-family: 华文隶书;&
&&& font-weight:&
&&& text-align:
&&& position:
&&& width: 190
&&& height: 254
#film .top
&&& position:
&&& top: 0;
&&& left: 0;
&&& width: 53
&&& height: 48
&&& background: url(../images/p_dot.png) 0px -1027
#film .filmname
&&& position:
&&& bottom: 0
&&& left: 0
&&& width: 100%;
&&& text-align:
&&& color: R
&&& font-size: 24
&&& font-family: 华文隶书;
&&& font-weight:
&【基础知识】
CSS中的属性position常用的定位主要有：
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 &left&, &top&, &right& 以及 &bottom& 属性进行规定。
fixed 生成绝对定位的元素，相对于窗口进行定位。
元素的位置通过 &left&, &top&, &right& 以及 &bottom& 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，&left:20& 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
1、实例图片来自迅雷看看网站/type,order/movie,rat/，小图片由于是很多图片构成的，因此设置背景的时候，采用了定位：
　　background: url(../images/p_dot.png) 0px -1027
2、小图片和文字要相对于&div id=&film&&进行绝对定位，因些，需要设定position:，虽然实际上并没有给定它的left、right、top和bottom值。
3、如果没有这个非默认定位，也就是非static定位，absolute定位的参照物会是body，也就是窗体。
4、absolute和relative的区别，主要是定位的参照物不同，relative的参照物是它本身的正常位置。»»CSS 3中弹性盒布局的最新版
　CSS 3中弹性盒布局的最新版概述
　　在CSS 3中，CSS Flexible Box模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。
　　虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。
　　虽然CSS Flexible Box模块已经被公布了好几年，但是自开始公布以来，该模块中所定义的内容已经经过了几次重大修改。目前公布的正式版本为。
　　目前为止，Opera 12.10版本以上，IE 11版本以上、Chrome 21版以上、Firefox 22版本以上的浏览器均支持该最新版本。
　从示例页面开始学习最新版本的弹性盒布局
　　接下来开始通过一个示例页面开始学习最新版本的弹性盒布局。该示例页面中的body元素中的代码如下所示。
&div id=&main&&
&div class=&content&&
&h1&section 1&/h1&
&p&示例文字&/p&
&/section&
&h1&section 2&/h1&
&p&示例文字&/p&
&/section&
&h1&section 3&/h1&
&p&示例文字&/p&
&/section&
&h1&section 4&/h1&
&p&示例文字&/p&
&/section&
&div class=&content&&
&h1&section 5&/h1&
&p&示例文字&/p&
&h1&section 6&/h1&
&p&示例文字&/p&
&/section&
&h1&section 7&/h1&
&p&示例文字&/p&
&/section&
&h1&section 8&/h1&
&p&示例文字&/p&
&/section&
&div class=&content&&
&h1&section 9&/h1&
&p&示例文字&/p&
&/section&
&h1&section 10&/h1&
&p&示例文字&/p&
&/section&
&h1&section 11&/h1&
&p&示例文字&/p&
&/section&
&h1&section 12&/h1&
&p&示例文字&/p&
&/section&
　　接下来，首先对该页面中各div元素及section元素指定边框样式，代码如下所示。
border: 1px dotted #f0f;
padding: 1
.content {
border: 1px dotted #0
padding: 1
border: 1px dotted #f00;
padding: 1
　　在浏览器中打开目前为止的示例页面，页面中各元素从上往下纵向排列，如下图所示。
　对示例页面使用弹性盒布局
　　弹性盒布局的指定方法为：对需要布局的元素的容器元素使用display:样式属性。在CSS Flexible Box模块中，该容器元素中的每一个元素均被称为&Flex item&，将该容器元素称为&Flex container&。
　　弹性盒布局方式与使用float等样式属性进行的布局方式的一个主要区别为，当使用float等样式属性时，需要对容器中每一个元素指定样式属性，当使用弹性盒布局时，只需对容器元素指定样式属性。
　　接下来，我们首先对所有样式类名为content的div元素使用弹性盒布局，这些div元素的容器元素为id属性值为main的div元素，修改该元素的样式代码如下所示：
border: 1px dotted #f0f;
padding: 1
　　在浏览器中打开示例页面，页面中所有样式类名为content的div元素的排列方式被修改为横向排列，如下图所示。
　设置元素排列方向
　　可以通过flex-direction样式属性的使用来控制容器中所有子元素的排列方向，可指定值如下所示。
row:横向排列（默认值）
row-reverse:横向反向排列
column:纵向排列
column-reverse:纵向反向排列
　　修改id属性值为main的div元素的样式代码如下所示：
border: 1px dotted #f0f;
padding: 1
flex-direction: row-
　　在浏览器中打开示例页面，页面中所有样式类名为content的div元素的排列方式被修改为从容器元素，即id属性值为main的div元素的右端开始横向反向排列，如下图所示。
　　接下来首先恢复所有样式类名为content的div元素的排列方式为横向正向排列，修改id属性值为main的div元素的样式代码如下所示：
border: 1px dotted #f0f;
padding: 1
　　然后对所有样式类名为content的div元素指定flex-direction: column-样式属性，代码如下所示：
.content {
border: 1px dotted #0
padding: 1
flex-direction: column-
　　在浏览器中打开示例页面，页面中所有content的div元素的所有section子元素的排列方式被修改为纵向反向排列（不包含section子元素中的section孙元素），如下图所示。
　使用order样式属性指定排列顺序
　　使用弹性盒布局的时候，可以通过order属性来改变各元素的显示顺序。可以在每个元素的样式中加入order属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大来显示这些元素。
　　接下来首先设置所有样式类名为content的div元素的所有section子元素的排列方式为纵向正向排列，修改所有样式类名为content的div元素的样式代码如下所示：
.content {
border: 1px dotted #0
padding: 1
flex-direction:
　　接下来通过将所有样式类名为content的div元素中的第2个section子元素的order样式属性值设置为-1的方法设置这些section子元素被优先显示在其他section子元素之前，代码如下所示：
.content section:nth-child(2) {
order: -1;
　　在浏览器中打开示例页面，页面中所有样式类名为content的div元素中的第2个section子元素被显示在其他section子元素之前，如下图所示。
　设置元素宽度及高度
　　接下来首先介绍如何设置被横向排列的每一个元素的宽度。
　　可以通过flex属性值的使用使所有子元素的总宽度等于容器宽度。
　　接下来通过将所有样式类名为content的div元素的flex属性值设置为1的方法使所有样式类名为content的div元素的总宽度等于容器元素，即id属性值为main的div元素的宽度，代码如下所示。当所有样式类名为content的div元素的flex属性值都被设置为1时，这些div元素的宽度均等。
.content {
border: 1px dotted #0
padding: 1
flex-direction:
　　在浏览器中打开示例页面，所有样式类名为content的div元素的宽度自动增长，这些元素的总宽度等于容器元素，即id属性值为main的div元素的宽度,每一个样式类名为content的div元素的宽度均等，如下图所示。
　　接下来，我们设置第二个样式类名为content的div元素的flex属性值为2，代码如下所示。
.content:nth-child(2) {
　　为了更清晰地计算元素宽度，我们取消所有元素的边框设置及内边距设置，修改后的完整样式代码如下所示。
.content {
flex-direction:
.content section:nth-child(2) {
order: -1;
.content:nth-child(2) {
　　在浏览器中打开示例页面，第二个样式类名为content的div元素宽度为其他样式类名为content的div元素宽度的两倍，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600px，则第一个与第三个样式类名为content的div元素宽度的宽度均等于150px，第二个样式类名为content的div元素宽度的宽度等于300px。
　　可以使用flex-grow属性来指定元素宽度，但是该样式属性对于元素宽度的计算方法与flex样式属性对于元素宽度的计算方法有所不同。
　　接下来指定所有样式类名为content的div元素的flex-grow样式属性值为1，宽度为150px,指定第二个样式类名为content的div元素的flex-grow样式属性值为为3。修改后的完整样式代码如下所示。
.content {
flex-direction:
flex-grow:1;
.content section:nth-child(2) {
order: -1;
.content:nth-child(2) {
flex-grow:3;
　　在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content的div元素宽度的宽度均等于180px，第二个样式类名为content的div元素宽度的宽度等于240px。对于每个样式类名为content的div元素宽度的计算步骤如下所示：
600(容器宽度)-150*3（三个样式类名为content的div元素宽度的总宽度）=150
150/5(三个样式类名为content的div元素宽度的flex-grow样式属性值的总和)=30
第一个与第三个样式类名为content的div元素宽度的宽度均等于150（其width样式属性值+）+30*1（其flew-grow样式属性值）=180px
第二个样式类名为content的div元素宽度的宽度等于150（其width样式属性值+）+30*3（其flew-grow样式属性值）=240px
　　可以使用flex-shrink属性来指定元素宽度，该样式属性与flex-grow样式属性的区别在于：当子元素的width样式属性值的总和小于容器元素的宽度值时，必须通过flex-grow样式属性来调整子元素宽度，当子元素的width样式属性值的总和大于容器元素的宽度值时，必须通过flex-shrink样式属性来调整子元素宽度。
　　接下来指定所有样式类名为content的div元素的flex-shrink样式属性值为1，宽度为250px,指定第二个样式类名为content的div元素的flex-shrink样式属性值为为3。修改后的完整样式代码如下所示。
.content {
flex-direction:
flex-shrink:1;
.content section:nth-child(2) {
order: -1;
.content:nth-child(2) {
flex-shrink:3;
　　在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content的div元素宽度的宽度均等于220px，第二个样式类名为content的div元素宽度的宽度等于160px。对于每个样式类名为content的div元素宽度的计算步骤如下所示：
250*3（三个样式类名为content的div元素宽度的总宽度）-600(容器宽度)=150
150/5(三个样式类名为content的div元素宽度的flex-shrink样式属性值的总和)=30
第一个与第三个样式类名为content的div元素宽度的宽度均等于250（其width样式属性值+）-30*1（其flew-shrink样式属性值）=220px
第二个样式类名为content的div元素宽度的宽度等于250（其width样式属性值+）-30*3（其flew-grow样式属性值）=160px
　　在使用flex-grow样式属性或flex-shrink样式属性调整子元素宽度时，也可以使用flex-basis样式属性指定调整前的子元素宽度，该样式属性与width样式属性的作用完全相同。
　　可以将flex-grow、flex-shrink以及flex-basis样式属性值合并写入flex样式属性中，方法如下所示。
flex:flex-grow样式属性值 flex-shrink样式属性值 flex-basis样式属性值;
　　在使用flex样式属性值时，flex-grow、flex-shrink以及flex-basis样式属性值均为可选用样式属性值，当不指定flex-grow、flex-shrink样式属性值时，默认样式属性值均为1，当不指定flex-basis样式属性值时，默认样式属性值为0px。
　　修改本示例中的样式代码如下所示：
.content {
flex-direction:
.content section:nth-child(2) {
order: -1;
.content:nth-child(2) {
flex:1 3 250
　　在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content的div元素宽度的宽度均等于220px，第二个样式类名为content的div元素宽度的宽度等于160px。
　　在子元素为横向排列时，flex、flex-grow、flex-shrink以及flex-basis样式属性均用于指定或调整子元素宽度，当子元素为纵向排列时，flex、flex-grow、flex-shrink以及flex-basis样式属性均用于指定或调整子元素高度。
　单行布局与多行布局
　　可以使用flex-wrap样式属性来指定单行布局或多行布局，可指定样式属性值如下所示：
nowrap:不换行
wrap-reverse:虽然换行，但是换行方向与使用wrap样式属性值时的换行方向相反
　　接下来首先恢复页面内各div元素的边框与内边距(padding)的指定，同时指定所有样式类名为content的div元素的宽度为250px，代码如下所示。
border: 1px dotted #f0f;
padding: 1
.content {
border: 1px dotted #0
padding: 1
flex-direction:
border: 1px dotted #f00;
padding: 1
.content section:nth-child(2) {
order: -1;
　　然后指定容器元素，即id属性值为main的div元素的flex-wrap样式属性值为wrap，以指定允许对所有样式类名为content的div元素进行换行布局，代码如下所示。
border: 1px dotted #f0f;
padding: 1
flex-wrap:
　　在浏览器中打开示例页面，当浏览器窗口宽度不足以容纳三个样式类名为content的div元素时，最右边的样式类名为content的div元素被换行显示，如下图所示。
　　可以将flex-direction样式属性值与flex-wrap样式属性值合并书写在flex-flow样式属性中。以下两段代码的作用完全相同。
//使用flex-direction样式属性与flex-wrap样式属性
.content {
flex-direction:
flex-wrap:
//使用flex-flow样式属性
.content {
flex-flow:
　弹性盒布局中的一些专用术语
　　接下来首先介绍弹性盒布局中的一些专用术语，在进行布局时这些术语的含义如下图所示。
main axis:进行布局时作为布局基准的轴，在横向布局时为水平轴，在纵向布局时为垂直轴。
main-start / main-end:进行布局时的布局起点与布局终点。在横向布局时为容器的左端与右端，在纵向布局时为容器的顶端与底端。
cross axis:与main axis垂直相交的轴，在横向布局时为垂直轴，在纵向布局时为水平轴。
cross-start / cross-end:cross axis轴的起点与终点。在横向布局时为容器的顶端与底端，在纵向布局时为容器的左端与右端。将flex-wrap属性值指定为wrap且进行横向多行布局时，按从cross-start到cross-end方向，即从上往下布局，将flex-wrap属性值指定为wrap-reverse且进行横向多行布局时，按从cross-end到cross-start方向，即从下往上布局。
　justify-content属性
　　justify-content属性用于指定如何布局容器中除了子元素之外的main axis轴方向（横向布局时main axis轴方向为水平方向，纵向布局时main axis轴方向为垂直方向）上的剩余空白部分。
　　当flex-grow属性值不为0时，各子元素在main axis轴方向上自动填满容器，所以justify-content属性值无效。
　　可指定justify-content属性值如下所示：
flex-start：从main-start开始布局所有子元素（默认值）。
flex-end：从main-end开始布局所有子元素。
center：居中布局所有子元素。
space-between：将第一个子元素布局在main-start处，将最后一个子元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。
space-around：将空白部分平均分配在以下几处：main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间。
　　上述各属性值的区别如下图所示(灰色代表空白部分)。
　align-items属性与align-self属性
　　align-items属性与justify-content属性类似，用于指定子元素的对齐方式，但是align-items属性指定的是cross axis轴方向（横向布局时cross axis轴方向为垂直方向，纵向布局时cross axis轴方向为水平方向）上的对齐方式，可指定属性值如下所示。
flex-start：从cross-start开始布局所有子元素（默认值）。
flex-end：从cross-end开始布局所有子元素。
center：居中布局所有子元素。
baseline：如果子元素的布局方向与容器的布局方向不一致，则该值的作用等效于flex-start属性值的作用。如果子元素的布局方向与容器的布局方向保持一致，则所有子元素中的内容沿基线对齐。
stretch：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度（当考虑元素边框及内边距时，当边框宽度与内边距均为0则等于容器高度）。
　　上述各属性值的区别如下图所示(灰色代表空白部分)。
　　align-self属性与align-items属性的区别在于：align-items被指定为容器元素的样式属性，用于指定所有子元素的对齐方式，而align-self属性被指定为某些子元素的样式属性，用于单独指定这些子元素的对齐方式。例如将容器元素的align-items属性值指定为center（居中对齐）后，可以将第一个子元素的align-self属性值指定为flex-start（对齐在cross-start端）。可指定值如下所示：
auto:继承父元素的align-items属性值
flex-start
　align-content属性
　　当进行多行布局时，可以使用align-content属性来指定各行对齐方式。该属性与align-items属性的区别在于：align-items属性用于指定子元素的对齐方式，而align-content属性用于指定行对齐方式。可以指定的属性值如下所示：
flex-start：从cross-start开始布局所有行。
flex-end：从cross-end开始布局所有行。
center：居中布局所有行。
space-between：将第一行布局在cross-start处，将最后一行布局在cross-end处，将空白部分平均分配在各行之间。
space-around：将空白部分平均分配在以下几处：cross-start与第一行之间、各行与行之间、最后一行与cross-end之间。
　　上述各属性值的区别如下图所示(灰色代表空白部分)。
验证消息：Admin10000
提示：常上QQ空间的朋友可关注，精彩内容不错过。
理智评论文明上网，拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心彻底弄懂CSS盒子模式(DIV布局快速入门)――作者：唐国辉 [本页为无表格排版标准网页]
彻底弄懂CSS盒子模式(DIV布局快速入门)
作者：唐国辉　　　天涯社区、经典论坛昵称：webflash
如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。
理解CSS盒子模型
什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 CSS盒子模式 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。由“盒子”堆出来的网页版面现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。
转变我们的思路
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。
实现结构与表现分离
在真正开始布局实践之前，再来认识一件事――结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：
&p&加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。&/p&
如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：
color=&#FF0000& face=&宋体&&段落内容&/font&&/p&
这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。
再直接列一段代码加深理解结构和表现相分离：
&style type=&text/css&&
#photoList img{
　　height:80;
　　width:100;
　　margin:5
id=&photoList&&
&img src=&01.jpg&
&img src=&02.jpg&
&img src=&03.jpg&
&img src=&04.jpg&
&img src=&05.jpg&
不用CSS排版
&img src=&01.jpg&
width=&100& height=&80& align=&middle& /&
&img src=&02.jpg&
width=&100& height=&80& align=&middle& /&
&img src=&03.jpg&
width=&100& height=&80& align=&middle& /&
&img src=&04.jpg&
width=&100& height=&80& align=&middle& /&
&img src=&05。jpg&
width=&100& height=&80& align=&middle& /&
第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。演示地址：/css1.html用CSS排版减小网页文件体积
像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：
&style type=&text/css&&
* {margin:0 padding:0}
font-size: 12
width: 805
.mainBox {
border: 1px dashed #0099CC;
padding: 0
height: 300
width: 192
.mainBox h3 {
height: 20
width: 179
color: #FFFFFF;
padding: 6px 3px 3px 10
background-color: #0099CC;
font-size: 16
.mainBox p {
line-height: 1.5
text-indent: 2
margin: 35px 5px 5px 5
&div class=&mainBox&&
&h3&前言&/h3&
&p&正文内容&/p&
&div class=&mainBox&&
&h3&CSS盒子模式&/h3&
&p&正文内容 &/p&
&div class=&mainBox&&
&h3&转变思想&/h3&
&p&正文内容 &/p&
&div class=&mainBox&&
&h3&熟悉步骤&/h3&
&p&正文内容 &/p&
熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“&div&文字块一&/div&&div&文字块二&/div&&div&文字块三&/div&”，而用“&p&文字块一&/p&&p&文字块二&/p&&p&文字块三&/p&”更合适。
用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：演示地址：/css2.htmlCSS排版结果图
用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：
&div id=&header&&&/div&
&div id=&nav&&&/div&
&div id=&content&&&/div&
&div id=&footer&&&/div&
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:
&div id=&header&&&/div&
&div id=&nav&&&/div&
&div id=&content&&&/div&
&div id=&footer&&&/div&
最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：
font-family: Arial, Helvetica, sans-
font-size: 12
width: 760
border: 1px solid #006633;
页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：
background-image:
url(headPic.gif);
background-repeat:
margin:0px
导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：
font-size:
list-style-type:
#nav li a{
color:#000000;
text-decoration:
padding-top:4
text-align:
background-color:
margin-left:2
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：
#content {
line-height:
#content p {
text-indent:
#content h3 {
font-size:
版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：
line-height:
text-align:
background-color:
最后回到样式开头大家会看到这样的样式代码：
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：
&style type=&text/css&&
font-family: Arial, Helvetica, sans-
font-size: 12
width: 760
border: 1px solid #006633;
background-image:
url(headPic.gif);
background-repeat:
margin:0px
font-size:
list-style-type:
#nav li a{
color:#000000;
text-decoration:
padding-top:4
text-align:
background-color:
margin-left:2
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
#content {
line-height:
#content p {
text-indent:
#content h3 {
font-size:
line-height:
text-align:
background-color:
结构代码是这样的：
id=&header&&&/div&
&ul id=&nav&&
&li&&a href=&#&&首 页&/a&&/li&
&li&&a href=&#&&文
章&/a&&/li&
&li&&a href=&#&&相册&/a&&/li&
&li&&a href=&#&&Blog&/a&&/li&
&li&&a href=&#&&论
坛&/a&&/li&
&li&&a href=&#&&帮助&/a&&/li&
&div id=&content&&
&h3&前言&/h3&
&p&第一段内容&/p&
&h3&理解CSS盒子模式&/h3&
&p&第二段内容&/p&
&div id=&footer&&
&p&关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车&/p&&p&Copyright &2006 - 2008 Tang Guohui. All Rights
Reserved&/p&
好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^
原创作品，转摘请注明作者，作者：唐国辉。 感谢经典论坛网页标准化专栏斑竹blankzheng指点优化几处