HTML 巢狀結構

1

2

3

我們現在看到的網頁,其實是經過一個一個像盒子的結構,層層包覆建構出來的版面。
如上面的結構就是三個盒子(div)建構出來的。我們用三個<div>層層包覆出來的結果。

▼如果撇除顏色等屬性的設定,語法看起來會像這樣。
<div>
1
    <div>
    2
        <div>
        3
        </div>
    </div>
</div>

我們可以從顏色來看這些標籤各自屬於哪個盒子(div)

桃紅色屬於最外層的 div,接下來是橘黃色,最內層是藍色。

 

▼果我們把語法改成

<div>1
        <div>
        3
        </div>
</div>

<div>2</div>

我們把橘色的盒子拿出來了
▼會變成如下:

1

3
2