The Page-break-before and Page-break-after CSS properties do not modify the display of the page on the screen, and these properties are used to control how the file is printed. Each print property can have 4 sets of settings: Auto, always, left, and right. Where auto is the default value, you only need to set the paging symbol (page breaks) if necessary. If Page-break-before is set to always, the printer restarts a new printed page when a particular component is encountered. If Page-break-before is set to left, a paging symbol is inserted until the specified component appears on a blank page on the right. Page-break-before if set to right, the page symbol is inserted until the specified component appears on a blank page on the left. The Page-break-after property adds the paging symbol to the specified component, not before. You will be able to see the settings for these properties in the following programs.
The above is the result of Baidu came out
The red section, encountered a specific component the printer will restart the new printed page
What does this specific component refer to?
What's the difference between the two?
<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 STY Le= "Page-break-before:right" >this is the fifth div.</div> <div style= "Page-break-after:right" >This The sixth div.</div> <div>this is the last div.</div> </BODY> </HTML>
The following section of the code is too, with the IE7 print preview inside the effect is the same
Before is to insert a page break in front of the box model
After is in the back.
You can use 1.html
<style>h2{page-break-after:always;} </style>1
and 2.html
<style>h2{page-break-before:always;} </style>1
Test to see that the printing effect is different.
The most intuitive is to use examples to understand.
Note that the CSS defines whether the newline is inserted in front of the H2 or inserted behind the H2
CSS or do it yourself try to see the effect.