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

我需要幫助。我正在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/是我的文章） –

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

回答

相關問題