CSS是網頁設計中非常重要的一部分，而其中的寬和高也是設計中不可缺少的元素。在設計網頁時，寬和高的搭配能夠顯著地影響頁面的整體效果，因此正確使用寬和高非常重要。

寬和高不相同的設計可能會使頁面過于雜亂，不易閱讀和瀏覽。在這種情況下，我們可以設置CSS的寬和高以確保頁面元素的整齊和美觀。

.example{
width: 300px;
height: 300px;
}

以上就是將一個元素的寬和高都設置為300像素的樣例代碼。這樣可以使頁面元素保持形狀完整，整齊美觀，也方便我們布局。

當然，在某些情況下，我們會需要實現寬和高一樣的設計效果。這時，我們可以使用下面的樣式代碼：

.square{
width: 300px;
height: 300px;
}

在這個樣式代碼中，我們將寬和高都設置為300像素，使用這個樣式類將會使元素變成正方形，看上去更加整齊美觀。

另外，我們還可以使用百分比來實現寬和高一樣的設計效果。例如：

.square{
width: 30%;
padding-top: 30%;
}

這個樣式代碼將會把一個元素的寬和高都設置為視區的30%。padding-top的值也是30%，保證了元素高度一樣。

總之，正確使用CSS的寬和高對于設計網頁非常重要，它們能夠讓頁面更加美觀、易讀和整齊。我們應該根據實際情況來綜合考慮選擇哪種寬高樣式。