Home  >  Article  >  Web Front-end  >  【CSS】关于div的对齐与网页布局_html/css_WEB-ITnose

【CSS】关于div的对齐与网页布局_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:53:201244browse

div布局之所以要学懂学透,是因为table的布局实在是难堪大用,如果是同处于一个表格之内,

各行的规格分布根本就没法调,

例如下面的一段非常简单的代码:

无标题文档
11111111111111 11111111111111 11111111111111 11111111111111
11111111111111 11111111111111 11111111111111 11111111111111
本想写出这样的布局:

但实际上出来的效果却是这样:

这很正常,因为table布局中仅有第一行对于td的设置是起作用的,余下行的td设置都会给第一行的td设置所覆盖。

这个问题很严重,尤其是各位网页设计师,把table的border属性设置成0的情况下,很难想出发生了什么?

解决这样的问题,如果还是用table布局,那你有两种方法,一是让这两行不处于同一个表格,二是使用表格嵌套的方式。

不过这也太蛋疼了吧,每次布局都要用一个新的表格?而且脚本对这么多表格如何编号?如何控制?

所以说table的网页布局不堪大用,只能用于行内的布局,table在行内布局的作用对于div确实强大很多。

但是div布局同样可以完成行内布局,只不过要定义好style中的float属性,并且完成了一次行内布局,要使用style中的clear:both换行,


如上的图层排放是通过如下的代码所实现的:

div
而对于一些如导航条等固定在页面首部或者页面尾部的图层,一些游离于体系之外的广告图层,则需要用到position的对齐方式,前者是fixed后者是absolute。

在上面的代码中,继续加入如下代码:

游离于体系之外
游离于体系之外
则能够出现如下效果:


被position:fixed的图层,即使滚动条拉下来也是一直挂着头部的:



上述关于“导航条”图层与“广告”图层的两行代码可以放在任何位置,不影响网络布局。那么,网页的所有代码演变成如下:

div
游离于体系之外
游离于体系之外
所以说,div布局比table布局强大得多,可控,可用。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn