在没有学习div之前,网页布局是件非常麻烦的事情,由于缺乏足够多的规则对网页的内容进行组织,因此,显得十分麻烦。而div便是为网页布局而生。div最大的特点便是可以进行任意的嵌套,并且嵌套的div之间互相独立,互不影响,这便使得网页中的内容相对位置不会发生改变。div有三种重要的位置方式(position):relative, absolute和fixxed。其中需要注意的是,如果要使嵌套的div的postion生效,必须在它嵌套的上一层div中声明position,三种方式皆可。另外,借助于盒子模型,也能够加深我们对于布局的理解。如下图(图片来自于百度百科):
图1 盒子模型
实例效果:
图2 网页实例效果
代码地址:https://github.com/JiasenLee/javaweb_in_action/tree/master/HTML实战任务5作业