《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代码只能拥有以下两种形式：

• <div id="id名称">...</div>
• <div class="class名称">...</div>

3.1.3 理解div

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

　　<div>左分栏</div>

　　<div>右分栏</div>

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

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

• block块状对象：块对象指的是当前对象显示为一个方块。默认显示状态下，它将占据整行，其他的对象只能在下一行显示。
• in-line行间对象（或者称内联元素）：与block对象相反，它允许下一个对象与之共享一行进行显示。

　　块状div说明，它在页面中并非用于类似于文本那样的行间排版，而是用于大面积，大区域的块状排版。

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

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

3.1.4 并列与嵌套div结构

　　div可以多层进行嵌套使用，嵌套的目的是为了实现更为复杂的页面排版。比如：

　　<div id="header">头部</div>

　　<div id="center">

　　　　<div id="left">左分栏</div>

　　　　<div id="right">右分栏</div>

　　</div>

　　<div id="footer">底部</div>

　　上述代码中，为每个div定义了一个id名以供识别。可以看到id名为header、center和footer的3个div对象，它们之间属于并列关系，在网页布局结构中以垂直方向布局而至上而下。

　　在center中，为了内容的需要，又使用了一个左右分栏的布局，这两个div本身是并列关系，而它们都处于center之中，因此它们与center形成了一种嵌套关系。

注：在适当情况下，应当尽可能少地使用嵌套，以保证浏览器不用过分消耗资源来对嵌套关系进行解析，简单的嵌套结构更有利于对版式的理解与控制。

3.1.5 使用合适对象来布局

　　Web标准推荐使用尽可能符合页面中元素意义的标签来标识元素。在CSS布局中，要求尽可能多地使用XHTML所支持的各种标签，最终网页对象都将拥有良好的可读性。再通过进一步的CSS定义，其样式表现能力丝毫不比表格差，而且拥有比表格更多的样式控制方法，这正体现了CSS布局的基本优势。

　　XHTML标签与功能简述：　　

　　上述列举了全部的XHTML标签对象，但并非所有对象都会经常使用到。

3.2 一列固定宽度

　　使用div设置一个带有header、center和footer三个并列的布局，这3个div的基本表现形式正是：一列式布局。

　　一列式布局是所有布局的基础，也是最简单的布局形式。一列式布局是一种固定宽度的布局样式。

注：默认状态下，即在未设定div宽度的情况下，div将占据整行空间。

3.3 一列宽度自适应

　　自适应布局是一种非常灵活的布局形式，它能够根据浏览器窗口的大小，自动改变其宽度或高度值。

　　实际上，默认状态下的div将占据整行空间，即是宽度为100%的自适应布局。一列适应布局需要改变这个设置，将宽度由固定值改为百分比值的形式便可以完成。

　　一列固定宽度居中　　

　　页面整体居中是网页设计中常见的形式。在传统表格式布局中，使用表格的align="center"属性来实现表格居中，再在其单元格中装内容，实现整个页面居中。

　　而div本身也支持align="center"属性，同样可以让div呈现居中状态。但是，CSS布局是为了实现表现与内容的分离，align对齐属性是一种样式代码，书写在XHTML的div属性中，有违于分离原则，因此应当使用CSS的方法来实现内容居中。居中的CSS样式：margin: 0px auto;

　　除了直接使用数值外，margin还支持一个值叫auto的属性值，auto值是让浏览器自动判断边距。在这里，给当前的div左右边距设置为auto，浏览器就会将div的左右边距设为相同，从而呈现出居中的状态。

注：margin属性用于控制对象的上、右、下、左（顺时针旋转）4个方向的外边距。当margin使用两个参数时，第一个参数表示上下边距，第二个参数则表示左右边距。

3.4 二列固定宽度

　　对于二列布局自然需要用到两个div。分别使用两个id为left和right的div。为了实现二列式布局，必须使用另一个属性——float。

　　float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局。float的可选参数分别为：none/left/right。float使用none值时表示对象不浮动，使用left时对象将向左浮动，而使用right时对象将向右浮动。

3.5 二列宽度自适应

　　与一列自适应宽度布局设置一样，是通过对百分比宽度值进行指派。比如：设置左栏宽度为20%，右栏宽度为70%。为什么没有将右栏设置为80%？

　　这是因为，在CSS布局中，一个对象的宽度不仅仅由width值来决定。对象的真实宽度是由对象本身的宽(width)、对象的左右外边距(margin)以及左右边框(border)，还有内边距(padding)等属性相加而成。

3.6 两列右列宽度自适应

　　在实际应用中，有时候需要左栏固定宽度，而右栏根据浏览器窗口大小自适应。这只需要设置左栏的宽度值，右栏不设置任何宽度值，并且右栏不浮动即可。

3.7 二列固定宽度居中

　　对于二列分类居中问题，再使用margin: 0px auto；似乎不能达到效果，这时就需要进行div的嵌套设计来完成。可以使用一个居中的div作为容器，将二列分栏的两个div放置在容器中，从而实现二列居中显示的效果。XHTML代码结构如下：　

　　<div id="layout">

　　　　<div id="left">左列</div>

　　　　<div id="right">右列</div>

　　</div>

　　CSS代码如下：

　　#layout {

　　　　margin: 0px auto;

　　　　...

　　}

3.8 三列浮动中间列宽度自适应<