CSS中定位的逻辑/理念是什么?

时间:2013-08-27 08:15:01

标签: html css

我不是网络程序员,但我们都发现自己需要在某些时候搞乱html,css和javascript。每次我这样做,我发现自己都在讨厌CSS的胆量。这几乎完全与定位有关。我认为应该简单易懂的许多事情变得非常困难甚至(看似)不可能。

在用户的浏览器/界面中居中。我最近想做一个“即将推出......”临时启动页面(陈词滥调,我知道),我希望在用户浏览器中间放置一小段文字或图像。从概念上讲,这可能并不简单,但要在CSS中实际实现这一点,你必须做各种各样的技巧。我不是要求如何来实现这一目标。有几个教程/示例,包括这两个优秀的:

http://css-tricks.com/centering-in-the-unknown/

http://www.dynamicsitesolutions.com/css/center-page-content-horizontally-and-vertically/

我想了解的是为什么实现如此基本的东西如此复杂?为什么我不能只创建一个跨越浏览器高度和宽度的div(或其他),并在中间对齐一些东西?为什么你必须提出像Bootstrap这样的整个框架(在我看来,仍然是不完整和hacky)来做一些应该成为实现哲学一部分的东西?

提出CSS标准的人比我更聪明,并且必须有这样的理由。它们的实施方式背后的逻辑或理念是什么?我错过了什么?我想明白,所以至少下次我尝试实施一些东西时,我不会欺骗自己“我会认为这很容易”,这是不可能的。

1 个答案:

答案 0 :(得分:2)

因为HTML / CSS受其根源的限制:ltr水平流

当我们第一次开始制作网站时,HTML被设计为一种简单的内容流动方式,就像杂志或书籍一样。也许它会有图像或嵌入音频,但当时没有办法预见我们会在数百万行代码中拥有网站。 HTML的设计采用横向流程,非垂直流程

还有其他一些例子:

  1. 将文本垂直对齐到页面的中心或底部this requires a lot of unintuitive understanding比较困难,而水平面上的中心对齐很简单text-align='center';
  2. 表是使用<tr>表行标记定义的,而不是<tc>表列标记。
  3. 曾经试过制作一个<DIV>,尤其是一个包裹在其他div中的页面,(不是屏幕)的整个高度?这并不像你想象的那么容易。
  4. height:100%元素与浏览器的高度不会自动相同,只会与内容的高度相同。 See this example
  5. 由于需要保持向后兼容性,浏览器继续使用基于从左到右,从上到下渲染的渲染引擎。 HTML的替代品似乎不太可能在不久的将来掀起网络风暴,所以我们可能会在可预见的未来坚持这种模式。