CSS是前端開發中重要的一環，可以用它為網站添加各種樣式，為網站設計者提供豐富的選項。

其中一項常見的用途是制作網站結構圖，利用CSS的box model屬性，我們可以快速地為整個頁面創建一個可視化的結構圖。

body {
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.header {
background-color: #F9A825;
height: 80px;
width: 100%;
}
.main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}
.card {
background-color: #E0E0E0;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
height: 200px;
width: 300px;
margin: 20px;
}
.sidebar {
background-color: #F44336;
width: 20%;
height: 300px;
}

以上的CSS代碼可以為一個基本的網站結構圖提供樣式。結構圖包括一個header作為頁面頂部，一個main作為主要內容區，一個sidebar作為側邊欄。在main中有4個card，每個card都是一個單獨的元素，展示不同的內容。

通過這樣的結構圖，我們可以更好地了解網站的布局，為后續的樣式編輯提供幫助。