CSS中盒子的子盒子表示方法

在CSS中，我們可以使用嵌套規(guī)則來表示盒子的子盒子，假設(shè)我們有一個(gè)主盒子，它的類名為.main-box，我們想要在這個(gè)主盒子里放入一個(gè)子盒子，子盒子的類名為.sub-box。

我們可以這樣寫CSS代碼：

.main-box {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  padding: 10px;
}
.sub-box {
  width: 200px;
  height: 100px;
  border: 1px solid #333;
  padding: 5px;
}

在HTML中，我們可以這樣使用：

<div class="main-box">
  <div class="sub-box"></div>
</div>

這樣，.sub-box就會(huì)作為.main-box的子盒子出現(xiàn)，我們可以根據(jù)需要調(diào)整子盒子的樣式，使其與主盒子相協(xié)調(diào)，也可以添加更多的子盒子，以滿足復(fù)雜的頁面布局需求。