既能固定又能隨內容變動的靈活自由變化設計~

##為什麼要有這功能
CSS Box Model 是網頁設計中用來控制元素大小及其內容區域的一個重要概念。透過設定寬度與高度等屬性，設計師可以準確地控制每個區塊的尺寸，確保元素在不同設備或視窗大小下呈現一致的佈局效果。尤其是透過 min-width、max-width、min-height、max-height 等屬性，能夠靈活應對內容的變動，並避免元素過小或過大影響使用體驗。

##核心結構
width 和 height: 設定元素的寬度和高度，這是控制區塊尺寸的最基本屬性。
min-width 和 min-height: 設定元素的最小寬度與高度，避免內容過小無法完整顯示。
max-width 和 max-height: 設定元素的最大寬度與高度，避免內容擴展超出容器的可控範圍。

##主要功能
精準控制尺寸: width 和 height 讓設計師可以固定或調整元素的尺寸，適用於所有類型的內容。
動態適應內容大小: 使用 min-width 和 min-height 確保元素在內容變動時不會過小，max-width 和 max-height 則限制元素不會過度擴展。
提升響應式設計: 這些屬性能夠在不同解析度下讓區塊自適應顯示，使網站更具響應性。

##注意事項
盒子模型中的額外屬性影響尺寸: padding、border 和 margin 都會影響元素的總大小，務必考慮這些因素。
瀏覽器的默認行為: 一些瀏覽器會有不同的 box-sizing 默認值，設計時最好手動設定。
比例調整謹慎使用: 當同時設定 min 和 max 屬性時，確保這些範圍不會互相衝突。

##簡單範例應用

/* CSS */
<Style>
.box {
    width: 300px;            /* 固定寬度 */
    min-width: 200px;        /* 最小寬度 */
    max-width: 500px;        /* 最大寬度 */
    height: 200px;           /* 固定高度 */
    min-height: 150px;       /* 最小高度 */
    max-height: 400px;       /* 最大高度 */
    background-color: #f0f0f0;
    border: 1px solid #ccc;  /* 設定邊框 */
}
</Style>

<!-- HTML -->
<div class="box">
    此區塊的寬度會隨視窗大小變動，但不會小於200px或大於500px，並且保持在最小高度150px與最大高度400px之間。
</div>