CSS指層疊樣式表，它是網頁樣式的設計語言。在CSS中，樣式分為盒子模型和排版模型兩種模型。下面我們將一一介紹這兩種模型的具體內容。

.box {
width: 200px;
height: 150px;
margin: 20px;
padding: 10px;
border: 1px solid black;
background-color: #f5f5f5;
}

1. 盒子模型

盒子模型是CSS最基本的布局模型，它是指任何HTML元素都可以看作是一個盒子，它擁有內容、內邊距、邊框和外邊距四個部分。盒子模型是通過width、 height、 margin、 padding和border這些屬性來定義盒子的大小、邊距和邊框的。

盒子模型中，元素的寬度和高度指的是內容框的寬度和高度，而不包含padding和border的大小。因此，如果要計算一個元素的總寬度，需要將元素的內容寬度加上padding、 border和margin的寬度。

.box {
width: 200px;
height: 150px;
margin: 20px;
padding: 10px;
border: 1px solid black;
background-color: #f5f5f5;
}

2. 排版模型

排版模型是CSS中用于設置元素和文本的布局和排版的模型。它是通過display、position、float等屬性來控制元素在頁面中的位置和大小。排版模型主要涉及到的屬性有以下幾個：

（1） display：元素在文檔流中的屬性，它可以設置為block、inline、inline-block、table、table-cell等值。每個值對應的元素都有不同的布局方式。

（2） position：元素的定位方式，可以為static、relative、absolute和fixed。其中，相對定位和絕對定位常常與top、bottom、left、right一起使用，設置元素的位置。

（3） float：元素的浮動方式，使元素向左或向右浮動，同時其它元素會圍繞著浮動元素進行排列。

.box {
display: flex;
justify-content: center;
align-items: center;
}

總結：

CSS的盒子模型和排版模型是網頁設計時必須掌握的兩種基礎布局方式。盒子模型主要圍繞著內容、內邊距、邊框和外邊距來進行布局；排版模型則更加靈活，可以通過各種屬性來控制元素的位置、大小和布局方式。只有對這兩種模型熟練掌握，才能設計出美觀、實用、易用的網頁。