标签的时候，如果老板让你把字体改小一点，你一定是疯了。该组织看到了问题的症结所在，并决定精简HTML。他定下了一个目标：“内容和风格必须分开！”这个重担交给了我。2selector刚开始的时候，我完全没有概念。如何分离内容和风格？这几天我一直在想这个问题。既然我要给内容应用样式，作为第一步，我必须解决定位问题，换句话说，我需要能够找到HTML中的元素。我问HTML：“你一页有这么多标签，我怎么才能得到你完整的结构呢？”这个东西好办，但是如何定位一个元素，并设置这个元素的字体、颜色等显示属性呢？XML向我建议：“这太容易了，你可以模仿我的XPath，例如，在DOM树中，如果你想选择标题元素，使用/html/head/title，或者简单地使用//title；如果你想要选中第一个div下的h3，可以这样/html/head/div[1]/h3，是不是很方便？（注：其实XPath比CSS出现的晚）“方便就是方便，但是为什么要斜杠？ 直接写成htmlhead标题不行吗？”“这……”XML无语。我决定不使用斜杠，我想取悦程序员，所以我使用divulli，它非常简洁，我不想称之为XPath，它是XML的宝贝。我将其称为选择器。比如我要把h3全部变成红色和粗体，我可以这样写：h3{color:blue;font-weight:bold;}当然，我设计的选择器能力不仅如此简单，你可以用它来选择一个特定的节点（如果它有id属性或者class属性），不管这个节点有多深“隐”。您还可以选择节点的兄弟节点、一组元素的第x个子元素、具有属性名称的任何标签名称，等等。总之，有了Selector，你可以尽情浏览DOM树，找到你想要的地方，然后设置样式。内容和风格是分开的。3盒子定位的问题解决了，初步的样式也解决了。但是最令人愉快的排版问题仍然存在。想想你读过的报纸和杂志。它们有丰富的图片和赏心悦目的排版。我们必须努力学习。我仔细研究了杂志的排版，栏目分隔，间距，对齐方式，图文混合，本质上都是由“块”组成的。我对HTML说：我们是不是也可以把内容一个一个做成块，然后把这些块组合起来？HTML回答：“我有块，你不知道吗，所有HTML元素都是块或内联的。”“你是什么意思？”"块级元素（如标题、段落）在页面下方依次堆叠，每个元素占一行；内联元素（如链接、图片）会并列在一行中，并且只会当没有足够的空间并列时折叠到下一行。你可以想象一个文档实际上就是页面上的这些元素只是堆叠和流动，俗称文档流。在这种情况下，我可以将这些元素一个一个地当作“盒子”，为了能够排版，我为每个盒子设置了三个属性：border（边框）：OK设置宽度、样式、颜色Padding：距离thecontenttoborderMargin：边框到相邻元素的距离通过调整内外边距和边框，可以对页面排版做一些基本的美化。4.浮动和定位框只是在文档中按顺序流动flow.如果要实现漂亮的排版，就得让它们灵活定位，比如有人想在浏览器的最右边放一个框，这样它就不会随着页面的滚动而滚动；或者一个小的box嵌套在一个大盒子里，小盒子要相对于大盒子定位；或者两个盒子想像报纸杂志一样分栏显示，菜单在左边，内容在中间，和一个右栏;等等。因此，一个盒子必须是一个可以在正常的文档流中重新定位，所以我给盒子添加了两个重要的属性：float和position。float允许框脱离标准文档流并向上浮动，直到它遇到父元素的边框。当有多个框浮动时，可以按顺序形成柱状效果。例如下面的三个本来就是从上到下排列的。如果给div2和div3加上float:left属性，它们会水平排列：对于位置来说，会更加灵活。如果不设置，就是默认定位，文档流中的位置不变。可以设置为相对于原文档流中框的位置定位（原位置未被其他div占用）：也可以设置为绝对相对于某个父元素（图中的祖先元素）定位下面是橙色框，原来div2的位置被div3占据了）。唉，跟你说那么多鸡毛蒜皮的事情，我有点厌倦了。总结就是：我提供多种方式让你的箱子灵活排列。当然，不得不承认这些布局对于程序员来说真的不是那么友好，你不能通过拖拽来布局这些框。为了减少工作量，大量的CSS框架不断推出，比如Bootstrap、SemanticUI、Pure.css、EZ-CSS。.....那是另一个故事了。5CSS浮动和定位可以说是我创建的最复杂的东西了。其他的比如背景、字体、文字就简单多了，不会啰嗦。当我告诉HTML我的定义工作基本完成时，他问了一个问题：“你把这些选择器、盒子模型、浮动和定位、背景、字体等定义到底放在哪里？放在这里？”想了想，要有绝对的灵活性，程序员可以直接写到元素的标签里（叫内联样式），或者写到html的
