CSS沙鷹模型是前端開發中常用的框架模型之一。它是一個由三個重要組成部分構成的模型：盒模型、定位和浮動。

首先是盒模型，它定義了一個元素在頁面上的尺寸和位置。在CSS3之前，盒模型被劃分為兩種類型：W3C模型和IE模型。W3C模型將元素的寬度和高度計算為內容寬度和內容高度，而IE模型將元素的寬度和高度計算為內容寬度、內邊距和邊框的總和。CSS3將它們融合在一起，成為了CSS盒模型。

.box {
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid black;
}

接下來是定位，它可以將元素定位到頁面上的絕對位置。常用的定位方式有相對定位、絕對定位和固定定位。相對定位是指相對于元素原來的位置移動，而絕對定位和固定定位都是相對于其最接近的已定位父元素進行定位。

.relative {
position: relative;
left: 50px;
top: 50px;
}
.absolute {
position: absolute;
left: 0;
top: 0;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
}

最后是浮動，它可以讓元素浮動在文檔流中。常用場景是用于實現多列布局和圖片環繞文字等效果。在浮動元素后，其他元素將會圍繞著它進行布局，但是需要注意的是，浮動元素的高度可能會影響其他元素的布局。

img {
float: left;
margin-right: 10px;
}
.column {
float: left;
width: 50%;
}

綜上所述，CSS沙鷹模型是前端開發中非常重要的模型之一。通過掌握盒模型、定位和浮動等要素，可以實現豐富多樣的頁面布局效果。