在本教程中,我们将探讨CSS排斥 (Exclusions
)。初一看,CSS
排斥好像和CSS
形状相似,因为它们都是将内容环绕于一个元素。但在技术上,它们的目的是不同的。
CSS
形状模块定义了一个元素的真实形状,而内容不会环绕在那个形状上,除非此元素是浮动的。而CSS
排斥模块却是专门用于这一目的;它支持嵌入内容环绕于一个元素,而无需浮动,也不管此元素是如何放置的,无论absolute, relative
或fixed
。
属性
CSS
排斥模块引入了一些新的属性和值,它们是:
wrap-flow
:设置排斥区域,以及内容应该如何环绕。wrap-margin
:顾名思义,设置边距或环绕排斥区域的偏移量。
浏览器支持
值得一提的是,目前CSS
排斥只在Edge
,Internet Explore 10
及以上的版本中得到支持,再一次表现了微软公司对浏览器前沿技术的推动(我们也要感谢他们对于CSS
网格(Grid
)的开发)。到目前为止,我们必须在使用这个新属性之前加上前缀-ms-
。
为更好地理解CSS排斥是如何工作的,我们准备好了一个简单的开始页面,它包含几行文字和后面的一张人物图片。
没用CSS排斥的布局
这是网页上非常常见的一种模式,所以我们看一看是否能用CSS排斥将其装饰一番。假设你的浏览器支持排斥,我们要追求如下效果:
使用CSS排斥
首先,让我们将内容安排成两列,并将人物图片放到中间。你如何编排并不要紧,比如你可以用CSS Flexbox
,CSS网格,或"传统的"使用float
属性的方法。
看起来不错,分列的文字(对于本示例来说不是必须的)
我们从上述图片中可看出,人物图片已经从文件流中移除了,它被放在了内容的顶部,变得模糊了一些。使用CSS
排斥,我们可强制文字内容环绕这张人物图片。
为实现这一点,我们要设置图片(avatar
)的wrap-flow
属性,将其值设置为both
。
.avatar {
-ms-wrap-flow: both; // Works in IE and Edge.
wrap-flow: both; // Does't not work in any browser.
}
wrap-flow
属性将.avatar
设置为一个"排斥区域”;这是一个文字内容不能穿过的区域。你在下图中可以看到,文字内容被挤到了图片的左边和右边。
可能的值
其它可接受的值还有:start,end,maximum,minimum
和clear
。
第一个值,start
,使得文字环绕在排斥区域的开始位置,但让区域的结束处后面变为空白。
.avatar {
-ms-wrap-flow: start;
}
作用于我们的页面,应该会看到如下效果:
内容流动到图片的左边
end
值,正如其名,它会起到相反的作用,让文字内容围绕到排斥区域的结束处。
.avatar {
-ms-wrap-flow: end;
}
于是得到如下效果:
在右边围绕
注意:排斥区域的开始(start
)和结束(end
)是由内容的书写方向决定的。如果文字是从右至左书写的,比如阿拉伯文和希伯来文,则内容的环绕开始于排斥区域的右边,结束于排斥区域的左边。
对于日文,如果是由上至下书写,则内容的环绕开始于顶部,结束于底部。
对于不同书写方向的内容流。图片来自于W3C
。
第三种可接受的值是maximum
。
.avatar {
-ms-wrap-flow: maximum;
}
它会让内容出现于排斥区域在容器区域内空白最大的地方。
minimum
值则相反。
.avatar {
-ms-wrap-flow: minimum;
}
这里,内容会流过排斥区域周围最窄的空间处。
最后一个值是clear
。
.avatar {
-ms-wrap-flow: clear;
}
这和你从浮动体那里学到的那个clear
非常相似,因为它会清除排斥区域的左边和右边内容。因而,它只允许内容流动到排斥区域的顶部和底部。
排斥边距
和CSS
形状类似,CSS
排斥模块也有一个定义排斥区域边距的属性,称为wrap-margin
。和margin
属性不同,wrap-margin
必须是一个正值。
.avatar {
-ms-wrap-flow: end;
-ms-wrap-margin: -10px; // Invalid.
-ms-wrap-margin: 10px; // Valid.
}
此外,wrap-margin
属性不允许为每一边 (上下左右) 分别设置。这个功能未来是否会出现仍未可知。
.avatar {
-ms-wrap-flow: end;
-ms-wrap-margin: 10px 20px 10px 30px; // Invalid.
-ms-wrap-margin: 10px; // Valid.
}
一旦设置了这个属性,我们可以看到排斥区域周围的空白变多了。
@supports
如果我们将人物图片放到内容上,没有CSS
排斥的支持,将得到一个很糟糕的布局。因而,考虑回退才是明智的,将相关的样式放到一个@supports
规则下,比如:
.site-content .avatar {
width: 180px;
height: 180px;
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 80px;
}
/* wrap the relevant rules in a @supports declaration, just to be safe */
@supports (-ms-wrap-flow: both) {
.site-content .avatar {
position: absolute;
top: 300px;
left: 50%;
margin-left: -90px;
-ms-wrap-margin: 50px;
-ms-wrap-flow: both
}
}
这样,我们的CSS排斥样式将只在支持它的浏览器中起作用。
总结
CSS
排斥,以及CSS
形状和其它先进技术规范,让我们可以在习惯的方式之上探索更多的网站布局。但愿浏览器对它们的支持能够加速,微软Edge
团队再加把劲吧!