Question

这更像是一个“最佳实践”问题。我正在进行一些前端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个数字）。此外，我不确定在跨浏览器（和屏幕分辨率）兼容性方面，指定精确像素位置是否合适。

我更倾向于让元素的位置更加相对于彼此，因此添加一个新元素并不意味着我必须重新定位其他所有元素。

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

Answer 1

最佳做法是使用HTML来定义页面的语义，并使用CSS来定位和设置它。

所以如果你想从上面一个按钮移动一个按钮10px：

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

#button1 { margin-bottom: 10px; }

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

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

1 个答案: