盒子模型是CSS中最基本、最重要的概念之一。簡單來說，它是用來描述HTML元素大小、外觀和位置的。通過CSS3中的一些新屬性，我們可以更加精確地控制盒子的水平布局。

CSS3中的box-sizing屬性允許我們按照自己的規則來計算元素的大小。默認的box-sizing屬性值是content-box，只計算元素的內容，而不考慮它的padding和border。這可能導致元素的實際寬度比我們期望的要大很多。為了解決這個問題，我們可以使用box-sizing: border-box將元素的padding和border包括在內，從而更準確地計算元素的大小。

.box-sizing {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
}

另一個用來控制盒子水平布局的屬性是text-align。它可以用來設置元素內部內容在盒子中的水平位置。可以使用left、right、center等值。特別需要注意的是，text-align屬性只能作用于塊級元素和表格單元格。如果想讓內聯元素水平布局，可以使用display: inline-block將它們轉換成塊級元素。

.text-align {
width: 200px;
height: 100px;
text-align: center;
background-color: lightblue;
display: inline-block;
}

最后一個需要介紹的屬性是float。通常用來讓元素左或右浮動。浮動后的元素將會脫離文檔流，其它元素會自動填充它的位置。在使用float時，強烈推薦將父元素設置為clearfix，以免浮動元素溢出。

.float {
width: 100px;
height: 100px;
float: left;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}

盒子模型是CSS3中一個必不可少的概念。掌握了這些水平布局相關的屬性和方法，將會大大提高我們的頁面設計效果。