CSS div布局简介

1 什么是布局

HTML页面包含很多元素，这些元素按照一定的结构进行排列。

不同页面的结构千奇百怪，无论页面多么复杂，可以通过最基本的两种布局进行组合。

我们查看各大网站源码，用的最多的标签就是div标签，就是用来实现布局。

最基本的布局：行布局与列布局；

行布局

各元素以行进行排列。

列布局

各元素以列进行排列。

组合布局

页面会灵活利用基本的行布局与列布局，组合实现出复杂的页面。

上述页面的行列可进行如下划分

首先划分3列；

然后：第1列划分多行，第3列可进一步划分多行，再划分多列。

早期div布局还没流行时，我们习惯使用table进行页面布局。

table布局的缺点：

1）用户体验差。等table所有页面加载完毕才开始显示（渲染）。当table内容很多网速不太好时，会出现明显的卡白。

2）不够灵活。table采用整体的行列拆分式做法，非常麻烦，以后要修改布局也不方便。

后期div布局流行，不再使用table进行布局。

通过div实现基本的行布局与列布局。

进一步组合实现复杂页面布局。

1）div实现行布局

div默认就占一行,天然能实现行布局。

2）div实现列布局

div结合浮动样式实现列布局，下节进一步介绍。

两者配合关系：页面整体布局会采用div布局，细节的空白距离会采用盒子模型。