CSS盒子嵌套是網頁布局中的重要技術。通過合理的盒子嵌套可以實現復雜的布局效果,優化網頁的結構和美觀度。
/* 父元素盒子 */ .parent { width: 800px; height: 500px; border: 1px solid #ccc; padding: 20px; margin: 0 auto; } /* 子元素1盒子 */ .child1 { width: 300px; height: 200px; border: 1px solid #000; float: left; margin-right: 20px; } /* 子元素2盒子 */ .child2 { width: 460px; height: 200px; border: 1px solid #000; float: right; } /* 孫元素1盒子 */ .grandchild1 { width: 200px; height: 100px; border: 1px solid #000; margin: 20px; } /* 孫元素2盒子 */ .grandchild2 { width: 200px; height: 100px; border: 1px solid #000; margin: 20px; }
以上代碼展示了一個簡單的嵌套盒子的例子。父元素盒子的寬度為800px,高度為500px,邊框為1px實線灰色,內邊距為20px,水平居中顯示。子元素1盒子的寬度為300px,高度為200px,邊框為1px實線黑色,浮動在父元素盒子的左側,并留有20px的右邊距。子元素2盒子的寬度為460px,高度為200px,邊框為1px實線黑色,浮動在父元素盒子的右側。孫元素1盒子的寬度為200px,高度為100px,邊框為1px實線黑色,外邊距為20px,嵌套在子元素1盒子中。孫元素2盒子與孫元素1盒子樣式相同,也嵌套在子元素1盒子中。
上一篇mysql對已知數據排序
下一篇css盒子居中的代碼