CSS視覺格式化模型，也被稱為CSS盒子模型，是指當我們使用CSS來設置元素的樣式時，會按照一個盒子的形式來渲染該元素的內容，包括元素的尺寸、內邊距、邊框和外邊距等。

.box{
width:200px;
height:100px;
margin:20px;
padding:10px;
border:1px solid #000;
}

在上面的代碼中，我們定義了一個class為“box”的元素，并設置了它的寬度為200px，高度為100px，邊距為20px，內邊距為10px，邊框為1px實線黑色邊框。這個樣式將應用于任何使用了這個class的HTML元素。

這個CSS盒子模型可以分為兩種不同的類型：標準盒子模型和IE盒子模型。標準盒子模型是指元素的尺寸（width和height）不包括邊框和內邊距，而IE盒子模型則是指元素的尺寸包括了邊框和內邊距。

在CSS3中，還新增了一個屬性“box-sizing”，用來指定盒子的渲染方式。默認值為“content-box”（標準盒子模型），還可以設置為“border-box”（IE盒子模型），這樣元素的尺寸將包括邊框和內邊距。

.box{
width:200px;
height:100px;
margin:20px;
padding:10px;
border:1px solid #000;
box-sizing:border-box;
}

在上面的代碼中，我們將box-sizing設置為“border-box”，這樣元素的尺寸將包括邊框和內邊距，適用于IE盒子模型。

通過了解CSS視覺格式化模型的概念和屬性，我們可以更好地進行頁面布局和樣式設計，達到更好的視覺效果。