1 HTML的困局
我是知名的CSS, 许多人都知道我的英文名字， 但却对我的基本原理和技术细节偶一为之。
这也能认知，较之于纯粹的HTML，我要繁杂得多， 特别是想使用我作出美奂美伦的网页，需要介绍太少的技术细节，那真不是两件平凡人有才干的事。 只好我们看到我以后最多瞧瞧，然后立刻转头行经。
讲起HTML，这只不过是个十分纯粹的混蛋， 他只关注文本的语法， 比如并用<h1>说明这是两个大副标题，用<p> 说明这是两个章节，用<img> 说明那儿有两个相片， 用<a> 表示该处有镜像。
镜像啊个有意思的发明者， 它能从两个网页跳到除此之外两个网页，从两个中文网站跳到除此之外两个中文网站，只好整座当今世界的中文网站都镜像了出来，形成了一张蜘蛛网 。
在我问世以后， 当今世界上的中文网站虽然许多，但他们都有两个协力的特征： 丑。
其原因很纯粹， 两个HTML文件格式有许多条码， 当那些条码女团出来的时候，究竟该是不是表明呢？ 用甚么样的手写体？ 甚么色调？ 是不是翻转？
HTML不该管也说不清楚，只好晚期的中文网站绝大部分长这个模样：
啊前所未见，六十年代的人们居然用这么破旧的中文网站来网购 ！
不计其数的人向HTML举报： 你就不能把自己装扮得很漂亮一点儿吗？
HTML光明正大地提问：不不，我的女主人只让我负责管理网页的文本和内部结构，再者那些内部结构要表明成甚么模样，应用程序能负责管理啊。
而应用程序也会推卸责任：“这我可说不清楚，你不告诉我你用甚么手写体，甚么色调，我是不是可能给你展示出来？”
理由很充分，对吧，应用程序确实不应该做这件事情。
HTML没有办法，只好向组织上申请，给自己加上一堆新的条码， 专门用来描述展示相关的东西：
只好网页变得比以前很漂亮了一些，我们似乎满意了。
只是HTML发现自己的身躯越来越臃肿，那些负责管理表明的条码把原本的文本都给淹没了， 更要命的是修改的难度越来越高，你能想象一下，当两个html文件中有上百个<font>条码时， 老板让你把手写体改小一号， 那肯定要抓狂的。
组织上看到了问题的症结所在， 决定为HTML瘦身， 他定下了两个目标： “文本和样式必须要分离！”
这个重担就交给了我。
2 选择器刚开始的时候，我一点儿思路都没有，究竟是不是把文本和样式分离呢？ 我为此苦苦思考了好几天，既然我想给文本施加样式， 作为第一步， 必须要解决定位的问题，换句话说我需要能找到HTML中的元素才能。
我问HTML：“ 你两个网页这么多条码， 我是不是才能获得你完整的内部结构呢？”
“内部结构？ 那很纯粹啊， 我在应用程序中就是两个DOM 树啊， 你尽管访问啊 ”
好 ！ 有这个玩意儿就好办事了，但我是不是定位到两个元素，去设定这个元素的手写体，色调等表明属性呢？
XML向我支招： “这太容易了， 你能仿照我的XPath啊，例如那个DOM树，你想选中title 元素，就用 /html/head/title ，或者纯粹一点儿//title ； 你想选中第两个div 下面的h3, 能这么做 /html/head/div[1]/h3 ，是不是很方便？ ”
（码农翻身老刘注：实际上XPath的出现要比CSS晚）
“方便是方便， 可是你这为甚么要两个斜杠呢？ 直接写成html head title 不行吗？ ”
“这。。。” XML无语了。
我决定不用斜杠，我要讨好程序员，就用div ul li 这样写出来很简洁的方式， 我也不该叫XPath, 那是XML的宝贝。
我打算把它叫做选择器(Selector)。比如我想把所有的h3都变成红色， 黑体， 能这么写：
h3 {color:blue ; font-weight:bold;}
当然我设计的选择器能力可不仅仅这么纯粹，使用它你完全能选择两个特定的节点（如果有id属性或class属性的话），不管这个节点“隐藏”得有多深。
还能选择两个节点的兄弟节点， 某组元素的第x个孩子，任何带有属性名的条码名等等。
一句话， 使用Selector， 你能尽情在DOM树中遨游， 找到你想的地方， 然后设置样式。
文本和样式就分离了。
3 盒子定位的问题解决了， 初步的样式也解决了。 但最让人排版的问题依然存在， 想想你曾经看过的报纸和杂志，人家那图文并茂，赏心悦目的排版， 我们得好好学习下了。
我对杂志的排版做了仔细的研究， 分栏，间距，翻转， 图文混排， 本质上他们是由两个个“块”组成的。
我对HTML说： 咱们能不能也把文本搞成两个两个的块啊， 然后把那些块进行女团不就成了？
HTML提问： “块（block) 我有啊， 你还不知道吗， 所有的HTML元素要么是块级(block)元素，要么是行内(inline)元素。”
“甚么意思？”
“块级元素（比如标题和章节） 会两个接两个的堆叠出来沿着网页向下排列，每个元素占一行；行内元素（比如镜像和相片）则会在一行内相互并列，只有在空间不足以并列的时候才会折到下一行。你能想象一下， 两个文件格式只不过就是那些元素在网页上堆叠流动而已， 俗称文件格式流。”
既然如此， 我就能把那些元素当成两个个的“盒子”了，为了能够排版，我给每个盒子都都设定三个属性：
边框（border）： 能设定宽窄，样式，色调
内边距(padding)： 文本到边框的间距
外边距(margin)： 边框到相邻元素的间距
通过调整内外边距和边框，你就能对网页做一点儿基本的美化排版了。
4 浮动和定位盒子还只是在在文件格式流中按次序流动而已， 想做到漂亮的排版， 还得让他们灵活地定位才行。
比如有人想把两个盒子放到应用程序的最右边，不会随着网页滚动而滚动；
或者大盒子中套了两个小盒子，小盒子要相对于大盒子来定位；
或者两个盒子想罗列出来；
或者像报纸杂志那样分栏表明，左边是菜单，中间是文本，再加上两个右边栏； 等等诸如此类的要求。
所以，两个盒子必须得能在常规的文件格式流中重新定位，只好我给盒子添加了两个重要的属性：float和position 。
float可以让两个盒子脱离标准的文件格式流，一直往上飘，直到遇到父元素的边界。
当有多个盒子都在飘的时候，就能按照次序形成分栏的效果了。
比如下面这3个<div> 本来是从上往下依次往下流动的， 如果给div2, div3加上float:left属性，他们就横着排列出来了：
对于position 来说， 那就更加灵活了。 如果不设置，那就是默认定位，在文件格式流中的位置不做改变。
能设置为相对于盒子在原来文件格式流中的位置做定位（原来的位置没有被别的div占据）：
还能设置成相对于某个父元素做绝对定位（下图中祖先元素就是橙色的框，div2原来的位置被div3占据了） 。
唉，给我们说这么多琐碎的东西， 我自己都有点烦了， 总结下就是：我提供了各种各样的方式让你的盒子能灵活的排列出来。
当然我必须得承认， 那些布局对程序员们确实不那么友好，你没有办法通过拖拽的方式对那些盒子进行排版。
为了减少工作量，大量CSS框架在源源不断地推出，例如Bootstrap, Semantic UI, Pure.css , EZ-CSS。。。。。。 这是后话了。
5 CSS浮动和定位能说是我搞出的最繁杂的东西， 其他的像背景了，手写体了，文本了就纯粹得多，就不再啰嗦了。
当我告诉HTML我的定义工作基本搞定时， 他提出了两个问题： “你那些选择器，盒子模型，浮动和定位， 背景，手写体之类定义，最终要放在哪儿啊？ 你不会还是想放在我这里吧？”
我想了想，必须得有最大的灵活度，程序员能直接写到元素的条码中（叫行内样式）， 也能写到html的<style>条码里（这叫嵌入样式）， 当然我是建议我们写到单独的CSS样式中，然后通过镜像的方式和html文本结合出来。
行内样式长这个模样：
很明显，这和最早的在html中写<font>条码差不多。
嵌入样式就好一点儿：
如果把那些样式完全从html中分离，放到独立的文件中，就能使用镜像样式：
<link href=”mystyle.css” rel=”stylesheet” type=”text/css” />
正像你猜到的那样， 嵌入样式会覆盖镜像样式， 行内的样式会覆盖嵌入样式。 就像一层盖着一层那样， 就是由于这个其原因，W3C把我命名为层叠样式表（CSS）。
你看到的只是冰山一角， 更多精彩文章，请移步《码农翻身2016文章精华》或者《码农翻身2017上半年文章精华》
码农翻身
用故事讲述技术
