css - 你如何向人类解释 CSS 定位？

Question

地球人。

身心比较清醒的我，在此放弃自己理解CSS定位。

有关 CSS 的在线资源用很长的篇幅解释“颜色”属性可让您设置内容的“颜色”。不莫格利什。

然后，如果你想把一些东西放在其他东西的左边(疯狂的想法，对吧？)，所有你所要做的就是将它设置为 float 到左边，前提是你设置了其父 block 上的“相对”标志必须有一个“绝对”标志设置为 true 的祖父节点，以便它相对于可能包含或不包含任何内容的其他容器定位，有一个位置，一个大小，取决于浏览器，其他东西的大小，可能还有月相。 (建议 CSS 专家不要认真对待前面的段落。我很确定有人会指出我的咆哮是无效的，或者不符合 w3c - 并且它只适用于 IE6 的瑞典测试版)

开个玩笑，我正在寻找任何资源来解释 CSS 布局背后的所有疯狂行为的根本原因。本质上，某些东西对于 CSS 就像 Crockford 的文章对于 Javascript 一样。

本着这种精神，让我指出我不是在寻找 css 库或像 blueprint 这样的网格框架，或者像 lesscss 这样的 CSS 扩展语言。我一直在使用它们来减轻我的痛苦，但我担心当有人说他们无法全神贯注于 JS 中的原型(prototype)继承时，这就像告诉他们“只使用 jQuery”一样。

如果你能指出我的是 http://shop.oreilly.com/product/9781565926226.do ，我想我会认为自己注定要失败。

提前致谢。

编辑:我可能不应该谈论“定位”(感谢所有再次解释过“position:relative”并不意味着“相对于你的容器”，而“position:absolute”意味着相对于某物的人) . 我从来没有如此接近于用 SO 问题制作一个 monty python 脚本)。我想我的意思是一般布局(定位 + float + 基线 + 将东西放在一条直线上所需的所有废话)。

另请原谅我的咆哮语气，我正试图在挫败感中注入(inject)一些幽默。如果可以的话，我会使用禅宗技巧来冷静下来，但这只会让我想起 this .

Answer 1

似乎大多数其他人都没有完全理解您帖子的要点。我会为你分解:

CSS positiong 很复杂，因为它是由许多不同的人群在很长一段时间内设计的，具有各种版本和遗留兼容性问题。

最初的尝试是让事情变得简单。只需提供基本样式。颜色、字体、大小、边距等。他们添加了 float 以提供基本的“剪切”功能，其中文本环绕图像。 Float 并不打算用作当前使用的主要布局功能。

但人们对此并不满意。他们想要柱子、网格、方框、阴影、圆 Angular ，以及在不同阶段添加的各种其他东西。同时努力保持与以前不良实现的兼容性。

HTML 遭受了两个对立派系的争论。一方面想要简单的(与现有的 SGML 相比)解决方案，另一方面想要丰富的应用程序。所以 CSS 有时具有这种精神 split 症的性质。

此外，功能得到了扩展，可以做它们最初不打算做的事情。这使得现有的实现都非常有问题。

那么这对普通人来说意味着什么？这意味着你被困在处理其他人的脏衣服。这意味着您必须处理十年前的实现错误。这意味着您要么必须为不同的浏览器编写不同的 CSS，要么必须将自己限制在一个通用的“受良好支持”的功能集上，这意味着您不能充分利用最新的 CSS 可以做的事情(也不能使用那里的功能旨在为标准增加一些理智)。

在我看来，对于“普通人”理解 CSS，没有比这更好的书了:

http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X

它简单、简洁，并以光鲜亮丽的“易于阅读”格式为您提供真实世界的示例，并且没有大部分令人讨厌的技术术语。它已有 10 年历史，并没有涵盖任何新内容，但它应该能让您“理解”事物的工作方式。