CSS可以為網(wǎng)頁(yè)設(shè)計(jì)師提供各種樣式和布局，其中一種功能是強(qiáng)行分頁(yè)。強(qiáng)行分頁(yè)是指網(wǎng)頁(yè)內(nèi)容分成多個(gè)頁(yè)面展示，可以通過(guò)CSS樣式規(guī)則實(shí)現(xiàn).

@media print {
div.page-break { display: block; page-break-before: always; }
}

以上代碼使用了@media規(guī)則，該規(guī)則會(huì)在打印或?qū)С鼍W(wǎng)頁(yè)時(shí)應(yīng)用。其中，div.page-break類會(huì)在打印或?qū)С鰰r(shí)自動(dòng)產(chǎn)生一個(gè)分頁(yè)符。對(duì)于每個(gè)需要分頁(yè)的div元素，我們可以添加page-break類名。

實(shí)際上，即使不使用強(qiáng)制分頁(yè)，打印或?qū)С鼍W(wǎng)頁(yè)時(shí)，瀏覽器默認(rèn)會(huì)將網(wǎng)頁(yè)內(nèi)容分頁(yè)。這時(shí)候我們可以用CSS代碼來(lái)更好的控制分頁(yè)位置，保證我們需要的內(nèi)容不會(huì)被分隔。

@media print {
html {
font-size: 12pt;
max-width: 100%;
overflow-x: hidden;
}
body {
max-width: 100%;
margin: 0 auto;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
}
.page-break {
margin-top: 20px;
page-break-before: always;
display: block;
clear:both;
}
}

代碼中，我們通過(guò)@media規(guī)則和樣式規(guī)則來(lái)確定打印和導(dǎo)出的可視內(nèi)容。其中，我們通過(guò)max-width和overflow-x屬性，使網(wǎng)頁(yè)為響應(yīng)式布局，適應(yīng)不同的分辨率。對(duì)于圖片，我們?cè)O(shè)置了max-width和height屬性，讓圖片可以在剪切窗口內(nèi)正常顯示。最后，我們通過(guò)page-break-before 屬性來(lái)控制頁(yè)面的分頁(yè)位置，并給分頁(yè)加上樣式來(lái)美化。

總之，使用CSS的強(qiáng)制分頁(yè)功能，我們可以方便地控制打印或?qū)С鲰?yè)面的分頁(yè)位置，保證網(wǎng)頁(yè)內(nèi)容的完整性和易讀性。