CSS模型是Web開發中非常重要的一個概念，它是網頁樣式設計的基礎。下面我們來看一些CSS模型的代碼實例。

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

上面的代碼定義了一個名為“box”的類，設置了寬度和高度為200px，背景顏色為灰色，邊框為1px黑色實線，內邊距為10px，外邊距為20px，以及使用box-sizing屬性將內邊距和邊框包含在盒子內。這個CSS模型非常常見，它可以用于創建各種不同的盒子樣式。

.button {
display: inline-block;
width: 100px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
.button:hover {
background-color: #666;
}

這段代碼定義了一個名為“button”的類，用于創建按鈕。它將元素顯示為行內塊級元素，設置了寬度和高度為100px和30px，背景顏色為黑色，字體顏色為白色，文本居中對齊，在按鈕內部設置了垂直居中的文本行，采用了圓角邊框，設置了鼠標懸停時的背景色為灰色。該CSS模型非常適合制作各種樣式美觀的按鈕。

.dropdown {
position: relative;
}
.dropdown .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 999;
}
.dropdown:hover .dropdown-menu {
display: block;
}

以上代碼是一個用于制作下拉菜單的CSS模型。它在父元素上設置relative定位，子元素使用absolute定位，將下拉菜單的位置設置在父元素下方。設置子元素默認隱藏，鼠標懸停在父元素上時，通過“:hover”偽類選擇器，將下拉菜單顯示出來。該CSS模型非常適合在網站制作中實現下拉菜單等交互功能。