八条常见的CSS错误及修复方法
作者：代码人 来源：代码人blog 发布时间：2010-04-08 16:54:00
很多人对于CSS都是边干边学习，因为它不像C#之类的语言那么复杂，看起来似乎挺简单，然而正是这种对CSS的不完整的理解，导致了许多的CSS代码破坏了布局，或者带来了无休止的调试，以下总结了八条最常见的错误，以及它们的解决之道：
1.不阅读或者没有读过W3C标准的文档。
上图是W3C CSS 2.1 规范截图，这是当前唯一的官方详细描述CSS2功能的文件，大部分都是干巴巴的条文，不过幸好有许多简短有用的部分，当你不清楚某些CSS性能的时候可以去查阅这个文档，下面列出一下比较常用的部分：
1.盒模型（The box model）
2.选择器（Selectors）
3.可视化格式模型(Visual formatting model)尤其是浮动（floats）和块格式(block formatting contexts)
2.DIV标签汤
新手写页面最容易碰见的情况：DIV一锅粥，不管什么地方都用一大堆的DIV标签去写。比如用div去模拟表格，这种用法是完全没有道理的，增加了页面的标签污染，这种做法带来一系列问题：页面加载慢、需要写更多的CSS、代码不容易维护等等。
这种DIV综合症基本上来源于对样式表基本工作机制的误解。比如一个人写了一个3层的DIV嵌套，给每个DIV添加对应的样式，如第一个DIV设置背景色，第二个设置外边距，给第三个设置字体大小，其实他没有意识到的是，除非绝对必要，这些属性都可以合并到一个div里去实现。
另一个原因似乎是想用DIV标签去替代诸如H1/H2/LI等更恰当的标签，这是应该避免的做法，因为可能会给使用订阅器、旧的浏览器或者手机浏览器的用户带来问题。
3.ID还是CLASS？
这张图很形象，橘黄色的是class，蓝色的是ID。使用class还是id，这是相当大一部分还没有掌握逻辑化的CSS布局的人的一个通病，澄清一下：ID是定义一个项目的，而class可以定义多个项目。一个很通俗的例子，你的身份证号就是ID，而身份证上写的“中国”就是class，很多人的身份证上都写的是中国，但是号码却和你的不同。
但是也不要到处乱用class，这仍然是一个对CSS的理解问题，下图说明了滥用CLASS和合理的用ID的区别：
0
投稿猜你喜欢
一、Python2中的字符存在的解码编码问题如果是现在正在用Python2的人应该都知道存在字符编码问题，就举一个最简单的例子吧：Pytho- 初级第一次在linux下安装mysql-5.7.19版本教程，如果已经会安装了，那么请看下一篇linux下安装多个mysql-5.7.19环
- 除了使用 sys.exc_info() 方法获取更多的异常信息之外，还可以使用 traceback 模块，该模块可以用来查看异常的传播轨迹，
- K-近邻算法概述简单地说, k-近邻算法采用测量不同特征值之间的距离方法进行分类。k-近邻算法优点：精度高、对异常值不敏感、无数据输入假定。
- 在编写自动化测试用例的时候，每次登录都需要输入验证码，后来想把让python自己识别图片里的验证码，不需要自己手动登陆，所以查了一下识别功能
- 一起画图吧为什么突然想搞这个画图软件呢不瞒各位，是因为最近接到了一个很小很小很小小得不能再小的小项目就是基于Tkinter，做一个简易的画图
- 本文实例讲述了Python高级编程之继承问题。分享给大家供大家参考，具体如下：多继承问题1.单独调用父类： 一个子类同时继承自多个父类，又称
- 如何在网页打开时显示“正在加载”之类的信息？代码及说明见下： <％ Response.Buffer =
- 一、Position1、语法：position:static/ absolute / fixed / relative2、参数：（1）sta
- 这篇文章主要介绍了python文字和unicode/ascll相互转换函数及简单加密解密实现代码，下面我们来了解一下。import reim
- 通过 register_shutdown_function 方法，可以让我们设置一个当执行关闭时可以被调用的另一个函数。也就是说，当我们的脚
- 上一篇文章介绍了Python使用OPENCV的目标跟踪算法实现自动视频标注效果，感兴趣的朋友点击查看，使用滑模变结构控制策略来解决汽车跟踪问
- 目录项目介绍已有功能环境安装Windows用看这里ubuntu用户看这里使用方式：主要代码项目地址项目介绍可以下载doc，ppt，pdf．对
- python基于新浪sae开发的微信公众平台，实现功能：输入段子---回复笑话输入开源+文章---发送消息到开源中国输入快递+订单号---查
- Django中提供了“信号调度”，用于在框架执行操作时解耦。通俗来讲，就是一些动作发生的时候，信号允许特定的发送者去提醒一些接受者。Djan
- 本文实例为大家分享了vue点击图片放大展示的具体代码，供大家参考，具体内容如下1.建立子组件,来实现图片方 * 能: BigImg.vue&l
- 学习了css一段时间,现在对css的一些技巧进行一次小结.希望能对那些刚学习css的新手们带来帮助.一、关于注释在创建xhtml+CSS网站
- 缘起最近复习设计模式拜读谭勇德的<<设计模式就该这样学>>该书以java语言演绎了常见设计模式本系列笔记拟采用gol
- python 换位密码算法的实例详解一前言：换位密码基本原理：先把明文按照固定长度进行分组，然后对每一组的字符进行换位操作，从而
- 一张表（ColumnTable）的结构如下图所示当前需要实现的功能：通过Number的值为67来获取当前的节点ID、父节点ID递归实现SQL
