在CSS模型中，最外層的是盒模型，它是由內容區、內邊距、邊框和外邊距四部分組成。

/*
* 盒模型
*              +-------------------------+
*              |          margin         |
*              |                         |
*              |    +-------------+      |
*              |    |   padding   |      |
*              |    |             |      |
*              |    |   content   |      |
*              |    |             |      |
*              |    +-------------+      |
*              |            border       |
*              +-------------------------+
*
*/
.box {
width: 200px;
height: 200px;
margin: 20px;
padding: 10px;
border: 1px solid black;
background-color: gray;
}

通過設置不同的屬性值，可以對盒模型進行樣式控制，例如設置width和height可以調整內容區的大小，設置padding可以擴大內邊距的區域，設置border可以改變邊框的大小和樣式，設置margin可以改變外邊距的大小和位置。

掌握盒模型的原理和使用方法，在布局和排版中都非常重要，可以有效地控制頁面的展示效果。