在CSS中，我們可以使用一種叫做“盒模型”的概念來描述一個HTML元素的尺寸。這個盒模型由四個部分組成：內容區域、內邊距、邊框和外邊距。其中，內容區域指的是元素包含的文本或者其他HTML元素；內邊距是內容區域與邊框之間的空白區域；邊框是元素的邊界，可以用來定義元素的形狀和大小；外邊距是元素與其他元素之間的空白區域。

/* 盒模型 */
div {
width: 200px;
height: 200px;
padding: 20px;
border: 2px solid red;
margin: 20px;
}

CSS中的“前大后小”是指在盒模型中，元素的尺寸是先考慮內邊距、邊框和外邊距，然后才考慮內容區域。也就是說，如果你給一個元素設置了寬度和高度，這個尺寸是元素包含內容和內邊距、邊框、外邊距的總尺寸，而不是內容區域的尺寸。

/* 設置元素尺寸 */
div {
width: 200px;
height: 200px;
padding: 20px;
border: 2px solid red;
margin: 20px;
}

如果你想要設置一個元素的內容區域尺寸，那么你需要減去內邊距和邊框的尺寸。比如說，如果你想要讓一個元素的內容區域寬度為200px，那么你需要把元素的實際寬度設置為240px（因為左右各有20px的內邊距和4px的邊框）：

/* 設置內容區域尺寸 */
div {
width: 240px;
height: 200px;
padding: 20px;
border: 2px solid red;
margin: 20px;
}

總的來說，“前大后小”可以讓我們更加精確地控制元素的尺寸和布局，但也需要注意在不同的場景下使用不同的尺寸計算方式。