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'是什麼，並且一個定義並不完全是我所期待的。然而'浮動'的建議是非常有幫助的：謝謝！ –