使用HTML/JavaScript进行网站布局的不同方法？

这更像是一个“最佳实践”问题。我正在做一些前端web开发，现在当我放置元素（文本、按钮等）时，我会按像素进行所有操作，并将其附加到主div元素。下面是一个例子：

var button = document.createElement('input');
button.type = "button";
button.value = "Click Me";
button.style.position = "absolute";
button.style.top = "200px";
button.style.left = "150px";
mainDiv.appendChild(button); 

…我这样做就像每个元素一样，它开始觉得不对了（起初很容易，但现在如果我想通过添加/删除元素来更改布局，我必须从元素位置更改大约50个数字）。另外，在跨浏览器（和屏幕分辨率）兼容性方面，我不确定指定精确的像素位置是否好

我更愿意采用一种方式，使元素之间的位置更加相对，因此添加一个新元素并不意味着我必须重新定位其他所有元素

---

你们能帮我指出正确的方向吗？非常感谢。

最佳实践是使用HTML定义页面的语义，并使用CSS定位和设置页面样式

因此，如果您想将一个按钮从其上方移动10px：

<input type="button" id="button1">
<input type="button" id="button2">

#button1 { margin-bottom: 10px; }

#按钮1{页边距底部：10px；}

---

这确实是一个非常广泛的问题-您需要基本的HTML和CSS。

首先。。。签出jQuery。我的第二个评论是，你必须来自印刷界…：PI更倾向于尝试在HTML中包含尽可能多的元素，用CSS定位它们，然后用JS动态隐藏和显示它们，而不是从JS创建它们。更容易测试布局，更容易添加或删除内容，而无需更新其他所有内容。让选项卡顺序正常工作也应该容易得多。请注意：如果您将

input{display:block；}

添加到CSS中，上述操作将有效。否则，按钮将并排显示，页边距底部将不可见。我有基本的HTML和CSS，我只是碰巧从JavaScript动态执行了很多操作，以响应用户事件和数据库提交，我的主要问题是从基于像素的定位转移到更相对的定位。所以你可以使用边距使元素彼此移动得更远。可以使用填充在元素周围添加空间。其余的布局问题归结为是否显示：块与否。块元素可以呈现形状并影响其相邻元素。内联元素（如span）没有。