Javascript 使用此系统布局网页可能存在哪些问题？

CSS的许多限制和兼容性问题让我感到沮丧，我发现自己经常需要编写javascript代码来让我的网页按我想要的方式布局，我想我可以通过完全抛弃CSS来简化未来的项目，从而实现页面结构

我编写了一个javascript库，它解析XML文件中指定的布局，并使用绝对定位和大小的非嵌套div将它们应用于HTML文档。因此，我们的想法是，每个页面都有一个包含所有内容的HTML文件，一个指定内容在页面上的排列方式的XML文件，以及一个用于表面样式化的CSS样式表

（按下按钮以放大布局。在所有主要浏览器的最新版本中进行了测试。）

该系统优雅地降级为普通html，甚至在禁用javascript的情况下允许单独的样式

在我看来，这种方法不仅消除了许多跨浏览器的问题，而且还允许我以更少的工作量实现更复杂的布局。例如，我的理解是，仅使用CSS无法完成以下操作，至少如果没有一堆嵌套的div：

设置元素以填充其父容器中的可用宽度或高度。（这与宽度/高度不同：如果父容器中有其他元素，则为100%）

在任何容器中对齐任何元素顶部/中心/底部、左侧/中心/右侧，即使其大小未知

填充未知大小的元素，而不增加该元素的大小（例如，如果div设置为窗口大小的100%，则无法填充而不溢出窗口。）

自动将父图元中的所有图元设置为等距

设置浮动元素的高度。类似地，在水平和垂直方向上独立设置收缩包裹行为

将元素设置为在列而不是行中浮动（CSS3似乎支持列，但浏览器兼容性不好）

尽管如此，我相信这被认为是亵渎神明。那么，使用这个系统来布局网页的潜在问题是什么

编辑：

“对CSS的许多限制和兼容性问题感到沮丧，发现自己不断需要编写javascript代码以使我的网页按我想要的方式布局”，这表明您要么错误地使用了CSS，要么实际上没有花足够的时间学习CSS的细节以使其达到您想要的效果（设置好的、通用的CSS是很难的，就像编程JS一样，而且有无数种错误的方法，就像编程JS一样）

您的示例似乎是基于100%高度的页面进行的。如果将

html

和

body

设置为高度：例如100%，这实际上是相对容易的。一旦这样做，框的h/验证就变得非常容易了

---

然后，在回答您的问题时：使用JS调用进行所有的样式设置都要比使用CSS昂贵得多，因此我强烈怀疑您的解决方案的性能会比一个好的CSS或CSS+JS解决方案差得多。浏览器对执行CSS触发的回流进行了极其优化的代码，而在JavaScript中执行相同的操作需要好几次较慢。使用JS进行特定的样式设计是必要的，因为CSS缺少一个功能，比如像您的示例那样进行框对齐，但每次运行它时，它都必须在JS代码中重新运行完整的算法，而不是使用本机编译器更快的回流库，这些库可能适用于您想要修改的部分或全部布局chieve.

我认为这没有问题，除了您必须确保您选择支持的所有浏览器都有相同的输出。此外，您还必须处理页面上的元素数量是可变的情况，如照片库或评论页面。我可以从经验中告诉您，有很多小元素定位绝对会严重降低页面的性能。当您达到50-100个元素时，在滚动和调整窗口大小时会注意到这一点。相反，在这种情况下，请执行Google Images的操作；将元素设置为

display:inline block

，并控制其宽度，然后允许它们自然换行

此外，我觉得我应该指出，点1和点2可以很容易地在CSS中完成，方法是在父对象上使用

位置：相对
，在子对象上使用
位置：绝对
，在子对象上设置
框大小：边框框
，可以使用
填充框
，但这不是很好埃德

CSS3也解决了您的几个问题。您提到了CSS3列。请看一看。例如，您可以使用动态大小将元素置于中心：

左：50%；
最高：50%；
左边距：计算（-宽度/2）
页边距顶部：计算（-高度/2）
从本质上讲，您正在尝试重写CSS，您认为这种方式比CSS做得更好。这可能很好——也许对您有效——但您将面临限制

世界上其他地方都使用CSS。通常更容易找到一个人（你）学习并遵循一个标准，而不是试图让世界其他地方学习并遵循你的标准。如果你与其他人一起开发，他们将不得不学习你的web开发方法，而不是将他们对CSS和HTML的知识带到桌面上

如果你去其他地方工作，你要么必须说服他们能够将你的方法带到桌面上，而不是使用CSS的世界标准（这在公司环境中通常不适用），要么你必须学会如何正确使用CSS

如果你想从其他人那里得到帮助（比如stackoverflow），你将无法得到，因为其他人都使用CSS。但是如果你对CSS有问题，我们将能够提供帮助

这就是为什么