html style position HTML DOM Style pageBreakBefore 属性

2023-03-17 19:18

html style position

HTML style position 是一种用于定位 HTML 元素的方法，它可以让你控制元素在页面中的位置。它有三个属性：static、relative 和 absolute。

static：这是默认值，元素按正常文档流排列。
relative：元素相对于其正常位置进行定位。
absolute：元素相对于最近的已定位的父元素进行定位。

使用 HTML style position 可以让我们更加准确地控制 HTML 元素的位置，而不必依赖文档流来决定元素的显示方式。例如，我们可以使用 relative 来将一个 div 相对于原来的位置上下左右偏移一定量；或者使用 absolute 来将一个 div 绝对定位到页面中的特定区域。

此外，HTML style position 还可以用来创建复杂的布局效果。例如，我们可以使用 relative 和 absolute 来将多个 div 组合在一起形成一个复杂的布局效果。

总之，HTML style position 是一个强大而有效的工具，能够帮助我们准确地控制 HTML 元素在页面中的显示方式。通过使用不同的 position 属性和相应参数，我们可以很方便地创建出各式各样、复杂而有趣的布局效果。

HTML DOM Style pageBreakBefore 属性

Style pageBreakBefore 属性

Style 对象

定义和用法

pageBreakBefore 属性设置或返回元素前的分页行为（用于打印或打印预览）。

注意：pageBreakBefore 属性不会影响绝对定位元素。

语法

设置 pageBreakBefore 属性：

返回 pageBreakBefore 属性：

Object.style.pageBreakBefore

值	描述
auto	默认。如果必要则在元素前插入分页符。
always	总是在元素前插入分页符。
avoid	避免在元素前插入分页符。
"" (empty string)	在元素前不插入分页符。
left	在元素前插入一个或两个分页符，一直到一张空白的左页为止。
right	在元素前插入一个或两个分页符，一直到一张空白的右页为止。
inherit	pageBreakBefore 属性的值从父元素继承。

浏览器支持

所有主要浏览器都支持 pageBreakBefore 属性。

注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有规定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。

实例

始终在每个 id="footer" 的 <p> 元素前设置分页符：

<html>
<head>
<script>
function setPageBreak()
{
document.getElementById("footer").style.pageBreakBefore="always";
}
</script>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p id="footer">This is a footer paragraph.</p>
<button type="button" onclick="setPageBreak()">Set page-break before footer paragraph</button>
<p>Click the button above and see the changes in print or print preview.</p>

</body>
</html>

Style 对象

阅读全文

文章详情

html style position HTML DOM Style pageBreakBefore 属性