CSS外框是網頁布局中非常重要的一部分，可以將各種元素組織成一個整體，讓網頁的外觀更加美觀。本文將介紹一些常見的CSS外框。

1. 盒子模型外框

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

盒子模型外框是指一個帶有 padding、margin 和 border 的容器。其優點是可以很方便地組織網頁元素，包括圖片、文本框、按鈕等。

2. 浮動外框

.float {
float: left;
width: 200px;
height: 200px;
margin: 20px;
}

浮動外框具有很強的適應性，可以讓網頁中的元素在頁面上自由浮動，以適應不同的屏幕大小和分辨率。

3. 彈性盒子模型外框

.flexbox {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}

彈性盒子模型外框可以實現非常靈活的布局，可以用來實現水平居中、垂直居中、橫向滾動等效果。

4. 網格外框

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 20px;
}

網格外框可以將網頁分割為各種大小的單元格，可以用來實現復雜的布局效果。

總之，CSS外框是實現網頁布局的關鍵，掌握各種外框的用法可以讓你的網頁設計更加靈活和美觀。