page-break-before分页属性

元素分页讲解，

page-break-before：auto。所有浏览器都支持，分页一直时在元素前发生。但是注意点，如果元素是table，或者它是浮动元素(如：float，absolute)的块元素都是不能不支持的，

打印中出现网页分页是习以为常的事情，但是，当你在打印图片元素时候，不想让它被拆分，你会怎么做？刚开始我简单想通过数学运算，解决这个分页的问题。比如获取整个文档的高度，计算出A4纸的高度，然后将对应的元素位置给获取到进行比较，来判断他在哪儿进行分页。当然我也是这么做了，做了好多测试，感觉自己给自己挖了个坑，越挖越深，可是我就是比较固执，要将这条路走到底，当挖了好几天之后，结果是，我的这条思路是行不通的。为什么？原因如下，

1。浏览器打印页面设置是各不相同的，

    例如：火狐，按Alt键，看页面设置

页边距，页眉页脚，是不同的，每台机都是不一样的。

同样的IE

这个是不能控制的。

据我目前查找的资料（多是问度娘的）没有看到过对浏览器打印系统的页边距的操作，就是，我不能用js直接获取当前浏览器页面设置的参数，到此，上面刚开始提到的用数学计算时解决不了的。客观分析目前自身对浏览器掌握度，是很低的，所以只能止步于此。挖坑到此戛然而止，亡羊补牢，迷途知返。

想了那么多，说了那么多，也做了那么多，还是没有结果，我要跳出那个坑，另辟蹊径，我找了我们老大John的帮忙，他见多识广，也是敢想敢干的一位老程序员。他只做了几次实验就把问题解决了。

重点来了

  table是个块元素，它的css属性，display：table；display：inline-block；display：block；

   我的理解是，把table的css属性改为行内元素，那么break-before，就是从这一行开始前，是一整块，那么就会遵循，它的规则，在table前分页。

延伸，根据break-before的属性规范说明，它对table，浮动，绝对定位，等块元素是不做处理的。

而是针对行内元素是可以的。

这里想说的是打印机制对行内元素是不做分页的，比如

灭自己志气，长别人威风

再做东西的时候，一直想着借助百度，来完成自己的事情，完全相信度娘的威严，知识的广博，不过这是固然存在的事实，百度能帮助我解决很多问题，但是，作为一名专业开发人员，研究人员，不能把自己的思考的能力寄托在百度上面，这样会像无根的野草，到处飘，没有依据。因此，从这一点给自己的教训，就是要系统学习前端知识，把前端涉及的所有的理论都要夯实一下，这样，从原理理解前端，从大局方面掌握开发。

一句话，学习让你成就自己。

page-break-before: auto;ff与ie打印结果都是要分开

page-break-before: right;

page-break-before: left; ie

page-break-after:auto/always/right;ie

page-break-inside:

auto：

如果需要，在当前 对象内部插入页分割符

avoid：

避免在当前 对象内部插入页分割符