CSS3 盒子嵌套是 CSS3 提供的新特性之一，可以在 HTML 中實(shí)現(xiàn)更加復(fù)雜的布局，使得頁面的展示更加美觀、靈活。下面我們來學(xué)習(xí)這個(gè)特性應(yīng)該如何使用。

.box1{
 width: 200px;
 height: 200px;
 background-color: #000;
 padding: 20px;
}
.box2{
 width: 100px;
 height: 100px;
 background-color: #fff;
 margin: 20px;
 padding: 20px;
 box-shadow: 2px 2px 2px #000;
}
.box3{
 width: 50px;
 height: 50px;
 background-color: #f00;
 margin: 20px;
 padding: 20px;
 box-shadow: 2px 2px 2px #000;
}

上面這段代碼展示了三個(gè) div，其中 .box1 包含了 .box2 和 .box3 。box1 作為父元素，box2 和 box3 作為子元素，它們的樣式設(shè)置如上。其中 .box2 和 .box3 設(shè)置了 margin 和 padding，這兩個(gè)屬性是實(shí)現(xiàn)盒子嵌套布局的重要關(guān)鍵。

我們將這份代碼保存為 test.html 并在瀏覽器中運(yùn)行，發(fā)現(xiàn) .box2 和 .box3 能夠嵌套在 .box1 中，效果如下。

<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>

這就是 CSS3 盒子嵌套的基本示例。我們可以通過 margin 和 padding 設(shè)定父元素與子元素的間距，并在這些盒子之間嵌套更多的盒子，創(chuàng)造出更加復(fù)雜的頁面布局。想必大家已經(jīng)感受到了 CSS3 盒子嵌套的強(qiáng)大，趕快去嘗試一下吧！