css网站布局实录学习笔记第三部分网页布局与定位

第三章 CSS网页布局与定位

3.1 div

几乎XHTML中的任何标签都可以用于浮动与定位，而div首当其冲。对于其他标签而言，往往有它自身存在的目的，而div元素存在的目的就是为了浮动与定位。

3.1.1 div是什么

div是XHTML中制定的、专门用于布局设计的容器对象。在传统表格式布局中，之所以能够进行页面的排版布局设计，完全依赖于表格对象table。如今，接触另一种布局方式——CSS布局。div正是这种布局方式的核心对象。仅从div的使用上说，做一个简单的布局只需要依赖两样东西：div与CSS。因此有人称CSS布局为div+css布局。

3.1.2 如何使用div

只需要应用<div></div>标签，将内容放置其中，便可以应用div标签。但是，div标签之声一个标识，作用是把内容标识成一个块区域，并不负责其他事情。

div标签中除了直接放入文本外，也可以放入其他标签，还可以多个div进行嵌套使用，最终目的是合理地标识出内容区域。

在使用div标签时，可以加入一些属性，比如id、class、align、style等。在CSS布局方法，为了实现内容与表现的分离，不应当将align、style两个属性编写在XHTML页面的div标签中，因此，最终的div代码只能拥有以下两种形式：

3.1.3 理解div

在一个没有任何CSS应用的页面中，即使应用了div，也没有任何实际效果。那又如何理解div在布局上的重大潜能呢？尝试编写两个div，用于左分栏与右分栏，代码如下：

此时浏览器能够看到的仅仅是上下两行文字，并没有看出div的任何特征。

要记住一点，div是一个block对象——块对象（或者块级元素）。XHTML中的所有对象，几乎都默认为两种对象类型：

block块状对象：块对象指的是当前对象显示为一个方块。默认显示状态下，它将占据整行，其他的对象只能在下一行显示。
in-line行间对象（或者称内联元素）：与block对象相反，它允许下一个对象与之共享一行进行显示。
块状div说明，它在页面中并非用于类似于文本那样的行间排版，而是用于大面积，大区域的块状排版。

从页面效果发现，网页中除了文字之外，没有任何其他效果。两个div之间的关系只是前后关系，并没有出现类似于表格的田字型，因此，div本身与样式没有任何关系。样式是需要编写CSS来实现的。

在CSS布局中，所要做的工作可以简单归集为两件事：一是使用div将内容标记出来，二是为了这个div编写所需的CSS样式。