CSS - 为什么有很多方法来定位，哪个方法是正确的？

这只是一个哲学而不是100％的硬编码导向问题，但它与编程标准有关，我希望它符合规则。CSS - 为什么有很多方法来定位，哪个方法是正确的？

在学习网络开发的同时，我一直对定位很感兴趣。我的第一个小白网站是这样的：

<body> 
    <h1> Welcome to my website. </h1> 
    <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> 
    <p> Copyright 2016 </p> 
</body>

但是我总觉得不安这样做 - 毕竟，这个标签几乎从来没有在任何专业网站，我看到了使用，并要求this question后，我的理解是不容许任何额外的标记并且不是语义的。

我找了其他方法，然后偶然发现了position: absolute。我基本上是通过为我的页面上的每个元素设置的手动位置来使用它，因为我不知道任何其他方式使用position: absolute而不是这样做。 这些网站在我的屏幕上看起来不错，但最轻微的改变毁了它们。

寻找另一种解决方案，我只是想用margin来定位一切。例如，而不是<br><br>我会做margin-top: 5%。我现在仍然这样做，感觉非常错误。

所以我只是在寻找一般性的建议 - 大多数人怎么做？什么是最佳做法？显然有数以百计的方法来做到这一点，我已经浏览了很多指南和教程，但我只是没有获得CSS定位。

来源

2016-07-29 Joseph A.

我会避免使用页面的总体布局的绝对定位，正如你所说的“最轻微的调整大小会毁掉它们”。我倾向于遵循的一般经验法则是使用margin-bottom从上到下构建以下元素，与浮动和清除相结合是我找到的最佳工作方式，但是像所有内容一样，它非常依赖于项目。 – MCMXCII

为什么我觉得这个问题属于其他地方 –

@MCMXCII谢谢！是的，我想我会这么做。单独定位利润似乎对我来说简直不可靠，但随着浮动/清除它看起来更人性化。 –

四个最常用的位置的值是initial, relative, absolute and fixed.

的fixed值用于一个元件在主屏幕上的固定位置进行定位。

值absolute and relative用于将元素放置在相对于父级的固定位置。您需要将元素定义为absolute，并将其父项定义为relative。

然后，你可以做这样的事情：

<style> 
    body{ 
     position:relative; 
    } 
    #copyright{ 
     position:absolute; 
     top:5%; 
    } 
</style> 

<body> 
    <h1> Welcome to my website. </h1> 
    <p id="copyright"> Copyright 2016 </p> 
</body>

For more information see w3schools

来源

2016-07-29 07:54:00 polamoros

所有的答案都很好 - 但这个答案是“接受的”，因为它提供了一个例子。 –

那么这是真的如果你采取position: absolute;你的网页将永远不会调整大小。如果ouy用保证金做出来的话，那很好。它比<br>标签好得多。如果你在一行上有三个，你可以浮动：left;每个<div>。它完全适合。如果缩小，那么新行上的第四个<div>可能会出现，或者如果你在一行中可能只有两个div。

tl; dr 使用float: left;进行响应式设计。

来源

2016-07-29 07:44:32 Blue

无论你想选择的方式，问题是应该使用像Material Design和Bootstrap框架将帮助你实现，大多数设备很好地渲染，但我通常与边距和边框去，所以我们继承的是大多数积木专业网站。

来源

2016-07-29 07:47:45

的positon:absolute;意味着该元素相对于它的第一位置（而不是静态）祖先元素定位。

我同意@Blue说可以使用保证金比<br>。您可以使用float:进行响应式设计。

来源

2016-07-29 07:55:17

我知道'position：absolute'是什么，并且一个定义并不完全是我所期待的。然而'浮动'的建议是非常有帮助的：谢谢！ –