css 5部曲：24小时内彻底提升你的css水平
2012-07-21 10:27 480 0
You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t?
The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.
1. 多考虑一下定位的问题
如果你真的想随心所欲的摆布你的html元素，把他们放在任何你想要的地方，你需要有定位的扎实基础。我并不是指随意肤浅的理解,我的意思是深入了解他们之间的差异、行为、怪异之处、等等。
事实上有5种定位方式你必须深入理解，如果在不去查询的情况下，你说不出是哪5种，那你就属于在这方面需要更多学习的人（估计诸位读者都是吧）。它们分别是，static, fixed, relative, absolute and inherit. 注：相对定位和绝对定位大家可能都很熟，fixed也许也有人了解，inherit绝大多数人看过但很少注意，static估计有人没看过。
你需要精通上面的5种定位，但最影响你编码的主要是两种：相对定位 relative 和绝对定位absolute。先单独研究他们的功能和特点，然后看他们在一起的时候如何工作，这将从根本上改变你css布局的观念，以后你的工作会变得轻松很多。
关于相对定位和绝对定位具体讲解我放在下面的文章中
1.解密相对定位和绝对定位 http://jcodecraeer.com/a/cssjiqiaoyuguifan/2012/0704/301.html
这篇文章深入探讨css定位的问题，虽然涉及到5种定位，但主要精力放在相对定位和绝对定位上：它们的区别，以及如何一起配合使用。这篇文章将带你进入令人头疼的css定位问题中。
这篇文章来自于著名的_A List Apart_网站，发表于2010年，但是内容仍然具有启发性。它是一篇讲解五种定位的很好的教程。文章不是以直观的方式，而是用丰富的代码和例子让你轻松理解各种概念。
3.Learn CSS Positioning in Ten Steps（十步学习css）
这是一篇简要概述css定位的好文，不同于那些长篇大论，这篇文章只有一个含有十个选项卡的盒子。每个选项卡有一小段代码和注释语句。在盒子的右边则是这个代码的运行效果。我非常推荐者篇文章，如果你讨厌上面_A List Apart_网站的长篇大论的话，这种更适合你。
2.掌握浮动
如果你第一次学习css，浮动是一个很难解决的布局问题。一旦你打算从基础开始学习浮动，你就必须知道为什么一个父容器包含一个浮动的子元素高度不能撑开，然后去学习解决这个问题的方法，比如clearfixes到overflow的巧用。
幸运的是，最终你会习惯于这些浮动的概念和用法，知道怎么用，却不必多想原因。当你到了这一步的时候，离你真正掌握浮动就只差一步了，那就是一篇深入讲解浮动的文章，从本质上讲解浮动的行为和技术，深入挖掘浮动原理。这种文章不适合初学者，但是适合能运用浮动却对原理模糊的读者。
能帮助你实现这一目标的文章和资源：
1.Everything You Never Knew About CSS Floats（关于css浮动你永远不知道的方方面面）
在这篇文章中，我解释了浮动这个话题的绝大多数问题。从什么是浮动开始讲解，之后解释了浮动如何影响到盒子模型，浮动在不同高度元素中如何出现种种怪异举动，九条浮动规则以及清除浮动的运用。
自从Chris Coyier探讨关于css方面的话题以来，他一直是我最喜欢的作者，他的文章很少让人失望。如果你在寻找简洁直接的文章，这篇就适合你。我尤其喜欢整篇文章中简洁而又引人注目的插图。
3.The Mystery Of The CSS Float Property
上面说到Chris Coyier的文章简洁，那么Smashing Magazine的内容则用大量的例子和讨论。这篇文章介绍了浮动的概念，告诉你所有关于使用和清除浮动的知识，然后发散到你在网站的网站中可能看到过的浮动运用的典型案例。
3.选择器
书写规范干净css的关键之一是掌握css选择器。选择器如何工作以及不同浏览器的差别。这听起来是个简单的问题，但实际上css世界中，选择器是相当复杂的。
这里面有很多有趣的东西，从属性选择器和类选择器，到个别能帮助你测试代码的选择器。即使你自认为你能用好选择器的基本用法，没必要学习那些特别的东西，你还是会发现不得不学，比如你看别人的代码的时候，如果有些不知道你就看不懂代码。
下面是选择器的相关文章：
1.CSS Selectors: Just the Tricky Bits
这篇文章主要介绍选择器中的复杂方面，我跳过了基础的东西，直接讨论文档对象转化为css选择器，你会学到如何选择子元素和兄弟元素，以及如何组成选择器链。
2.The 30 CSS Selectors you Must Memorize 你必须记住的30种选择器
Jeffrey Way是网页设计领域的摇滚明星，这篇文章就能证明这一点。这篇文章以简洁的形式涵盖了很多选择器的问题。文章强调对浏览器的支持。令人兴奋的是 Jeffrey为30 中选择器编写了实例代码。
3.CSS Attribute Selectors: How and Why You Should Be Using Them
属性选择器是最强大的css选择器，css3中力推这一点。你绝对不会相信利用属性值可以将你的选择器变得如此灵活。
