全方位了解CSS3的Regions扩展

2024-07-11 08:55:43

字体：大中小

来源：转载

供稿：网友

这是一个adobe的提议：css Regions，提供在多个不同元素中排布内容的方法。首先需要为内容容器声明一个flow属性独一无二的字符值，然后通过from（）函数和内容的属性确定内容将会在哪些元素内排布：
1. .content { flow: foo; }
2. .target1, .target2 { content: from(foo); }
首先将内容容器中的内容放置到第一个元素target1中，如果有溢出，就将溢出的部分放在target2中显示。说得更明白一点，她不是在另一个target中重复内容，而是继续在第二个target中显示1中没有完全显示的内容。请看下面的例子：
201587200906691.png (615×278)

region布局效果
随便说一下，两个目标区域不需要在DOM或者布局中相邻，如果需要的话，她们完全可以是同一个页面的两个毫不相干的人或者仇人（但是这样的话会带来可及性问题）。
Regions和Exclusions一样还不被任何浏览器支持，但是你可以从adobe的实验室中下载它，亲自试一试。

现在，让我们了解这个扩展吧，他们可以被分为4类:

    线性内容(Threading content): 从一个区域“流向”另一个区域的内容。
    任意形状的容器(Arbitrarily shaped containers): 在非矩形区域内显示文本。
    任意形状环绕(Arbitrarily shaped exclusion): 文本环绕非矩形区域。
    区域样式(Region styling):根据流向区域显示内容。

下面是各种分类的例子：
内容流(Content flow)

在典型的HTML文档中，文字可以在多个区域显示，但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本，或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时，这可能会无法乱掉。这个方法(css3 region)同样是的拥有在缩放窗口是自适应的流体布局成为可能，或者，当显示在平板上时，自适应竖屏(portrait)或者横屏(landscape)显示。
201587201239406.jpg (463×271)