如何保持不同分辨率的相同位置？

我需要帮助。我正在Dreamweaver上创建一个网站。我刚开始学习HTML，我不知道在CSS中定位元素的最佳方式是什么。我总是用这种方式（例子）：如何保持不同分辨率的相同位置？

.element { 
    position: absolute; 
    left: 185 px; 
    top: 50 px; 
}

我是否正确定位元素？但是，我想保持不同分辨率的相同位置。

来源

2017-06-28 ST_Lukas

你有没有住过吗？还是jsfiddle？ –

IMO如果你想学习HTML/CSS/JS，那么你不应该使用Dreamweaver。从一个好的文本编辑器和一个浏览器开始，一旦你掌握了一些基础知识，就可以开始工作。 – stybl

我已经在Codecademy上学过HTML/CSS。我只是使用Dreamweaver创建网站。我真的不知道该怎么做。 –

在任何时候，你应该尝试避免位置：绝对;位置：固定;尽可能多。他们可以非常方便，不会否认，但大多数情况下，您只想随页面流动。

当你创建一个新元素时，你会自然而然地看到所有东西都会按顺序排列。文本的长度相同，它们在同一个位置水平开始，大多数其他元素也是如此。但是，当您使用position：absolute或position：fixed时，可以从页面流中拉出元素，从而有效地在当前页面的顶部创建另一个图层。这意味着，尽管你会有很多自由来放置它，但这也意味着如果你使窗口比现在小，那么会是问题。例如，如果移动用户访问您的网页会发生什么情况？

这就是说，在涉及到定位之前，尽可能多地使用已有的css属性（text-align，vertical-align，甚至float和/或使用margin's可以更好）。

编辑：另外什么stybl在评论中说，如果你只是学习HTML和CSS，我不会推荐使用DreamWeaver。从一个好的文本编辑器开始，或者去Codecademy！

来源

2017-06-28 07:10:48 Xariez

是的，我从codecademy学习了HTML和CSS，但我不擅长使用“margin”。我真的不知道该怎么做。 –

@ST_Lukas保证金可以设置为保证金;或margin-left | right | top | bottom;此外，它可以设置为像素，百分比或自动（以及其他一些）。至于它是如何工作的，这是一个常见的问题。也许[ŧhis]（https://4.bp.blogspot.com/-p8vD7Kxpd0Q/Uy2j7mt1x9I/AAAAAAAAGhU/exqNzQJYkFU/s1600/difference-between-margin-padding-css-propriety-tutorial.png）可以提供帮助吗？ – Xariez

没问题，我知道保证金的工作方式，但我不知道如何定位一些我可以轻松地用“position：absolute”定位的元素。 –

使用绝对位置不应该是您定位元素的默认方法，除非您有充分的理由。通常当你需要一个元素来打破文档流时，通常会使用它。如果你刚开始，我建议结帐例如https://www.codecademy.com/learn/web（它是免费的）。

来源

2017-06-28 07:12:01

是的，我从codecademy学习了HTML和CSS，但我并不擅长使用“margin”。 –

布局元素可能是学习CSS最困难的事情。也是最重要的。只需继续尝试并查看您喜欢的网站代码即可。另请阅读Flexbox。（https://css-tricks.com/snippets/css/a-guide-to-flexbox/是我的文章） –

如何保持不同分辨率的相同位置？

回答

相关问题