杂志式布局 Magazine-Like Layout

wenjuli(李⽂文举)

突破矩形

CSS Regions内容在多个容器内流动

• A为⼀一张图⽚片，且不在⽂文章内(如⼲⼴广告图) • ⽂文章内容在1,2,3,4区块内流动 • 区块2为两栏布局 • 区块4⾃自动调节⼤大⼩小来渲染⽂文章剩余内容

概念

• Region：⼀一个块容器，从属⼀一个相关地命名流

• Region chain：与命名流相关联的区域的序列

• named flow：定义内容在区块间流动的顺序，命名流中的内容顺序与区块在⽂文档中的顺序⼀一致。

• Regions flow breaking rules

布局与内容分离

named flow

region

Note

• CSS Regions独⽴立于布局 flexbox layout, grid layout, multi-column layout…

• CSS Regions不必是元素pseudo-elements, @slot rule 只要设置了flow-from属性即可

CSS Shapes超越矩形

⽂文本在任意形状内或外折⾏行

概念

• 控制⼀一个元素浮动区域(float area)的⼏几何形状

• 仅作⽤用于浮动元素

• 元素本⾝身要有尺⼨寸：建⽴立坐标系

• shape-outside：内容环绕在形状外 (Level 1)

• shape-inside：内容包裹在形状内（Level 2）

box model and float behavior

• 使⽤用shape定义周围内容环绕浮动元素的边界，浮动元素的实际盒模型(box model)不会变化，层级关系也不受影响。

• shape受限于浮动元素的margin box⼤大⼩小，超出裁切。即shape只能减少浮动区域，不会增⼤大浮动区域。

语法shape-outside:

none | [ <basic-shape> || <shape-box> ] | <image>

inset() circle() ellipse()

polygon()

margin-box border-box

padding-box content-box

shape-margin

.float { shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px); shape-margin: 10px; }

此处有坑

margin:10px; //shape受限于浮动元素的margin box⼤大⼩小，超出裁切

应⽤用实例 - 圆形

circle() = circle( [<shape-radius>]? [at <position>]? )] !<shape-radius>

• ⻓长度单位（px, pt, em, 百分⽐比等） • 关键词：closest-side(默认) / furthest-side

!

应⽤用实例 - 圆⾓角矩形

inset()= inset( <shape-arg>{1,4} [round <border-radius>]? )

应⽤用实例 - 多边形

Note

shape值不影响图⽚片的形状，只影响float area的形状 !

设置shape-margin时，⼀一定要设置对应的margin值，否则⽆无法显式

使⽤用图⽚片定义形状

1. 设置图⽚片shape-outside: url(leaf.png);

2. 根据图⽚片的alpha通道阈值抽取和计算shape shape-image-threshold: 0.5; 表⽰示形状包含不透明度⼤大于50%的像素Level2也可以切换到根据亮度计算形状

⼯工具

CSS Exclusion

• 内容流环绕在元素的排他区域(exclusion area)外部

• Exclusion box:定义了排他区域的box，浮动元素除外

• Exclusion area:等于border box

• Exclusion element

IE10+ ONLY

未完待续 To be continued