DIV+CSS网页标准化布局(一）

1、DIV+CSS定义及优势

Div+css 是什么?

Div+css 是一种目前比较流行的网页布局技术

Div 来存放需要显示的数据(文字，图表..) , css 就是用来指定怎样显示， 从而做到数据和显示相互的效果

Div+css 优势

采用DIV+CSS模式的网站具有以下优势： 表现和内容相分离 代码简洁，提高页面浏览速度 易于维护和改版 提高搜索引擎对网页的索引效率

我们可以简单的这样理解div+css:

div 是用于存放内容(文字,图片,元素)的容器。

css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.

2、[无意义]的HTML元素div和span

HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而 div 和 span 标签似乎没有任何内容上的意义 ，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是[无意义]的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用 它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。 span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行） ，用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。 div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制

3、页面布局的盒子模型

（1）盒子模型的相关属性

margin（外边距/边界） border（边框） padding（内边距/填充 ）

我们看图理解一下各属性作用：



以上属性又分为上、右、下、左四个方向

问题：页面元素的宽度width、高度height如何计算？
答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度

　　

（2）盒模型的层次关系

我们通过一个经典的盒模型3D立体结构图来理解，如图：


从上往下看，层次关系如下：

第1层：盒子的边框(border)，
第2层：元素的内容(content)、内边距(padding)
第3层：背景图(background-image)
第4层：背景色(background-color)
第5层：盒子的外边距(margin)

从这个层次关系中可以看出，当同时设置背景图和背景色时，背景
图将在背景色的上方显示

　

4、声明盒子模型的CSS属性

例如：

  1     html  > 
  2         head  > 
  3             title  > 盒子模型   title  > 
  4             style  > 
  5               #box   {                                 /*   ID为box的盒子模型       */ 
  6                   width  :  200px  ;                       /*   盒子的宽度为200px       */ 
  7                   height  :  200px  ;                      /*   盒子的高度为200px       */ 
  8                   border  :  5px solid #ccc  ;             /*   盒子边框实线各边宽5px   */ 
  9                   padding  :  10px  ;                      /*   盒子的4个内填充为10px   */ 
 10                   margin  :  20px  ;                       /*   盒子的4个外边距为10px   */ 
 11               } 
 12             style  > 
 13         head  > 
 14         body  > 
 15             div   id  ="box"  >                                使用DIV声明一个盒子      --> 
 16              内容区                                    盒子内容可再嵌套个盒子   --> 
 17             div  > 
 18         body  > 
 19     html  >  

查看更多关于DIV+CSS网页标准化布局(一）的详细内容...