话题 首页 > CSS3 教程 > CSS3 教程话题列表 > 详情

DIV+CSS 是什么意思?DIV+CSS有什么优点与缺点?

精华
chenjinjun1 2016-11-15 11:48:11 浏览(5600) 回复(4) 赞(0)
初学[CSS](http://www.w3cschool.cn/css),在[W3Cschool.cn](http://www.w3cschool.cn)官方交流群里面,常常看到大家讨论[DIV+CSS](http://www.w3cschool.cn/search?w=DIV%EF%BC%8BCSS),但是不知道是什么意思。我自己[百度](http://www.w3cschool.cn/ycx23r)了很久,有说DIV就是取代`<table>`的,还有说[搜索引擎](http://www.w3cschool.cn/seoer)喜欢DIV,反正很多。能不能简单的说一下DIV+CSS(或者DIV)是什么意思?为什么用它?为什么不用`<table>`?有什么优/缺点?
css css3

回答(4)

娃娃脸呦 精华 2016-11-15

一、什么是DIV+CSS?


字面意思:DIV+CSS就是,网页HTML代码主要使用DIV将内容模块化,用CSS控制其显示效果。 如何理解:DIV全称division(区分) <div>标签是区隔标签,表示一块可显示的区域,用于摆放位置,属于块元素。而“div+css”是一种我们想当然的叫法,认为主要框架是div搭建的,但是实际上根据web标准(详细可在W3Cschool“web标准”),标准界面是由XHTML+CSS组成的。

简单来说:DIV是框架,CSS是样式,用来装饰框架。( 网页布局就像盖房子,div负责把这栋房子盖起来,而css负责告诉他怎么盖! )

网页布局就像盖房子

二、DIV+CSS的优点和缺点


好处很多,从前端层面来说,大大减轻工作量,提高工作效率。 从界面布局来将,能够更准确的将页面元素定位,且保证在不同的环境下获得基本一致的效果。 还有比如你说的SEO方面的原因,实际上这个应该更多指的语意化标签。

Div+CSS的优点:

1、因为采用CSS布局,不象表格布局充满各种各样的属性和数字,而且很多css文件通常是共用的,从而大大缩减页面代码,提高页面浏览速度。

2、结构清晰,对搜索引擎更加友好。更容易被搜索引擎收录,具备搜索引擎SEO的先天条件,配合优秀的内容和一些SEO处理,可以获得更好的网站排名。

3、兼容性更好,符合web标准规范的发展趋势,可以在几乎所有的浏览器上都可以使用,不会出现在不同的浏览器中效果差距很大的情况。

4、缩短改版时间,因为网站的布局都是通过外部的css文件来控制,只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

5、强大的字体控制和排版能力,CSS控制字体的能力比糟糕的FONT标签好多了,CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。

6、提高易用性,使用CSS可以结构化HTML,例如:p标签只用来控制段落,h1-h6标签只用来控制标题,table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

7、更好的扩展性。你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint等。

8、更灵活控制页面布局,通常页面的下载是按照代码的排列顺序,而表格布局代码的排列代表从上向下,从左到右,无法改变。而通过CSS控制,您可以任意改变代码的排列顺序,比如将重要的右边内容先加载出来。

9、表现和内容相分离,干净利落,将设计部分剥离出来放在一个独立样式文件中,而网页主要来放置您的内容,你可以减少未来网页无效的可能。

10、更方便搜索引擎收录,并获得更高的评价。用只包含结构化内容的HTML代替嵌套的标签,主次分明,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。

11、Table表格布局灵活性不大,你只能遵循 table trtd 的格式。而div你可以 div ulli 也可以 ol li 还可以 ul li...... 12、Table表格布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div 更能体现样式和结构相分离,结构的重构性强。

13.以前一些必须通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。

DIV+CSS的缺点:

1、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

2、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。

3、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。

4、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

一笔荒芜 2018-05-31

好慢呀,空空如也,半天不来大神解决,大佬在哪啦

1144100656 2018-05-31

大神在哪里呀,大神在哪里呀,大神在哪里呀.

1152696398 2018-05-31

刚学习程序,过来学习学习!!!!...

要回复,请先登录 或者注册