巢狀

將多個 <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 樣式):

StackOverflow 文件

巢狀內聯元素和塊元素在巢狀元素時,你應該記住,有內聯元素和塊元素。塊元素在後臺新增換行符,意味著,其他巢狀元素自動顯示在下一行中,預設情況下內聯元素可以彼此相鄰放置

避免深深的 <div> 築巢

深度且經常使用的巢狀容器佈局顯示了錯誤的編碼樣式。

圓角或一些類似的函式通常會建立這樣的 HTML 程式碼。對於大多數上一代瀏覽器,都有 CSS3 對應物。嘗試儘可能少地使用 HTML 元素來增加內容與標記比率並減少頁面載入,從而在搜尋引擎中獲得更好的排名。

div section 元素不應巢狀深度超過 6 層。