div+css优缺点

产生背景

HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后，发布了XML，XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，XHTML语言就是一种可以将 HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。说了这么多，现在该说正题了——CSS。而CSS关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）——但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。

编辑本段应用环境

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。　　虽然对于在什么时候用div没有什么硬性的规定,但DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV：　　这里就是头部框架里要写的内容　　当然,可以用class来定义，但一般来讲如不是在同一页面会重复的元素，用id能更好的区别开来。　　查看如下定义代　　<ul id="navbar"> 　　<li id="articles"> 　　Articles</li> 　　<li id="topics"> 　　Topics</li> 　　<li id="about"> 　　About</li> 　　<li id="contact"> 　　Contact</li> 　　<li id="contribute"> 　　Contribute</li> 　　<li id="feed"> 　　Feed</li> 　　</ul> 　　<h1 id="masthead"> 　　<a href="/"> 　　<img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /> 　　</h1> 　　No. 214 　　定义了最上面的导航（ul部分），左边的大logo和那个圆圆的No.xxxx的标记.。　　他没有使用DIV来做顶部的框架，但却很好的说明了这些代码的用途，为什么?因为他活用了HTML提供的标签,以及样式名称的定义

编辑本段流行优势

1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。　　2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。　　3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。　　4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。　　5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。　　6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

编辑本段嵌入方式

行内套用　　我们可以在HTML文件内直接宣告样式。　　举例来说，Thisisfontsize16. 　　以上的HTML文件在浏览器上会显现为：Thisisfontsize16. 　　嵌入套用样式可以嵌入于HTML文件中(通常是在<head>内)。　　举例来说，<head><style type="text/css">div{}</style>< /head><body>背景颜色是红色</body> 　　以上的HTML会显现出：背景颜色是红色　　外部连接套用在这种方式下，所有的CSS样式宣告都是存在另外一个档案中。　　该档案通常名称为.css。　　在HTML文件的<header>..</header>之中，我们将用以下的程式码将这个.css档案连接进入：　　<linkrel=style sheettype="text/css" href="external-stylesheet.css"> 　　以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。　　汇入套用汇入套用外部的CSS样式也可以被汇入进HTML文件。　　汇入的做法为利用@import这个指令。　　@import的语法为：<style type="text/css"></style> 　　@import指令最初的用意，是为了能够针对不同的浏览器而运用不同的样式。不过，现在已经没有这个必要。现在用@import的目的，最常是要加入多个CSS样式。当多个CSS样式被@import的方式加入，而不同CSS样式互相有冲突时，後被加入的CSS样式有优先的顺位(详情请见CSS串接)。　　还有一种嵌入的方式是直接写在标签上的，不过这种写法有些限制，大多数标签都可以接受这种解法: 　　<div style="color:#000000;">文字</div> 　　这个代码通过直接嵌入标签的形式，使得标签内的文字更改颜色，而且根据css的优先调用级直接嵌入标签的写法也更直接更优先选择调用。

编辑本段常用标签

h1 这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^ .　ul 这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显) .　　　b 这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择　　h2 h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p。

编辑本段布局优点

一、使页面载入得更快 　　由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。　　二、降低流量费用 　　页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。　　三、修改设计时更有效率 　　由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。　　四、保持视觉的一致性 　　DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。　　五、更好地被搜索引擎收录 　　由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。　　六、对浏览者和浏览器更具亲和力 　　我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

编辑本段存在问题

尽管DIV+CSS具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在：　　第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。　　第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。　　第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在）。CSS+DIV还有待于各个浏览器厂商的进一步支持。　　第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

编辑本段常见错误

1. 检查HTML元素是否有拼写错误、是否忘记结束标记 　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。　　2. 检查CSS是否正确 　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。　　3. 确定错误发生的位置 　　如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。　　4. 利用border属性确定出错元素的布局特性 　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。　　5. float元素的父元素不能指定clear属性 　　MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。　　6. float元素务必指定width属性 　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。　　另外指定元素时尽量使用em而不是px做单位。　　7. float元素不能指定margin和padding等属性 　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。　　8. float元素的宽度之和要小于100% 　　如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。　　9. 是否重设了默认的样式? 　　某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。　　10. 是否忘记了写DTD? 　　如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

编辑本段常用工具

没有基础的人会觉得CSS+DIV开发很难学习。其实只要深刻理解其代码含义用任何文本编辑器都可以编辑。目前许多人在用记事本全部手写代码。当然也有人为了方便会用些其他工具：　　1.Notepad.exe记事本，（程序小，随时手工编辑，垃圾代码少，不能可视化预览）　　2.Dreamweaver（老牌网页编辑工具，功能全，程序比较大，但对DIV+CSS可视化支持程度不太友好）　　3..editplus(应该是升级版的记事本工具，代码编辑有颜色提示) 　　4.Ultraedit 　　5.Golive（Adobe宣布已停止开发）　　6.Topstyle(功能相当多，附有CSS码检查功能，减少写错的机会。尤其是它的HELP文件中详细的CSS指令介绍，很适于用作参考文件与初次接触CSS的人做为学习使用)

编辑本段兼容办法

区别IE6与FF： background:orange;*background:blue; 　　区别IE6与IE7： background:green !important;background:blue; 　　区别IE7与FF： background:orange; *background:green; 　　区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue; 　　IE7,IE8兼容: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 　　HEAD 　　1. CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6、IE7识别 _ 可被IE6识别 *+ 可被IE7识别　　2. IE专用的条件注释  <link rel="stylesheet" type="text/css" href="css.css" />  <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->  <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> 　　3. 几个浏览器对实际像素的解释 IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right) Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right) 　　4. 鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer 　　5. FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px'; 　　6. FireFox无法解析简写的padding属性设置，如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；　　7. 消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效　　8. CSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6; 　　9. CSS控制圆角：IE：不支持圆角； FireFox: -moz-border-radius:4px;或 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px; 　　10. CSS双线凹凸边框：IE：border:2px outset; FireFox： -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080; 　　11. IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格；FireFox对以上两者均不支持　　12. IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用　　13. IE支持Form中的Label标签，包括图片和文字内容；FireFox不支持包含图片的Label，点击图片不能让标记 label for 的Radio或CheckBox产生效果　　14. FireFox中的TextArea不支持onScroll事件　　15. FireFox不支持display的inline和block 　　16. FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行　　17. FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中　　18. 对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即 <style type="text/css">  </style> 这样可以避免一些访问过后的超链接就不具备hover和active样式了　　19. IE中设置长段落自动换行在CSS中设置word-wrap:break-word；FireFox中使用JS插入的方法来实现，具体代码如下： <script type="text/javascript"> /* <![CDATA[ */ function toBreakWord(el, intLen){ var obj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("div_id", 37); /* ]]> */ </script> 　　20. 在子容器加了浮动属性后,该容器将不能自动撑开解决方法：在标签结束后下一个标签中加上一个清除浮动的CSS clear:both; 　　21. 浮动后IE6解释外边距为实际边距的双倍解决办法：加上display:inline 　　22. IE6下图片下方会有空隙解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 　　23. IE6下两个层中间有空隙解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px; 　　24. LI中内容超过长度后以省略号的显示方法 <style type="text/css">  </style> （只适用与IE）　　25. 将元素的高度和行高设为相同值，即可垂直居中文本 <style type="text/css">  </style> 　　26. 对齐文本与文本输入框，须在CSS中增加vertical-align:middle;属性设置 <style type="text/css">  </style> 　　27. 支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置 min-height，为了兼容不支持min-height的IE6可以这样定义： { height:auto!important; height:200px; min-height:200px; } 　　28. web标准中IE无法设置滚动条颜色解决办法：在CSS中对body的设置改为对html的 <style type="text/css">  </style> 　　29. IE6由于默认行高问题无法定义1px左右高度的容器，解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px 　　30. 给Flash设置透明属性可使层显示在Flash之上 <param name="wmode" value="transparent" /> <!-- 解决IE上的问题 //> <embed wmode="transparent" …… > <!-- 解决FireFox上的问题 //> 　　31. FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会解决办法：用!important方法多定义一套Height和Width 　　32. FireFox对div与div之间的空格是忽略的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；而且原因很难查明　　33. 形如如下格式 <div id="parent"> <div id="content"> </div> </div> 当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展；解决办法在层的最下方产生一个高度为 1的空格,代码如下 <div id="parent"> <div id="content"> </div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div> 　　34. IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px 　　35. IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px

div的优缺点的更多相关文章

div水平垂直居中方法及优缺点
代码: <div class="father"> <div class="son"> </div></div> ...
emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
(转)Div和Table的区别
原文:http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html Div与table的区别 1:速度和加载方式方面的区别 div 和 ...
ExtJs特点、优缺点及注意事项
摘自:ExtJs特点.优缺点及注意事项 1.什么是ExtJs?ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的 ...
html中table的画法及table和div的区别
最近项目中,根据客户的要求需要在页面上展示各种报表什么的,各种表格的都会出现.这里也将table的画法,做一下总结.办法虽笨但很实用.这也是从高人那里学来的,总之是屡试不爽啊.就以下面的表格为例. 若 ...
转: Div与table的区别
1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...
利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
[转载]Div和Table的区别
1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...
Div与table的区别
1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...

随机推荐

Ext Js详解指南
什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext ...
Java 去除 ArrayList 集合中的重复元素
// One practice package Collection; import java.util.ArrayList; import java.util.Iterator; // 去除 Arr ...
vs 2015常用快捷键
原文 :http://www.23pro.com/post/4.html 1.回到上一个光标位置/前进到下一个光标位置 1)回到上一个光标位置:使用组合键"Ctrl + -"; 2 ...
酷派8702手机打开logcat
机器在出厂时将log的级别做了限制,方法是:拨号盘输入*20121220# -> 选择日志输出级别 -> 选择Java log level -> 选择LOGD即可.
flask扩展模块flask-sqlachemy 的使用---mysql数据库
该篇博客配置环境为:python版本3.5,flask2.0,python3中已经不再支持MySQLdb模块,所有这里我用了pymysql,所有使用前应该安装pymysql:pip install ...
【PHP系列】PHP推荐标准之PSR-1，PSR-2
说起码代码,刚上大学那会,老师就教导我们,要严格,规范的,把代码写好.代码如人,工工整整.提起规范化的代码,从一开始用命令行编辑C语言代码就开始控制,强制自己按照相关的标准来,所以,现在写代码,不规范 ...
angular : $eval & $timeout
$digest: function() { var watch, value, last, watchers, length, dirty, ttl = TTL, next, current, tar ...
JavaScript中的函数使用
append() 是代表改变格子的内容 prev()是代表前一个格子 next()是代表下一个相邻的格子 hide()是代表隐藏 show()是代表显示 childen()是代表子节点 eq()是代表 ...
laravel中的Database Notifications
创建Post and User模型 php artisan make:model Post php artisan make:model User 创建posts and users 表文件 ph ...
[hihoCoder]1014 Trie水题
最最最最最最最基本的Trie词频统计应用了. package trie; import java.util.Scanner; public class Main { public static voi ...

div的优缺点