`
cindylu520
  • 浏览: 143440 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

CSS网页布局时常犯的几种小错误

    博客分类:
  • CSS
阅读更多

CSS网页布局时常犯的几种小错误:
  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声明。

分享到:
评论

相关推荐

    CSS网页布局时常犯的几种小错误小结

    CSS网页布局时常犯的几种小错误:  1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。  2. 检查CSS是否书写正确 检查一下...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...

    固定-固定:CSS位置:固定限定符

    固定-固定:CSS position... 有关此方法的详细信息,请注意以下几点:有几种已知的浏览器在运行包含的功能测试时报告错误结果。 这些浏览器已不再开发,但是由于它们很流行,因此该脚本为它们查找名称并认为它们的posit

    css-positioning:2015 年 CSS 定位技术的高级概述

    - 需要额外的清除步骤(存在几种技术) - 不能强制物品具有相同的高度 - 依赖于 HTML 顺序 内联块 - 仅水平 + 可以沿主轴居中 - 无法沿交叉轴对齐 - 吸收空格作为字符(作为所有内联元素) - 不能强制物品具有相同...

    ExtAspNet_v2.3.2_dll

    目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...

    X3BLOG AJAX国产大型开源多用户博客系统 1.1.0.beta1源码版

    DIV+CSS布局,交互方式采用当前最流行的AJAX技术,所有操所在一个页面完成,并实现了AJAX的最高应用—— AjaxUpload,所有操作一气呵成,带来前所未有的用户体验。 简洁的主题与皮肤开发技术,更合理的模块化...

    X3BLOG AJAX国产大型开源多用户博客系统 1.1.0.beta1编译版

    DIV+CSS布局,交互方式采用当前最流行的AJAX技术,所有操所在一个页面完成,并实现了AJAX的最高应用—— AjaxUpload,所有操作一气呵成,带来前所未有的用户体验。 简洁的主题与皮肤开发技术,更合理的模块化...

    asp.net知识库

    帮助解决网页和JS文件中的中文编码问题的小工具 慎用const关键字 装箱,拆箱以及反射 动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/catch语句带来的warning 微软的应试题完整版(附答案) 一个...

    ASP.NET的网页代码模型及生命周期

    第4章 ASP.NET的网页代码模型及生命周期 从本章开始,就进入了ASP.NET应用程序开发的世界。在了解了C#的结构,以及面向对象的概念后,就可以从面向对象的思想开发ASP.NET应用程序。在ASP.NET中,能够使用面向对象的...

    Java语言基础下载

    线程中断/恢复的几种方式 178 创建线程的两种方式 179 线程的控制 180 实例分析 182 内容总结 189 独立实践 190 第十二章:高级I/O流 192 学习目标 192 I/O基础知识 193 字节流 193 字符流 194 节点流 194 过程流 ...

    FE-Interview-Questions:关注公众号「前端进阶之旅」,一起学习。前端面试常考问题整理,按模块知识点分类 Front-end-Developer-Questions by Modules and knowledge

    FE-Interview-Questions前端面试常考...类的定义和继承的几种方式前端错误监控页面布局CSS盒模型及BFCDOM事件的总结HTTP协议综合版本Interview-QuestionsFront-end-Developer-Questions[question-and-answer-version]

    SaaSDesignPatterns:有用的模式和技术可以快速发货

    例子: 仪表板布局管理员后端和管理员命名空间会员专区登录屏幕数据库结构定价模式多租户CSS框架Javascript框架每个部分将有几个不同的示例,并分别提供一个注释。 文章并不意味着代码是完整的,甚至不是演练,而...

    seongmookdev.github.io:seongmookdev.github.io

    几个响应式布局选项(单个,存档索引,搜索,启动和分页首页)。 针对搜索引擎进行了优化,并支持和数据。 可选的,, ,,相关文章, ,等。 评论支持(由 , ,Google +, ,通过基于静态的支持,以及)。

    JongHyeonSong.github.io

    几个响应式布局选项(单个,存档索引,搜索,启动和分页首页)。 针对搜索引擎进行了优化,并支持和数据。 可选的,, ,,相关文章, ,等。 评论支持(由 , ,Google +, ,通过基于静态的支持,以及)。

    archivis.me:我在Archivis.me上的个人博客

    几个响应式布局选项(单个,存档索引,搜索,启动和分页首页)。 针对搜索引擎进行了优化,并支持和数据可选的,, ,画廊,相关文章, 面包屑链接,导航列表等。 评论支持(由Disqus , Facebook ,Google +, ...

    RFCRestyle-crx插件

    调整HTML ietf RFC的大小,颜色和布局,以便于阅读,导航(固定位置ToC... TOC(目录)标题的CSS(样式)非常小的变化。 2013年6月8日 - 版本1.0.1.0:  根据请求,更改了URL匹配以包含草稿。  以前只对*://tools.i

    DolphinPHP快速开发框架

    表单构建器目前内置了多达30几种表单项类型,比如:单行文本、多行文本、百度编辑器、markdown编辑器、单选、多选、开关、联动、取色器、图标选择器、图片裁剪等等,只需几行代码,即可实现复杂且人性化的功能。...

Global site tag (gtag.js) - Google Analytics