以正确的方式重新学习CSS

我是一名从事网络开发两年多的程序员。尽管过去两年我一直在做前端工程，但我认为我做得不对
例如：

• 我仍然使用表格进行布局，而不仅仅是CSS。我还没有找到一种方法来正确地呈现数据对齐和表格化
• 我不知道

  display:none

  和

  visibility:hidden

  之间的区别（好吧，我现在知道了。但是有很多情况，比如-填充、边距、溢出等）
• 我还没有真正遵循继承的方式来编写CSS。几乎每种风格都以

  #

  开头，而不是以类开头
• 当一个页面加载缓慢时，html元素就不在适当的位置，只有当它完全加载时，html元素才会有序
• 我不知道firebug中的这张图片传达了什么（顺便说一句，firebug是我的救星。如果没有firebug，生活是不可能的）

• 每当布局混乱时，我都会尝试使用position:absolute。结果总是一团糟

我知道我在这里做了很多错事（我需要纠正），但我设法把事情安排妥当，并以某种方式显示出来，结果却在不同的浏览器中看到了它

我不想做一个CSS或CSS的傻瓜入门。我知道的不止这些。我想用正确的方法学习CSS。关注像我上面展示的例子这样的问题并加以纠正

---

你能给我指点参考资料或添加CSS开发人员常用的建议和技巧吗？

请查看Jeffrey Zeldman的文章。

我假设你已经安装了

---

而且，可能会得到更相关的结果。

练习，练习，练习。你知道你不知道什么，这是我心目中成功的关键。你做的每一个项目，都要努力提高你的技能，最终以正确的方式完成它将成为你的第二天性

Eric Meyer的是一个很好的资源，可以准确地理解选择器和规则是如何工作的，同时也是一个很好的参考

关于你发布的内容的一些想法

• 样式表将显示 帮助解决浏览器差异

• 表格数据应使用表格。
  它的布局应该避免表格 支持css的标签

---

你可以先读一些关于这方面的好书。埃里克·迈耶的作品是手工制作的，质量非常高。另一本我学到很多的书是《CSS设计之禅》
剩下的就是努力和实践。确保你理解了为什么某些东西是这样工作的，不要满足于“反复试验”的css开发
---

好吧，我将尽我所能解决其中一些问题

display:none

和

visibility:hidden

之间的区别在于设置了显示时，该项目的空间没有保留。因此，想象一下，当设置显示时，项目已“离开”页面。而如果您使用的是可见性选项，则元素位于页面上，在其位置上不可见。我解释清楚了吗？希望这对你有意义
至于填充、边框和边距，这都称为CSS框模型。信息包含为元素、填充、边框，然后是边距。因此padding是元素内容与其边框之间的距离，而margin是边框与相邻元素之间的距离。再一次，我希望这有助于你澄清这一点

---

过渡到CSS有时很棘手，但很值得。
基本原理很简单，如果你还没有一些CSS编码，你应该很容易掌握
关于交叉浏览器布局的最佳实践、浏览器怪癖、黑客和其他粗略的东西是另一回事
这是我的建议阅读清单，它们都在我的书架上，当然值得一读！如果你问我，我会说如果你是一个网页设计师，你应该读这本书
---

迈克尔·鲍尔斯为我改变了一切。不再是无止境的尝试和错误，而是问题模式-解决方案。不可或缺。
这里有一些生活的一般规则：
• 表格适合于表格数据。如果您要显示的数据属于表中的数据，请不要特意用
  s创建网格。没有道理
• 就布局而言，使用
  标记，远离表格。了解浮动属性。有了CSS3，将出现新的、改进的display属性标准。学习它们

• display:none

  从视口中完全删除元素。相反，

  visibility:hidden

  保留了元素本来会占用的空白。在这两种情况下，元素都保留在DOM中。
• 类和ID的一般规则。页面元素和ID在每个页面上应该有一对一的关系。例如，#列1、#列2、#页脚、#页眉。另一方面，页面元素和类应该是多对一关系，如：.container或.navLink。当您知道要大量使用某个特定元素时，请使用类
• 从效率的角度考虑。样式规则越少，页面加载速度就越快，调试样式问题就越容易

---

我还有大约一百万件事要说，但这应该让你开始了。
对于布局驱动的CSS，请务必查看。这有点尖端，因为IE7不支持

显示：table

（很遗憾，我知道），但它涵盖了浮动和绝对定位等传统布局CSS技术，并提供了从table ba的良好过渡