CSS單列布局是指網(wǎng)頁中只有一列內(nèi)容，一般在移動設(shè)備上應(yīng)用較多。下面我們來看一個簡單的實例。
<html><head><style>/* 設(shè)置 body 全屏 */
body {
margin: 0;
padding: 0;
height: 100%;
}
/* 設(shè)置內(nèi)容樣式 */
.content {
font-size: 20px;
text-align: center;
margin-top: 50%;
transform: translateY(-50%);
}
</style></head><body><div class="content"><p>歡迎來到CSS單列布局實例！</p><p>這是一篇關(guān)于CSS單列布局的文章。</p><p>希望您能學(xué)習(xí)到一些新知識。</p></div></body></html>以上代碼實現(xiàn)了一個簡單的單列布局。通過設(shè)置 body 的高度為 100%，使得文檔全屏，然后將內(nèi)容用一個 div 包起來，再設(shè)置 margin-top:50%; 和 transform:translateY(-50%); 其中 margin-top 是將內(nèi)容頂?shù)巾撁娴闹醒胛恢茫瑃ransform:translateY(-50%); 是實現(xiàn)居中對齊。
總結(jié)：CSS單列布局適用于內(nèi)容較為簡單的頁面，如移動端網(wǎng)頁。通過設(shè)置 body 的高度全屏，再通過 div 將內(nèi)容包起來，設(shè)置居中對齊，即可實現(xiàn)簡單的單列布局。