page- break-before和page-break-after css属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值：auto、always、left和 right。其中auto是默认值，只有在有需要时，才需设定分页符号 (page breaks)。page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。page- break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。page-break-before若设定成 right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。page-break-after属性会将分页符号加在指定组件后，而非之前。在下列程序中您将可以看到这些属性的设定。
上面的是百度出来的结果
飘红的那一段，遇到特定组件 打印机会重新开始新的打印页
这个特定组件 指的是？
另外这两个的区别是什么，没怎么看懂
<html>
<head>
<title>listing 14-4</title>
</head>
<body>
<div>this is the first div.</div>
<div style="page-break-before:always">this is the second div.</div>
<div style="page-break-after:always">this is the third div.</div>
<div>this is the fourth div.</div>
<div style="page-break-before:right">this is the fifth div.</div>
<div style="page-break-after:right">this is the sixth div.</div>
<div>this is the last div.</div>
</body>
</html>
下面这一段代码也是过了，用的是ie7 打印预览里面效果是一样的
before是在盒模型的前面插入换页符
after是在后面。
你可以使用1.html
<style>
h2{page-break-after: always;}
</style>
1
<h2>---这个在前1页---</h2>
2
<h2>---这个在前2页---</h2>
和2.html
<style>
h2{page-break-before: always;}
</style>
1
<h2>---这个在前2页---</h2>
2
<h2>---这个在前3页---</h2>
进行测试就可以看到打印的效果是不同的了
最直观的就是用例子去理解。
注意，css定义换行是插入在h2 的前面还是插入在h2 后面
css 还是自己动手去试试 看看 效果。
以上就是css：page-break-before:always和page-break-after:always的区别的详细内容。