巢狀
將多個 <div>
置於另一個 <div>
中是一種常見做法。這通常被稱為巢狀元素,並允許進一步將元素劃分為子部分或幫助開發人員使用 CSS 樣式。
<div class="outer-div">
用於將兩個 <div class="inner-div">
元素組合在一起; 每個都含有 <p>
元素。
<div class="outer-div">
<div class="inner-div">
<p>This is a paragraph</p>
</div>
<div class="inner-div">
<p>This is another paragraph</p>
</div>
</div>
這將產生以下結果(為清晰起見而應用 CSS 樣式):
巢狀內聯元素和塊元素在巢狀元素時,你應該記住,有內聯元素和塊元素。塊元素在後臺新增換行符,意味著,其他巢狀元素自動顯示在下一行中,預設情況下內聯元素可以彼此相鄰放置
避免深深的 <div>
築巢
深度且經常使用的巢狀容器佈局顯示了錯誤的編碼樣式。
圓角或一些類似的函式通常會建立這樣的 HTML 程式碼。對於大多數上一代瀏覽器,都有 CSS3 對應物。嘗試儘可能少地使用 HTML 元素來增加內容與標記比率並減少頁面載入,從而在搜尋引擎中獲得更好的排名。
div
section 元素不應巢狀深度超過 6 層。