• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS网页布局时常犯的几种小错误小结

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含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初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06浮动后的li元素居中实现方法
  • 2017-08-06在可编辑div中插入文字或图片解决思路与实现步骤
  • 2017-08-06css expression实现的图片自动缩放
  • 2017-08-06深入理解CSS中选择器的逻辑处理
  • 2017-08-06全面了解css行高line-height的用法
  • 2017-08-06CSS3 Columns分列式布局方法简介
  • 2017-08-06利用CSS截取标题长度方法
  • 2017-08-06详解CSS3选择器的使用方法汇总
  • 2017-08-06IE6/7/8/9中table元素align=center权重比margin:0大的实例说明
  • 2017-08-06带你深入剖析inline-block属性值的前世今生

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • firefox和谷歌不显示body背景图片的解决方法
    • css样式去重写法缩减代码量
    • css教程之样式表的基本语法(二) class(类)和id的一个小实例
    • 任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
    • CSS 数字和字母将容器撑大问题解决
    • 解决纯css写三角形在firefox下的锯齿问题
    • CSS实现的一闪而过的图片闪光效果
    • 优化浏览器渲染 指定图片尺寸
    • CSS基础教程十九之CSS图文混排,图像签名,多图拼接和图片特效
    • SASS 笔记

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有