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

chuanzhang5687 2011-12-29 04:52:32
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 打印预览里面效果是一样的
...全文
517 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
chuanzhang5687 2011-12-30
  • 打赏
  • 举报
回复
解决了,鸭子呸呸的,before的话就是当前行开始分页
after就是 下一行开始分页
我干[Quote=引用 5 楼 taomanman 的回复:]
解决了没有?
[/Quote]
暖枫无敌 2011-12-30
  • 打赏
  • 举报
回复
解决了没有?
yzf86211861 2011-12-30
  • 打赏
  • 举报
回复
CSS 还是自己动手去试试 看看 效果。
孟子E章 2011-12-29
  • 打赏
  • 举报
回复
最直观的就是用例子去理解。

注意,css定义换行是插入在h2 的前面还是插入在h2 后面
孟子E章 2011-12-29
  • 打赏
  • 举报
回复
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>

进行测试就可以看到打印的效果是不同的了

62,046

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧