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 (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-。

can i use css exclusions
紅色的海洋延伸至右邊..

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

沒用CSS排斥的佈局

這是網頁上非常常見的一種模式,所以我們看一看是否能用CSS排斥將其裝飾一番。假設你的瀏覽器支持排斥,我們要追求如下效果:

使用CSS排斥

首先,讓我們將內容安排成兩列,並將人物圖片放到中間。你如何編排並不要緊,比如你可以用CSS Flexbox,CSS網格或“傳統的”使用float屬性的方法。

看起來不錯,分列的文字(對於本示例來說不是必須的)

我們從上述圖片中可看出,人物圖片已經從文件流中移除了,它被放在了內容的頂部,變得模糊了一些。使用CSS排斥,我們可強製文字內容環繞這張人物圖片。

為實現這一點,我們要設置头像图片的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.