一、分页

CSS提供了两种属性用于插入分页符：page-break-before和page-break-after。它们的默认值为：auto，此时浏览器会使用默认算法决定分页的位置。如果设置为always，则会在该元素前面或后面插入分页符。

<h3>第一页内容</h3>
<div style="page-break-after:always"></div>
<h3>第二页内容</h3>
<div style="page-break-before:always"></div>
<h3>第三页内容</h3>

在打印时可以看到分页效果（测试时发现此属性设置在<span>元素上不会分页）。

二、定位模型

1、分类

  • 静态定位模型(static)

对内联、内联块状、块状、表格盒模型进行定位

  • 绝对定位模型(absolute)

对绝对盒模型(任何元素)进行定位

  • 固定定位模型(fixed)

对绝对盒模型(任何元素)进行定位

  • 浮动定位模型(float)

对浮动盒模型(任何元素)进行定位

  • 相对定位模型(relative)

对绝对盒模型外的任何盒模型定位

  • 相对浮动定位模型(relative-float)

对浮动盒模型进行相对定位

2、定位属性

定位模型采用display、width、height、margin来定位

绝对和固定定位还需要使用left、right、top、bottom、z-index控制盒模型的摆放

浮动定位也还需使用float和clear这两个属性

三、定位

1、position

  • static

static是position的默认值，不对元素进行定位，按元素的排列顺序解析

  • relative

对元素从排列顺序的当前位置进行偏移。

为了控制在正常排列位置上的堆叠顺序，可以用position:relative对它采用相对定位，使用z-index来设置它相对其他定位元素的堆叠顺序。

  • absolute

对元素从排列顺序的当前位置或依照定位最近的祖先元素进行偏移。

如果width和height设置为百分比，那么它的宽高就是相对于定位最近的盒模型。

  • fixed

对元素参照视窗进行偏移

当元素被设置了position:relative、position:absolute或position:fixed属性后，就算是被“定位”了；浮动元素可以使用position:relative来定位。

2、定位最近的祖先元素

定位一个元素，之后就能相对这个元素来定位其他元素，这个元素相对于它的后代元素而言，就是定位最近的祖先元素。

当一个定位元素没有定位最近的祖先元素时，<body>就是它的定位祖先。

把定位元素相对它们的定位最近的祖先元素进行排列的主要目的是创建自含式布局，当对自含式布局重新定位时，它的后代元素也会随着它而移动。

position:relative是一种创建定位祖先元素的好方法，因为它不会把元素从排列顺序中移除。

四、堆叠环境

  • z-index

z-index的默认值为auto，它的值不必连续；负z-index值的定位元素放在静态元素和非定位浮动元素的下面。

当z-index被设置为auto或把z-index设置给非定位元素时，不会产生堆叠环境。(即z-index不能应用到静态定位元素和浮动元素，可以使用position:relative对浮动元素的堆叠顺序和偏移进行控制)

每种局部堆叠环境都被赋予了一个内部的堆叠等级：0，其后代元素的堆叠都是相对于它的。z-index不是全局的，它是相对于被设置了z-index的定位最近的祖先元素而言的。<html>创建了根堆叠环境。

  • 原子化

原子化是指同一个块状元素中的内容（文本、内联元素）应该被作为一个整体和块状元素（边框、背景）一起解析。

定位元素是原子化的，堆叠环境要求把定位元素当作不可分割的原子来解析。被设置了overflow:scroll的块状元素也是原子化的。

五、浮动和清除

  • 浮动

可以设置任何元素的float属性值为left或right把元素从正常排列中移除，并把它们放在父元素内边距里侧的左边或右边。
浮动元素的定位层位于块状元素之上，与正常排列顺序中的内联内容是相邻的。浮动不会影响块状盒模型的定位，只会影响它们的内联内容。
浮动元素不会与其他浮动元素或内联内容重叠（除非浮动元素设置了负的外边距）。

  • 清除

clear属性指定一个元素是在它之前的浮动元素的旁边还是必须向下移动到它之前的浮动元素的下边。
clear:left：元素被向下移动以清除之前的左浮动。
clear:right：元素被向下移动以清除之前的右浮动。
clear:both： 元素被向下移动以清除之前的左右浮动。

clear适用于浮动和非浮动元素，可应于块状、表格和浮动盒模型，它对内联元素、绝对定位元素和固定定位元素不起作用。

六、相对浮动

可以使用position:relative对浮动元素进行相对定位。相对浮动保留了元素在原始浮动排列中的位置，只是用left和top将它从原来的位置上做了一定偏移。

可以使用z-index控制它相对于其他浮动元素和定位元素的堆叠顺序。

可以使用margin来调整内联内容相对于浮动元素的位置。

参考资料
  • 精通CSS与HTML设计模式