CSS 頁面內容很少 全屏
創建一個只有很少內容的頁面，利用 CSS 將這個頁面的內容占據整個屏幕。下面我們一起來實現一個這樣的效果。
HTML 代碼：
<!DOCTYPE html> <html> <head> <title>全屏頁面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>這是一個全屏頁面，內容很少，僅用來演示如何利用 CSS 讓頁面充滿整個屏幕。</p> </body> </html>在上面的 HTML 代碼中，我們只有一個段落 `
`，非常簡單。接下來，我們來實現 CSS 樣式。 CSS 代碼：
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-size: 40px;
line-height: 1.5;
max-width: 700px;
padding: 0 20px;
text-align: center;
}首先，我們設置 `body` 標簽的 `margin` 和 `padding` 值為 0，使得頁面中沒有多余的空間。
然后，我們設置 `body` 的高度為 `100vh`，這樣就可以占滿整個可視區域的高度。接著，我們使用 `display: flex` 將 `body` 標簽設置為彈性盒子布局，這樣可以讓我們控制其子節點（這里只有一個段落）的對齊方式。我們使用 `align-items: center` 和 `justify-content: center` 將其子節點水平和垂直居中。
最后，我們設置段落 `p` 的一些樣式，例如字體大小、行高和最大寬度等。這樣就可以讓文本保持在固定的大小并居中。`padding` 屬性還可以讓文本與屏幕的頂部和底部留出一些空白間距。
總結
在這個例子中，我們只使用了一個段落來填充整個屏幕。但是，這個技術可以用于更復雜的頁面，讓頁面更強大和靈活。利用 CSS 彈性盒子布局的強大功能，我們可以快速輕松地讓頁面占滿整個屏幕。