css重排和重绘_CSS3列和页面可重排内容-CSDN博客

css重排和重绘

当涉及数字形式文字的使用时，传统书籍的信奉者中最主要的抱怨仍然是无法与数字书籍发展有关翻页规定，纸张选择及其颜色，字体和其他特定于书本的物理属性有助于创建。

尽管以数字形式重新创建整个体验（包括刚打开的书的气味从一尘不染的未印刷页面上飘出来的想法）的想法在重新创建过去时可能仍然是完全不切实际且完全无利可图的，但这是体验的一个方面现在可以用最少的精力来重新创建它，为此，所有功劳都归功于CSS3列模块背后的大脑。

CSS3专栏之前

尽管引入columns模块（目前仍是推荐的候选方法）使重新创建传统书籍阅读体验的某些方面变得更加容易，但是依靠JavaScript向导或复杂的服务器端逻辑已经可以实现这一点。我从Google Chrome团队学到的关于浏览器和网络的20件事，为重新创建传统阅读体验的某些元素的概念提供了极具吸引力的证据，尽管它很大程度上依赖于HTML和CSS逻辑。

极有可能，在不依赖CSS3列模块的情况下，实施者将需要生成特定于每个用户操作环境的样式信息，而这样做的决定将完全取决于他们是否愿意创建适合各种尺寸设备的阅读体验。。但是，那是那时，当然现在是。

新时代的曙光

好吧，在我进入一个新时代之前，在这个新时代中，页面中数字内容的呈现不会要求JavaScript向导或某些服务器端PHP的精通，因此，不熟悉它的人可能会喜欢CSS3专栏的入门。

CSS3列

与某些更受关注和视觉上令人眼花CSS乱CSS3功能（例如过渡和动画）的基本思想可能需要一些重点研究不同，使用CSS3的基于列的演示需要最少的学习和实现时间。最简单的说，CSS作者需要声明他或她希望将容器的内容拆分为的列数，然后浏览器将在此完成其余的工作。

#ThreeCols        
/* If you're planning to have more containers than just one with three columns, 
   then declare it a class. */

{

    -webkit-column-count:        3;

    -moz-column-count:           3;

    column-count:                3;   

/* Currently, only Opera supports column-specific properties without prefixes. */

}

<div id = 'ThreeCols'>

    <p>

        Insert Content Here.

    </p>

    <p>

        Insert Content Here.

    </p>

    <p>

        Insert Content Here.

    </p>

</div>

只需使用这么多的代码，您就可以将容器的内容分为三列（未指定时，容器的高度由将内容平衡为指定的列数来确定）。如果发生溢出（当容器具有声明的高度时会发生），则溢出内容将被分配到宽度等于前三列宽度的列中，并且这些列将沿着内联轴生成，如果是英文，则成为x轴。

通过更改column-count的值（相应地加上前缀），您应该能够将内容划分为任意数量的列。但是，仅指定了列数，而没有其他可用的处理指令，浏览器将尝试在指定的列数中平衡容器内容的分布-本质上是高度或数量。

为了覆盖跨列的默认内容分发策略，您将需要在容器元素上显式设置column-fill属性。

/*

    In addition to the previously included values, add the following

    to control the distribution of content across columns.

*/

#ThreeCols

{

    -webkit-column-fill:    auto; /* Status undefined: undocumented */

    -moz-column-fill:       auto;

    column-fill:            auto;

}

相应地使用前缀，因为基于列的设计仍然是候选建议。 column-fill属性的默认值是balance，这要求UA应尝试最小化列长的变化。将column-fill值设置为auto ，需要用户代理按顺序填充列，这意味着可以部分填充和清空列。当使用auto column-fill ，您需要牢记以下几个细节：

仅当容器具有指定的高度时，才查询column-fill属性。在未指定高度的情况下，UA将始终尝试平衡列的高度，而实际上忽略了column-fill的指定值。
请记住，目前，当涉及以指定高度在容器中进行基于列的内容分发时，除Opera以外的所有浏览器的默认行为均不符合CR的要求。

让我们继续扩大和更好地使用基于列的设计。

CSS列和页面内容

将column-count设置为1或将column-width设置为容器元素的最大宽度会指示浏览器生成一个等于容器宽度的单列，这意味着所有溢出的内容将沿着x轴或内联轴。从理论上讲，通过使用上述两个具有指定值的属性之一，CSS作者应该能够创建页面错觉，其中内容分为与容器的高度和宽度相等的部分。

对于Firefox和Opera，将column-count设置为1，并将容器具有指定的高度，浏览器将生成一个单列，其宽度足以占据父元素的整个空间，这意味着分页布局效果可以无需显式指定column-width的值即可实现。但是，基于Webkit的浏览器（Safari，Chrome和现在的Opera）无法按列分发内容。

伪算法明确表明，如果column-width或column-count具有除auto之外的指定值，则必须将容器元素视为多列元素，因此当前基于Webkit的浏览器的行为不符合的要求。候选人的建议。

除了浏览器特定的问题之外，为了使其能够在大多数现代浏览器（Chrome，Firefox，Opera和Safari）中运行，您需要将容器上的column-width属性的值设置为等于容器的宽度（百分比值不起作用；容器宽度和column-width宽的精确像素值或em值当前可产生所需的结果）。

考虑到这些问题，以下代码应包含最简单的容器级别CSS定义，以产生页面错觉（请注意，它需要JavaScript才能起作用）：

#Paged

{

    width:        80%;

    height:       100%;

    margin:       0 auto;
 
    -moz-column-count: 1

    column-count:      1;

    /* Will not work in webkit based browsers, so no need to add another declaration. */

}

从理论上讲，上述CSS声明应将容器的内容分配到各列中，每列的宽度等于id设置为Paged的容器块的宽度。但是，尽管其目的是完整的，但是为了使其能够在浏览器（尤其是基于Webkit的浏览器）中运行，您将需要使用以下容器级声明：

#Paged

{

    width:             1050px;   /* or any value of your liking but still an exact value. */

    height:            100%;

    margin:            0 auto;   /* Centered content. */
 
    column-width:      1050px;   /* Prefix accordingly, as this should work in most of the 
                                 modern browsers. */

}

如果必须使用基于百分比的流体设计，则始终可以依靠某些JavaScript和window.innerWidth查找实际宽度，并在DOMContentLoaded触发后在容器元素上设置计算值。