如何不使用 overflow: hidden 實作 overflow: hidden-有解無憂

一個很有意思的題目，如何不使用 overflow: hidden 實作 overflow: hidden？

CSS 中 overflow 定義當一個元素的內容太大而無法適應塊級格式化背景關系時候該做什么，而 overflow: hidden 則會將超出容器范圍內的內容剪裁，

控制 `overflow: hidden` 的方向

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

有意思，第一個想到的解法當然是在上述黃色背景元素本身之外再套用一層父元素，然后父元素才是實際設定 overflow: hidden 的元素，父元素的范圍就是實際才是控制是否裁剪的范圍，類似這樣：

實際的父元素才是設定了 overflow: hidden 的元素，

當然，如果實際情況就是這么簡單，也沒什么問題，

但是如果元素處于一個復雜的布局流內，那么可能就沒有那么多的空間，讓我們再去包裹一層父容器了：

類似上圖的情況，還是中間黃色元素，要求只有豎直方向超出裁剪，此時，包裹父元素不再那么容易施展，所以，我們需要另辟蹊徑，

利用 `clip-path` 進行裁剪

好的，這會可以進入正文了，CSS 中，除了 overflow: hidden，還是有其它屬性也可以實作超出容器區域進行裁剪的，clip-path 便是其中翹楚，

使用 clip-path，我們可以方便的控制任意方向上的裁剪，上述的需求則可以這樣解決：

<div >
    <div ></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 切割掉多余部分

最后

好了，本文到此結束，希望對你有幫助 :)

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

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/247129.html

標籤：其他

上一篇：vue-基礎語法和組件化開發

下一篇：CSS高級樣式

如何不使用 overflow: hidden 實作 overflow: hidden

控制 overflow: hidden 的方向

利用 clip-path 進行裁剪