Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

CSS排斥:让无聊的布局不那么无聊

by
Difficulty:IntermediateLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Wentao Wang (王文涛) (you can also view the original English article)

在本教程中,我们将探讨CSS排斥 (Exclusions)。初一看,CSS排斥好像和CSS形状相似,因为它们都是将内容环绕于一个元素。但在技术上,它们的目的是不同的。

CSS形状模块定义了一个元素的真实形状,而内容不会环绕在那个形状上,除非此元素是浮动的。而CSS排斥模块却是专门用于这一目的;它支持嵌入内容环绕于一个元素,而无需浮动,也不管此元素是如何放置的,无论absolute, relativefixed

属性

CSS排斥模块引入了一些新的属性和值,它们是:

  • wrap-flow:设置排斥区域,以及内容应该如何环绕。
  • wrap-margin:顾名思义,设置边距或环绕排斥区域的偏移量。

浏览器支持

值得一提的是,目前CSS排斥只在Edge,Internet Explore 10及以上的版本中得到支持,再一次表现了微软公司对浏览器前沿技术的推动(我们也要感谢他们对于CSS网格(Grid)的开发)。到目前为止,我们必须在使用这个新属性之前加上前缀-ms-

can i use css exclusions
红色的海洋延伸至右边。。

为更好地理解CSS排斥是如何工作的,我们准备好了一个简单的开始页面,它包含几行文字和后面的一张人物图片。

没用CSS排斥的布局

这是网页上非常常见的一种模式,所以我们看一看是否能用CSS排斥将其装饰一番。假设你的浏览器支持排斥,我们要追求如下效果:

使用CSS排斥

首先,让我们将内容安排成两列,并将人物图片放到中间。你如何编排并不要紧,比如你可以用CSS Flexbox,CSS网格,或"传统的"使用float属性的方法。

看起来不错,分列的文字(对于本示例来说不是必须的)

我们从上述图片中可看出,人物图片已经从文件流中移除了,它被放在了内容的顶部,变得模糊了一些。使用CSS排斥,我们可强制文字内容环绕这张人物图片。

为实现这一点,我们要设置图片(avatar)的wrap-flow属性,将其值设置为both

wrap-flow属性将.avatar设置为一个"排斥区域”;这是一个文字内容不能穿过的区域。你在下图中可以看到,文字内容被挤到了图片的左边和右边。

可能的值

其它可接受的值还有:startendmaximumminimumclear

第一个值,start,使得文字环绕在排斥区域的开始位置,但让区域的结束处后面变为空白。

作用于我们的页面,应该会看到如下效果:

内容流动到图片的左边

end值,正如其名,它会起到相反的作用,让文字内容围绕到排斥区域的结束处。

于是得到如下效果:

在右边围绕

注意:排斥区域的开始(start)和结束(end)是由内容的书写方向决定的。如果文字是从右至左书写的,比如阿拉伯文和希伯来文,则内容的环绕开始于排斥区域的右边,结束于排斥区域的左边。

对于日文,如果是由上至下书写,则内容的环绕开始于顶部,结束于底部。

对于不同书写方向的内容流。图片来自于W3C

第三种可接受的值是maximum

它会让内容出现于排斥区域在容器区域内空白最大的地方。

minimum值则相反。

这里,内容会流过排斥区域周围最窄的空间处。

最后一个值是clear

这和你从浮动体那里学到的那个clear非常相似,因为它会清除排斥区域的左边和右边内容。因而,它只允许内容流动到排斥区域的顶部和底部。

排斥边距

和CSS形状类似,CSS排斥模块也有一个定义排斥区域边距的属性,称为wrap-margin。和margin属性不同,wrap-margin必须是一个正值。

此外,wrap-margin属性不允许为每一边 (上下左右) 分别设置。这个功能未来是否会出现仍未可知。

一旦设置了这个属性,我们可以看到排斥区域周围的空白变多了。

@supports

如果我们将人物图片放到内容上,没有CSS排斥的支持,将得到一个很糟糕的布局。因而,考虑回退才是明智的,将相关的样式放到一个@supports规则下,比如:

这样,我们的CSS排斥样式将只在支持它的浏览器中起作用。

总结

CSS排斥,以及CSS形状和其它先进技术规范,让我们可以在习惯的方式之上探索更多的网站布局。但愿浏览器对它们的支持能够加速,微软Edge团队再加把劲吧!

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.