Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)
在本教程中,我們將探討CSS排斥(排除)。初一看,CSS排斥好像和CSS形狀相似,因為它們都將內容環繞於一個元素。但在技術上,它們的目的是不同的。
CSS形狀模塊定義了一個元素的真實形狀,而內容不會環繞在那個形狀上,除非此元素是浮動的。而CSS排斥模塊卻是專門用於這一目的;它支持嵌入內容環繞於一個元素,而無需浮動,也不管此元素是如何放置的,無論絕對的
,相對的
或固定的
。
屬性
CSS排斥模塊引入了一些新的屬性和值,它們是:
-
wrap-flow
:設置排斥區域,以及內容應該如何環繞。 -
wrap-margin
:顧名思義,設置邊距或環繞排斥區域的偏移量。
瀏覽器支持
值得一提的是,目前CSS排斥只在邊緣,互聯網探索10及以上的版本中得到支持,再一次表現了微軟公司對瀏覽器前沿技術的推動(我們也要感謝他們對CSS網格的開發)。到目前為止,我們必須在使用這個新屬性之前加上前綴-ms-。

為更好地理解CSS排斥是如何工作的,我們準備好了一個簡單的開始頁面,它包含幾行文字和後面的一張人物圖片。

這是網頁上非常常見的一種模式,所以我們看一看是否能用CSS排斥將其裝飾一番。假設你的瀏覽器支持排斥,我們要追求如下效果:
使用CSS排斥
首先,讓我們將內容安排成兩列,並將人物圖片放到中間。你如何編排並不要緊,比如你可以用CSS Flexbox,CSS網格或“傳統的”使用float
屬性的方法。

我們從上述圖片中可看出,人物圖片已經從文件流中移除了,它被放在了內容的頂部,變得模糊了一些。使用CSS排斥,我們可強製文字內容環繞這張人物圖片。
為實現這一點,我們要設置头像图片的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)是由內容的書寫方向決定的。如果文字是從右至左書寫的,比如阿拉伯文和希伯來文,則內容的環繞開始於排斥區域的右邊,結束於排斥區域的左邊。
對於日文,如果是由上至下書寫,則內容的環繞開始於頂部,結束於底部。

第三種可接受的值是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團隊再加把勁吧!
- CSS排斥模塊第一級
- Rache Andrew所寫的CSS排斥和網格佈局
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post