如何不使用 overflow: hidden 實現 overflow: hidden？

時間 2021-01-13

標籤 css 前端 git github web 瀏覽器佈局網站 google spa 欄目 CSS 简体版

原文原文鏈接

一個頗有意思的題目。如何不使用 overflow: hidden 實現 overflow: hidden？css

CSS 中 overflow 定義當一個元素的內容太大而沒法適應塊級格式化上下文時候該作什麼。而 overflow: hidden 則會將超出容器範圍內的內容剪裁。前端

控制 `overflow: hidden` 的方向

這源自一個實際的需求，在某個需求當中，要求容器內的內容，在豎直方向上超出容器會被裁剪，而在水平方向上超出容器，則不會被裁剪。相似這樣：git

有意思，第一個想到的解法固然是在上述黃色背景元素自己以外再套用一層父元素，而後父元素纔是實際設置 overflow: hidden 的元素，父元素的範圍就是實際纔是控制是否裁剪的範圍。相似這樣：github

實際的父元素纔是設置了 overflow: hidden 的元素。web

固然，若是實際狀況就是這麼簡單，也沒什麼問題。瀏覽器

可是若是元素處於一個複雜的佈局流內，那麼可能就沒有那麼多的空間，讓咱們再去包裹一層父容器了：佈局

相似上圖的狀況，仍是中間黃色元素，要求只有豎直方向超出裁剪。此時，包裹父元素再也不那麼容易施展。因此，咱們須要另闢蹊徑。網站

利用 `clip-path` 進行裁剪

好的，這會能夠進入正文了。CSS 中，除了 overflow: hidden，仍是有其它屬性也能夠實現超出容器區域進行裁剪的。clip-path 即是其中翹楚。google

使用 clip-path，咱們能夠方便的控制任意方向上的裁剪。上述的需求則能夠這樣解決：spa

<div class="g-container">
    <div class="sub"></div>
</div>

關鍵的 CSS 代碼以下：

.g-container {
    width: 200px;
    height: 200px;
    clip-path: polygon(-1000% 0, 1000% 0, 1000% 100%, -1000% 100%);
}

這裏利用了 clip-path: polygon() 來裁剪一個矩形區域，而利用了 clip-path 支持負座標的特色，將裁剪的起點定到遠離座標能畫成一個大矩形的形狀。示意圖：

這樣，咱們可以在正常佈局流中，當前容器大小範圍內，畫出任意但願 overflow: hidden 的範圍。

你能夠點進 Demo 裏面嘗試下：

CodePen -- Clip-path overflow

再舉兩個例子：

{
    // 裁剪出左右兩邊都 overflow:hidden，上下不 overflow:hidden 的區域
    clip-path: polygon(0 -1000% ,100% -1000%, 100% 1100%,0 1100%);

   // 裁剪出左邊、上邊、右邊都 overflow:hidden，下邊不 overflow: hidden 的區域
    clip-path: polygon(100% 0，100% 1000%, 0 1000%, 0 0);
}

固然，上述代碼中的 1000% 是很是靈活的，本身控制，夠用就行。

非 overflow、clip-path 的裁剪方式

那麼。經過上面的一個小例子，咱們知道了 overflow，clip-path 能夠裁剪區域。那麼除了這兩個，CSS 中還有沒有能夠進行區域裁剪的元素呢？

有，還有一個有意思的元素，就是 -- contain 。

contain 屬性容許咱們指定特定的 DOM 元素和它的子元素，讓它們可以獨立於整個 DOM 樹結構以外。目的是可以讓瀏覽器有能力只對部分元素進行重繪、重排，而沒必要每次都針對整個頁面。

這裏不具體去介紹它的每一個屬性，感興趣的能夠翻看下這篇文章 -- CSS新特性contain，控制頁面的重繪與重排

`contain: paint` 進行內容裁剪

詳細說說 contain: paint，設定了 contain: paint 的元素便是開啓了佈局限制，也就是說，此元素的子元素不會在此元素的邊界以外被展現。

contain: paint 屬性產生的目的，便是爲加快頁面的渲染，在非必要區域，不渲染元素。所以，若是元素不在屏幕上或以其餘方式設定爲不可見，則其後代不可見不被渲染。

.g-container {
    contain: paint;
}

看看示例：

CodePen Demo -- contain: paint Demo

`contain: paint` 的反作用

contain: paint 的本意是用於提高頁面的渲染，裁剪到容器以外的元素不進行渲染。可是使用它會產生一些反作用：

它會生成一個本身的新的堆疊上下文(It becomes a stacking context)，也就是說，它會改變它的子元素的 absolute 定位和 fixed 定位的基準；
它會成爲新的格式化上下文(It becomes a new formatting context)，也就是說，這意味着元素外部的佈局不會再影響它的子元素；

更具體的，能夠看看這篇文章 -- CSS Containment in Chrome 52

咱們解釋下第一點，很是的有意思，它會生成一個本身的新的堆疊上下文，也就是說，它將改變 position: fixed 元素的基準，它會使得設置了 position: fixed 的元素再也不相對於視口進行定位，而是相對於該元素進行定位。也就是退化成了 position: absolute。

固然，這個不是本文的重點，我提供了一個 Demo -- contain: paint create a stacking context，這裏就不繼續展開。

總結一下

到此，本文提供了 3 種能夠實現超出容器範圍裁剪的方法：

overflow: hidden
clip-path 繪製裁切區域
contain: paint 不繪製元素範圍外的內容

這裏再提供下 3 個示例的 Demo：CodePen Demo -- Overflow Hidden In CSS

固然，它們之間仍是有一些差別：

overflow: hidden 和 contain: paint 會建立一個 BFC，而clip-path不會，它只是單純的裁剪
兼容性間的差別

因此也就是說，CSS 不只僅只有 overflow: hidden 實現 overflow: hidden，不少狀況，能夠靈活使用。

牛刀小試

再來個有意思的環節，在一行 CSS 代碼的魅力中，提到了 CSS Battle 。

這個網站是核心玩法就是：官方給出一張圖形，在給定的 400 x 300 的畫布上，可以用越短的代碼實現它，分數就越高。

上次講了一題經過一行 CSS 代碼實現，今天，咱們再來看看第二題：

怎麼用最短的代碼實現它呢？想一想今天說的 clip-path。

首先，咱們利用這一一段代碼，生成這樣一個圖形：

<style>
body {
    margin: 0 50px;
    background: #62374e;
    border: 50px dashed #fdc57b;
}

而後，利用 clip-path，把上下兩部分裁掉便可。

<style>
body {
    margin: 0 50px;
    background: #62374e;
    border: 50px dashed #fdc57b;
  + clip-path: polygon(0 50px, 100% 50px, 100% 250px, 0 250px);
}

這樣就完美實現啦。固然，如今字符數有點多，有 158 個字符這麼多。其實對於裁剪矩形區域，clip-path 有更便捷的語法，上述 clip-path:polygon(0 50px, 100% 50px, 100% 250px, 0 250px) 能夠替換成 clip-path:inset(50px 0)，減小了 20 個字符。

固然，再暴力一點，咱們也能夠一行實現：

<body bgcolor=62374e style=margin:0+50;border:dashed+50px#fdc57b;clip-path:inset(50px+0>

固然，這裏可能用了一些這個網站才容許的語法，不過核心實現仍是在於用 clip-path 切割掉多餘部分

最後

好了，本文到此結束，但願對你有幫助 :)，想 Get 到最有意思的 CSS 資訊，千萬不要錯過個人公衆號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

如何不使用 overflow: hidden 實現 overflow: hidden？

控制 overflow: hidden 的方向

利用 clip-path 進行裁剪