CSS网页布局参考.docx

详谈CSS网页布局中容易发生的错误编码随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法。在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学****与进步。一、检查HTML元素是否有拼写错误是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。可以用Dreamweaver的验证功能检查一下有无错误。二、检查CSS是否正确:检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。三、确定错误发生的位置:如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。四、利用border属性确定出错元素的布局特性:使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。五、float元素的父元素不能指定clear属性:MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。六、float元素务必指定width属性:很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。七、float元素不能指定margin和padding等属性:IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。八、float元素的宽度之和要小于100%:如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。九、是否重设了默认的样式?某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。十、是否忘记了写DTD:如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头。CSS布局:让页底内容永远固定在底部我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间,不管浏览器的高度怎么变化,我们要想让页底内容始终固定在底部,本文提供了一个CSS解决方案:XHTML<divid="wrap"><divid="main">主体</div></div><divid="footer">这里是页底footer内容</div>CSS<style type="text/css"> * {margin:0;padding:0;}  html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto;     padding-bottom: 60px;}  /* 必须使用和footer相同的高度 */ #footer {position: relative;