CSS 布局

html-css017

CSS 布局,第1张

因为你把每个DIV都加了边框啊。

比如说一个DIV得宽度是100

你在里面放了2个50宽度的DIV

然后设置了这个DIV的边框分别为1px

那么这里面的两个DIV宽度加起来就不是100了。

而已104px

这样自然就换行了

优点:

第一、利于搜索引擎蜘蛛爬行

根据总结和经验,div+css布局有利于蜘蛛的爬行,拿html的table布局和div+css布局的网页来做对比,很显然table的字节大于div+css的,字节小就有益于搜索引擎蜘蛛下载页面所用的时间,而且也有益于蜘蛛爬行到网站深处。

第二、易于修改

在一般情况下,div+css布局的网站,都是将html页面和css文件分开的,div+css的特点就是能将网页的内容和表现形式分离,所以,假如你要修改网站整站布局的话,一般只需要修改css文件里的的个别属性即可,而这种特点是table不具备的。

第三、减少网页加载时间

前面就提到过,div+css是将css文件和html文件分开的,当用户点击网站时,是在同时下载css文件和html文件,所以可以提高打开网页的速度。

缺点:

第一、开发技术高

众所周知,div+css要兼容各种浏览器,这样增加了div+css开发的难度。

第二、开发时间长

div+css布局相对于table布局来说,div+css的耗费时间要比table布局的时间长很多,另外考虑到浏览器兼容的问题,各种浏览器间的测试也是一个费时的事情。

第三、开发成本高

就上两点所说,高技术和长时间决定了他的成本。

(1)表格布局

表格布局容易掌握,布局方便。但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码;而且表格布局的网页要等整个表格下载完毕后才能显示所有内容,所有表格布局浏览速度较慢。

(2)CSS+DIV布局

通常要实现比较精确和自适应的层布局需要设置层的样式,即用CSS控制层的位置。CSS+DIV布局采用Div来定位,通过Div的border(边框)、padding(填充)、margin(边界)和Float(浮动)等属性来控制板块的间距,具体实施是通过创建Div标签并对其应用CSS定位及浮动属性来实现。

CSS+DIV布局需要编写大量CSS样式代码来控制各布局DIV层,因此要掌握它相对表格布局会困难一些。但CSS+DIV布局较表格布局更加灵活实用,网站布局后很容易就能调整网站的布局结构;而且CSS+DIV布局的各布局DIV层可以依次下载显示,因此其访问速度较表格布局要快。