CSS Exclusions:让布局变得更有意思

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

最早接触到CSS Exclusions名词是在2013年@Peter Gasston写的《The future of CSS layouts》(译文点击这里)。至于“Exclusions”译成中文不知道使用什么词更为合适,文章下面暂且直接使用英文,或许更好些。

CSS Exclusions是什么?

CSS Exclusions是什么?如果读过前面这篇文章可以简单的知道他是Web布局模块特性之一。在W3C规范文档中是这样描述的:

This specification defines features that allow inline flow content to wrap around outside the exclusion area of elements.

布局的局限性

在CSS2.1时代,众所周知,Web的布局局限性非常的大,只能实现矩形方式布局,如果要实现一些流线的布局,比如说类似于杂志排版风格的布局,那是非常痛苦的,甚至是不太现实的。

虽然以前的布局在这方面局限性非常的大,但技术是不断向前发展的。早前很多同行专家就在这方面不断进行革新,才有了一些新的布局特性。比如说CSS ShapesCSS Grid等。

其中CSS Shapes直接打破了Web排版仅限于矩形排版,它可以实现一些流线性的排版,比如下面排版效果:

CSS Shapes

而CSS Grids也让我们的布局变得更为灵活。前关于这方面的介绍可以猛击这里

虽然CSS Shapes可以帮助我们打破矩形这样中规中矩的布局,但它还是需要依赖于浮动。要实现类似下图这样的效果,还是一件蛋疼的事情:

当然,上图的效果并不是没有解决方案,只不过是蛋疼而以,早前就有同学使用伪元素来模拟float:center这样的效果。感兴趣的可以阅读早前分享过的一篇文章《使用CSS伪元素模拟float:center效果》。这种方法也称得上是CSS布局中的黑魔法之一了。

CSS Exclusions特性

前面也简单的说到过,CSS Shapes和CSS Grids让我们的布局变得越来越有意思,也越来越灵活。但在某些场景中,还是存在一定的缺陷,也没有那么灵活,比如说文本围绕图片的布局方式。而今天要说的CSS Exclusions就是致力于解决文本围绕图片(当然也可以是其他的元素)方式。它看上去类似于CSS Shapes,但又和CSS Shapes有很大的区别,它不需要依赖浮动,也不管是否设置了position的值为a

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-exclusions.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部