正常流量的html..behaves怪異..是否正確的代碼定位在JS？

從很長一段時間我都在想這個問題。但不知道我是否應該問這個問題。我一直非常遺憾地看到正常流程的html元素的行爲。控制它們有時非常困難。特別是當我使用服務器端編碼以及創建動態內容時。有時候，我花更多時間來理解我用這些元素來代碼服務器端或JavaScript的過程。對我來說，很難理解變化如何影響其他元素。正常流量的html..behaves怪異..是否正確的代碼定位在JS？

所以，我想過對元素使用絕對和相對定位，並根據計算窗口的innerWidth和innerHeight來放置它們，這也會使它響應。我覺得我會有更多的控制。

在窗口調整大小我可以再次定位元素，使其與窗口調整大小動態。就像下面的代碼，

window.onload = function() 
{ 
document.getElementById("gamectrl").style.position = "absolute"; 
document.getElementById("gamectrl").style.top = document.getElementById("rtctrls").offsetTop + 10 + "px"; 
document.getElementById("gamectrl").style.left = document.getElementById("rtctrls").offsetLeft + 10 + "px"; 
} 

window.onresize = function() 
{ 
    document.getElementById("gamectrl").style.top = document.getElementById("rtctrls").offsetTop + 10 + "px"; 
    document.getElementById("gamectrl").style.left = document.getElementById("rtctrls").offsetLeft + 10 + "px"; 
}

你是否認爲這是定位的HTML元素的正確方法？我對此很滿意。但我不確定這是否是正確的做法。

請分享，如果你有任何這方面的經驗。我很困惑使用哪種方法。我無法正確理解html元素的正常流程，因爲我找不到任何深入討論它們的好資源。所以，如果你知道有什麼好的資源來了解正常的文檔流（深入），那麼也要分享。

來源

2014-01-30 Sameeksha Kumari

這裏[關於定位的資源（HTTP：// WWW .w3.org/TR/CSS2/visuren.html＃定位的方案）。「正常流量」是'position：static'。 –

您對定位和響應式網頁的要求稍有混淆。是否有可能根據您的需求創建一個可以編輯的小提琴？使用offsetTop和offsetLeft定位元素並不是一個好主意。使用盒子建模（儘管初學者有點難以理解），您可以準確地控制定位。 – nightgaunt

應該避免作爲文檔流程一部分的元素的絕對定位。一個原因是，如果用戶使用文本縮放，他們可以打破你脆弱的佈局。 –

我不會使用JavaScript來重新定位給出您所示示例的元素。在你的例子中，我會堅持使用CSS。如果您擔心瀏覽器/設備調整大小，那麼您需要使用@media查詢進行調查。如果您需要將元素與窗口邊緣或其他元素保持一定的距離，則可以使用百分比值（例如margin-top: 10%;）設置元素的margin。以下是一些有關CSS定位的參考以及@media查詢。

媒體查詢：http://css-tricks.com/css-media-queries/媒體
查詢：http://www.w3schools.com/css/css_mediatypes.asp CSS
定位：http://alistapart.com/article/css-positioning-101 CSS
定位：http://www.w3schools.com/css/css_positioning.asp

來源

2014-01-30 14:55:25 Jeff

正常流量的html..behaves怪異..是否正確的代碼定位在JS？

回答

相關問題