html中div页面布局,前端入门篇（二）：利用Div + CSS快速布局页面

在各类智能手机和平板出现前的很长一段时间里，Web网页都是通过表格进行布局的。由于表格在视觉呈现上的直观，早期很多WYSIWYG(所见即所得)的网页设计软件通常也多使用表格。

但是这种布局方式有很大的局限性——比如，同一行或列的单元格在长度、宽度上会相互影响和制约等。如今，表格式布局早已不再流行，本文就此介绍将其「拍死在沙滩上」、目前最为广泛采用的网页布局方式——Div + CSS。

一、什么是Div+CSS

所谓Div + CSS,是指通过HTML「层」标签——

二、为什么要用Div

为什么要用Div取代Table？一言以蔽之：灵活。

Table的格式其实是一定的——首先要有一个表格，其次表格里要有行，每一行又分为许多列(单元格)。如果在同一行的某个单元格中，要布局放入更多内容，而左右两边的单元格不变的话，要怎么实现？

只能在单元格里再嵌套一个表格。如果嵌套层数少那还好，一旦层数多起来，绝逼要疯。这还是不涉及修改的情况。如果某天你老板拍脑袋说，把登陆模块给我从右边移到左边，你就等着加班吧。

Tabel 嵌套示意

与之相对地，用Div布局就远为灵活。首先，每一个

三、如何连接Div和CSS

但是Div所谓的灵活也并非随心所欲、胡乱排布，它也是遵守一定的排布规则的——事实上，它在排布上与Table还是有些相似的。具体来说，Table的排布方式一般如下。