以正确的方式重新学习CSS
我是一个做web开发超过两年的程序员。 尽pipe过去两年我一直在做前端工程，但我认为我没有做到这一点
例如：
- 我仍然使用表格进行布局，而不是仅使用CSS。 我还没有find一种方法来正确呈现数据alignment和表格。
- 我不知道
display: none之间的区别display: none和visibility: hidden（嗯，我现在知道，但有很多情况下，如填充，边距，溢出等） - 我没有真正遵循inheritance的方式来编写CSS。 几乎每种风格都以
#而不是类开头。 - 每当一个页面加载缓慢的时候，html元素不合要求，只有在完全加载的时候，才会进入顺序。
- 我不知道萤火虫这幅画是怎样传达的（顺便说一下，萤火虫是我的救世主，没有萤火虫，生活本来是不可能的）
- 每当布局乱七八糟的时候，我都想用position：absolute。 它总是在一个更大的混乱。
我知道我在这里做了很多错误的事情（而且我需要把它弄对），但是我设法把事情弄明白，然后以某种方式显示出来，只是看到它在不同的浏览器中搞砸了。
我不想做一个CSS或CSS的傻瓜入门。 我知道的不止这些。 我想以正确的方式学习CSS。 关注像我上面展示的例子那样的问题并纠正它们。
你可以指点我的资源，或者添加CSS开发人员使用的常见build议和提示，以使其正确无误。
查看Jeffrey Zeldman的“ 使用Web标准进行devise” 。
以下是一些生活的一般规则：
- 表格适用于表格数据。 如果您提交的数据属于表格，请勿尝试使用
<div>s制作网格。 没有意义。 - 就布局而言，使用
<div>标签，远离表格。 很好地了解浮动属性。 随着CSS3，将有新的，提高显示属性的标准。 学习它们。 -
display: none从视口中完全删除元素。 相反，visibility: hidden保留了元素会占用的空白。 在这两种情况下，元素都保留在DOM中。 - 类和ID的一般规则。 页面元素和ID应该每个页面具有一对一的关系。 例如，＃Column1，＃Column2，#Footer，#Header。 另一方面，页面元素和类应该是多对一的关系，如：.container或.navLink。 当你知道你要使用一个特定的元素时，使用类。
- 从效率angular度考虑。 您拥有的样式规则越less，页面加载的速度就越快，debugging的样式问题就越简单。
我还有大约一百万个其他的东西要说，但这应该让你开始。
对于布局驱动的CSS，一定要看看你知道关于CSS的一切是错误的 。 这是一个前沿，因为IE 7不支持display: table （可惜，我知道），但它确实覆盖了浮动和绝对定位等传统布局CSS技术，并且提供了从基于表格的布局到CSS布局的良好转换。 我强烈推荐它。
我不知道你是用什么dynamic语言编写的，或者只是编写原始的HTML代码，但是你也应该在你的项目中使用SASS ，因为我认为这有助于你强调inheritance。 否则，复习更多的“基本”教程（比如傻瓜式的CSS）可能实际上会有帮助，因为它们详细讨论了很多CSS的基本原理。
最后，当你在语义上正确（x）的HTML底下，CSS效果最好。 在我看来，当你在下面有很好的，语义上正确的html时，最容易看到和学习“好”的CSS。 这里有一个很好的概述什么时候使用什么标签 。 一般来说，我觉得最好是写下我的内容， 而不考虑以后的样子，然后再用CSS来使它变得华丽。
与往常一样，您可以在CSS技巧中find许多精巧的技巧和技巧 ，这些技巧一直帮助我学习更多关于正确使用语言的知识（比如当我了解到overflow: auto包含浮动元素！天才！）。
希望有所帮助！
-
访问CSS禅园看看你只能用CSS做什么。
-
访问W3学校，并按照教程。 对你来说可能看起来很简单，但你会学到基本的东西。
-
访问一些网站，如A列表 ，看看如何做事情，学习技巧。
-
看看一个CSS框架是否适合你的需求（如960网格 ）。
我假设你已经安装了Firebug ？
练习，练习，练习。 你知道你不知道的，这是我脑海中成功的关键。 你所做的每一个项目都试图提高你的技能，最终以正确的方式成为第二天性。
Eric Meyer的层叠样式表2.0程序员参考是了解select器和规则如何工作的极好资源，也是一个很好的参考。
对你发布的内容有一些想法。
-
主复位样式表将有助于浏览器的差异。
-
表格数据应该使用表格。
这是布局，应该避免表格标签，以支持CSS。
这里有很多人给出了很好的build议。 我只是再添加两个：
- 首先，尝试编写有效的（X）HTML。 您可以使用W3C的HTMLvalidation器轻松testing您的HTML代码。 主要关注内容，而不是风格。
- 其次，尝试编写有效的CSS，最好在一个单独的
.css文件中。 避免使用style属性。 （如果你想支持来自Redmond的某些旧浏览器，这部分可能很难。 你可以使用W3C的CSSvalidation器来testing你的CSS 。
阅读CSS： Eric Meyer 的权威指南 。 他解释了为什么创build了CSS，它是如何工作的（按照标准），并且会给你提供了解这些细节的背景。 这也是一个很好的参考。
在Firebug中进行实验
我不知道萤火虫这张照片在传达什么
Firebug本身可以帮助你。 做这个：
- 创build一个包含文本的div。
- 使用CSS来给它
padding: 5px; margin: 5px; border: 1px solid black;padding: 5px; margin: 5px; border: 1px solid black; - 在Firebug中检查它，就像你在问题中显示的一样。
- 点击所显示的盒子模型中的任何一个数字，然后开始按向上和向下箭头（或input不同的数字）。
- 看看它是如何变化的实时？ 这是关于Firebug的最好的事情之一：它可以让你调整而不重新加载，然后修改你的样式表，当它看起来是正确的。
- 继续这样做，直到你理解填充，边距和边框如何工作。
我想你应该为你的布局需要使用一个所谓的“ CSS框架 ”（例如960.gs ）。
它们快速可靠，足以构build跨浏览器的布局，也易于阅读和理解，因此您可以在编码时学习所有的良好实践。
CSS很容易，不是真正的编程语言：不要害怕“框架”这个词;）
你可以先读一些关于此事的好书。 埃里克·梅耶（Eric Meyer）的双手十足，质量非常高。 我从中学到的另一本书是CSSdevise书的Zen。
其余的是努力和实践。 一定要明白为什么事情是按照它的方式进行的，不要满足于“试错”的CSS发展。
- http://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474/ref=sr_1_1?ie=UTF8&s=books&qid=1255629419&sr=8-1
- http://www.amazon.com/More-Eric-Meyer-Voices-Matter/dp/0735714258/ref=sr_1_1?ie=UTF8&s=books&qid=1255629449&sr=8-1
- http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X/ref=sr_1_1?ie=UTF8&s=books&qid=1255629462&sr=8-1
那么我会尽我所能解决一些这些问题。
display:none和visibility:hidden之间的区别在于display:none设置时，该项目的空间没有保留。 所以想象一下，当显示器被设置的项目是“离开”的页面。 而如果您使用可见性选项，则元素位于页面上，而不可见。 我清楚解释了吗？ 希望这对你有意义。
就填充，边框和边距而言，这都被称为CSS Box模型。 信息被包含为元素，填充，边界，然后是边距。 所以填充是元素的内容和边界之间的距离，而边距是边界和相邻元素之间的距离。 再次，我希望这有助于为您澄清一点点。
过渡到CSS有时是棘手的，但非常值得。
那么基础是非常简单的，如果你已经没有一些CSS编码，你应该得到一个相当简单的窍门。
关于交叉浏览器布局的最佳实践，浏览器怪癖，黑客和其他粗略的东西是另外一回事。
这是我的build议阅读清单，所有这些都在我的书架上，当然值得一读！ 如果你问我，我会说这些是你应该阅读的书，如果你是一个webdesigner。
- 使用webstandards进行devise
- CSS精通
- 防弹网页devise
对我来说，迈克尔·鲍尔斯的Pro CSS和HTMLdevise模式改变了这一切。 没有更多的尝试和错误，但问题模式解决scheme。 必不可less。
每当一个页面加载缓慢的时候，html元素不合时宜，只有在完全加载的时候，才会进入顺序。
- 你把你的样式表放在顶部，在
<head>部分？ - 你是否声明了图像的显式大小，或者浏览器必须猜测，然后在图像显示时重新排列？
根据你的学习风格，我可能会build议直接find源代码：CSS的定义。 您可以在这里find各种规格： http : //www.w3.org/Style/CSS/ 。 虽然规范并没有真正涵盖特定的浏览器怪癖（如果是的话，他们不会是怪癖，他们会吗？），但是对于解释每个部分是如何工作的，它确实做得很好（对我来说）。
我会告诉你我的秘密：遵循这两个经典教程
Listutorial
Floatutorial
你会知道你需要了解CSS的80％。
如果您进入Web开发，请遵循30个网站
