CSS的div是網(wǎng)頁中常見的標簽。通過div，我們可以將不同的元素分開來進行樣式設計和布局。除此之外，還可以通過CSS將多個div構(gòu)成一個樹狀結(jié)構(gòu)圖來幫助我們更清晰地了解網(wǎng)頁布局和樣式。

.tree {
border: 1px solid #ddd;
padding: 10px;
width: 300px;
}
.tree ul {
list-style: none;
margin: 0;
padding: 0;
}
.tree li {
margin: 0;
padding: 0 20px;
line-height: 20px;
position: relative;
}
.tree li::before,
.tree li::after {
content: '';
left: -20px;
position: absolute;
right: auto;
}
.tree li::before {
border-left: 1px solid #ddd;
bottom: 50px;
height: 100%;
top: 0;
width: 1px;
}
.tree li::after {
border-top: 1px solid #ddd;
height: 20px;
top: 25px;
width: 25px;
}
.tree li:last-child::before {
height: 25px;
}
.subtree {
margin-left: 20px;
position: relative;
}
.subtree::before {
border-left: 1px solid #ddd;
bottom: 0;
content: '';
left: -20px;
position: absolute;
top: 0;
width: 1px;
}

上面的代碼就是一個簡單的基于div的樹狀結(jié)構(gòu)圖。我們可以通過CSS樣式設置相應的寬度、邊框等屬性，使結(jié)構(gòu)更加清晰明了。其中，.tree是整個樹狀結(jié)構(gòu)的容器，.subtree是子節(jié)點的容器。通過:before和:after偽元素的設置，我們可以實現(xiàn)相應的豎線和線條，使整棵樹更加美觀。