1. 杂志式布局
Magazine-Like Layout
wenjuli(李⽂文举)

7. 突破矩形

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

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

10. 概念
• Region：⼀一个块容器，从属⼀一个相关地命名流
• Region chain：与命名流相关联的区域的序列
• named flow：定义内容在区块间流动的顺序，命名
流中的内容顺序与区块在⽂文档中的顺序⼀一致。
• Regions flow breaking rules

11. 布局与内容分离

12. named flow
region

13. Note
• CSS Regions独⽴立于布局
flexbox layout, grid layout, multi-column layout…
• CSS Regions不必是元素
pseudo-elements, @slot rule
只要设置了flow-from属性即可

14. CSS Shapes
超越矩形
⽂文本在任意形状内或外折⾏行

15. 概念
• 控制⼀一个元素浮动区域(float area)的⼏几何形状
• 仅作⽤用于浮动元素
• 元素本⾝身要有尺⼨寸：建⽴立坐标系

16. • shape-outside：内容环绕在形状外 (Level 1)
• shape-inside：内容包裹在形状内（Level 2）

17. box model and float
behavior
• 使⽤用shape定义周围内容环绕浮动元素的边界，浮动
元素的实际盒模型(box model)不会变化，层级关系
也不受影响。
• shape受限于浮动元素的margin box⼤大⼩小，超出裁
切。即shape只能减少浮动区域，不会增⼤大浮动区
域。

18. 语法
shape-outside:
none | [ <basic-shape> || <shape-box> ] | <image>
inset()
circle()
ellipse()
polygon()
margin-box
border-box
padding-box
content-box

19. shape-margin
.float {
shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px);
shape-margin: 10px;
}
此处有坑
margin:10px; //shape受限于浮动元素的margin box⼤大⼩小，超出裁切

20. 应⽤用实例 - 圆形
circle() = circle( [<shape-radius>]? [at <position>]? )]
!
<shape-radius>
• ⻓长度单位（px, pt, em, 百分⽐比等）
• 关键词：closest-side(默认) / furthest-side
!

22. 应⽤用实例 - 圆⾓角矩形
inset()= inset( <shape-arg>{1,4} [round <border-radius>]? )

23. 应⽤用实例 - 多边形

24. Note
shape值不影响图⽚片的形状，只影响float area的形状
!
设置shape-margin时，⼀一定要设置对应的margin值，否则⽆无法显式

25. 使⽤用图⽚片定义形状

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

27. ⼯工具

28. CSS Exclusion
• 内容流环绕在元素的排他区域(exclusion area)外部
• Exclusion box:定义了排他区域的box，浮动元素除外
• Exclusion area:等于border box
• Exclusion element

29. IE10+ ONLY

30. 未完待续
To be continued