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

心已赠人 2021-06-26 16:06 489阅读 0赞

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

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

## 属性 ##

`CSS`排斥模块引入了一些新的属性和值，它们是：

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

## 浏览器支持 ##

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

![can i use css exclusions][]  
[红色的海洋延伸至右边。。][Link 1]

为更好地理解CSS排斥是如何工作的，我们准备好了一个简单的开始页面，它包含几行文字和后面的一张人物图片。  
![在这里插入图片描述][20190830175829219.png]  
没用CSS排斥的布局

这是网页上非常常见的一种模式，所以我们看一看是否能用CSS排斥将其装饰一番。假设你的浏览器支持排斥，我们要追求如下效果：  
![在这里插入图片描述][20190830180121381.png]  
使用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;
    }

作用于我们的页面，应该会看到如下效果：  
![在这里插入图片描述][201908301810129.png]  
内容流动到图片的左边  
`end`值，正如其名，它会起到相反的作用，让文字内容围绕到排斥区域的结束处。

.avatar { 
       -ms-wrap-flow: end;
    }

于是得到如下效果：  
![在这里插入图片描述][20190830181045600.png]  
在右边围绕

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

对于日文，如果是由上至下书写，则内容的环绕开始于顶部，结束于底部。  
![在这里插入图片描述][20190830181110262.png]  
对于不同书写方向的内容流。图片来自于`W3C`。  
第三种可接受的值是`maximum`。

.avatar { 
       -ms-wrap-flow: maximum;
    }

它会让内容出现于排斥区域在容器区域内空白最大的地方。  
![在这里插入图片描述][20190830182005297.png]  
`minimum`值则相反。

.avatar { 
       -ms-wrap-flow: minimum;
    }

这里，内容会流过排斥区域周围最窄的空间处。  
![在这里插入图片描述][20190830181818790.png]  
最后一个值是`clear`。

.avatar { 
       -ms-wrap-flow: clear;
    }

这和你从浮动体那里学到的那个`clear`非常相似，因为它会清除排斥区域的左边和右边内容。因而，它只允许内容流动到排斥区域的顶部和底部。  
![在这里插入图片描述][20190830181747704.png]

## 排斥边距 ##

和`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.
    }

一旦设置了这个属性，我们可以看到排斥区域周围的空白变多了。  
![在这里插入图片描述][20190830181655424.png]

## `@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`团队再加把劲吧！

[can i use css exclusions]: /images/20210626/d8f4321d878549dd8eb02b6fd32e749f.png
[Link 1]: https://caniuse.com/#feat=css-exclusions
[20190830175829219.png]: /images/20210626/789066344e3d4c9d80bb258d17e61f84.png
[20190830180121381.png]: /images/20210626/d27abf9843aa4da7b5d5838bbd0023f6.png
[201908301810129.png]: /images/20210626/50b6ab363bdd4ba188caf05beb95e087.png
[20190830181045600.png]: /images/20210626/a8aff8caed7e4ad993ac9afca5876757.png
[20190830181110262.png]: /images/20210626/9afb98a3156e45419e565e8631142b71.png
[20190830182005297.png]: /images/20210626/61e0c3c2ef55439eaab1b35ef82220d1.png
[20190830181818790.png]: /images/20210626/837c426df11843078e09bc4b929452bb.png
[20190830181747704.png]: /images/20210626/6719aca757534722a2f21ba610627c24.png
[20190830181655424.png]: /images/20210626/fe7a2e848a4c44808ad8d1d4fa3e884e.png