CSS是網頁制作中非常重要的一部分，對于頁面的排版則是CSS最重要的功能之一。下面將會介紹CSS排版的基礎知識，讓大家能夠更容易地理解和掌握。

/* 以下為示例代碼 */
body {
margin: 0;
padding: 0;
background-color: #f6f6f6;
font-family: Arial, sans-serif;
font-size: 16px;
}
.container {
width: 960px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
h1 {
font-size: 32px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
p {
line-height: 1.5;
margin-bottom: 20px;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

首先是對于整個網頁的排版，可以使用body選擇器設置一些基本的樣式，比如設置背景色、字體等等。在CSS中使用margin和padding可以對元素進行定位和邊距的設置。在這段代碼中，我們設置了整個網頁的背景色為淺灰色，字體為Arial，字號為16px。

接下來，我們使用.container類對網頁中的內容進行排版。它的寬度被設置為960px，在左右兩邊自動居中。同時，為了讓內容與邊框之間留有一些空白，設置了padding為20px。

對于標題h1元素，我們設置了字體大小為32px、加粗，居中，并添加了一個20px的下邊距。段落

元素的行高為1.5，下邊距為20px。

在YHTML中，圖片元素是內聯元素，這意味著圖片的周圍會有一些間距，而不是緊貼在其他元素上。為了解決這個問題，我們使用display:block將其改為塊級元素，并且設置了最大寬度為100%以保證其在不同屏幕上的顯示效果，同時高度等比例縮放，使用margin:0 auto可以讓其在容器中水平居中。