HTML5 是現代 Web 開發中必不可少的語言之一，它提供了豐富的標簽和屬性，以及強大的功能和動態特性。其中一個常用的特性就是 Box 模型，它可以讓開發者更好地控制頁面元素的布局和樣式。 要設置 Box 模型，需要了解一些基本的 CSS 概念和語法。在 CSS 中，每個 HTML 元素都可以看作是一個矩形框（box），這個框由內容區域、內邊距（padding）、邊框（border）以及外邊距（margin）組成。這些屬性的設置可以用 CSS 樣式來進行，如下所示： ``` .pre { box-sizing: border-box; /* 設置盒模型為 border-box */ width: 200px; height: 200px; padding: 10px; border: 1px solid black; margin: 10px; } ``` 在上面的代碼中，通過設置 box-sizing 屬性為 border-box，可以讓盒模型的寬度和高度包括內邊距（padding）和邊框（border）。這樣我們就可以更方便地控制元素的尺寸和位置了。同時，通過設置 padding、border 和 margin 屬性，可以調整元素的內外間距，從而實現更復雜的布局效果。 需要注意的是，不同瀏覽器對盒模型的處理方式可能不同，在編寫 CSS 樣式時應該考慮到這一點，避免出現不兼容的問題。此外，也可以使用一些 CSS 框架或者類庫來簡化盒模型的設置，比如 Bootstrap、Foundation 等。 總的來說，Box 模型是 HTML5 中非常重要的一個特性，它可以幫助開發者更好地控制頁面設計和布局，提高 Web 應用的用戶體驗和可用性。在開發過程中，我們需要認真學習 CSS 的基本語法和盒模型的相關知識，合理地運用這些技術，才能實現更好的頁面效果和交互體驗。