CSS中的盒模型是我們開發(fā)者必須掌握的內(nèi)容。在這個模型中，每一個盒子都包含了四個主要內(nèi)容：元素的內(nèi)容、內(nèi)邊距、邊框以及外邊距。

在CSS中，一個元素的內(nèi)邊距和邊框的大小都可以根據(jù)我們自己的喜好來設置。而在制作網(wǎng)站時，我們經(jīng)常需要將一個元素的尺寸按照寬高比例來設置。這時，就需要了解到一個非常重要的概念：子元素的尺寸可以是大于父元素的。

.parent {
width: 500px;
height: 200px;
background-color: #ccc;
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% + 100px);
height: calc(100% + 100px);
background-color: #fff;
}

在上面的代碼中，我們創(chuàng)建了一個父元素和一個子元素。父元素的寬度為500px，而子元素的寬度卻是100%+100px。這是因為我們使用了CSS的calc()函數(shù)來進行計算，即子元素的寬度為父元素的100%加上100px。

同樣的，子元素的高度也是這樣進行設置的。為了讓子元素垂直居中，我們使用了position: absolute;以及transform: translate(-50%, -50%);。

總之，CSS中的子元素可以比父元素的尺寸大，從而使我們的頁面設計更加靈活多變。