首页 > web前端 > css教程 > 正文

css:page-break-before:always和page-break-after:always的区别

黄舟
发布: 2018-05-15 09:48:40
原创
5028 人浏览过

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的区别的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板