這篇文章主要為大家展示了“web開發(fā)中怎么不使用overflow: hidden實(shí)現(xiàn)overflow: hidden”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“web開發(fā)中怎么不使用overflow: hidden實(shí)現(xiàn)overflow: hidden”這篇文章吧。

在五河等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需策劃設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,營銷型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,五河網(wǎng)站建設(shè)費(fèi)用合理。

CSS 中 overflow 定義當(dāng)一個(gè)元素的內(nèi)容太大而無法適應(yīng)塊級格式化上下文時(shí)候該做什么。而 overflow: hidden 則會(huì)將超出容器范圍內(nèi)的內(nèi)容剪裁。

控制 overflow: hidden 的方向

這源自一個(gè)實(shí)際的需求，在某個(gè)需求當(dāng)中，要求容器內(nèi)的內(nèi)容，在豎直方向上超出容器會(huì)被裁剪，而在水平方向上超出容器，則不會(huì)被裁剪。類似這樣：

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

實(shí)際的父元素才是設(shè)置了 overflow: hidden 的元素。

當(dāng)然，如果實(shí)際情況就是這么簡單，也沒什么問題。

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

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

利用 clip-path 進(jìn)行裁剪

好的，這會(huì)可以進(jìn)入正文了。CSS 中，除了 overflow: hidden，還是有其它屬性也可以實(shí)現(xiàn)超出容器區(qū)域進(jìn)行裁剪的。clip-path 便是其中翹楚。

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

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

關(guān)鍵的 CSS 代碼如下：

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

這里利用了 clip-path: polygon() 來裁剪一個(gè)矩形區(qū)域，而利用了 clip-path 支持負(fù)坐標(biāo)的特點(diǎn)，將裁剪的起點(diǎn)定到遠(yuǎn)離坐標(biāo)能畫成一個(gè)大矩形的形狀。示意圖：

這樣，我們能夠在正常布局流中，當(dāng)前容器大小范圍內(nèi)，畫出任意希望 overflow: hidden 的范圍。

你可以點(diǎn)進(jìn) Demo 里面嘗試下：

CodePen -- Clip-path overflow 

鏈接：https://codepen.io/Chokcoco/pen/ZEpRqME

再舉兩個(gè)例子：

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

當(dāng)然，上述代碼中的 1000% 是非常靈活的，自己控制，夠用就行。

非 overflow、clip-path 的裁剪方式

那么。通過上面的一個(gè)小例子，我們知道了 overflow，clip-path 可以裁剪區(qū)域。那么除了這兩個(gè)，CSS 中還有沒有可以進(jìn)行區(qū)域裁剪的元素呢？

有，還有一個(gè)有意思的元素，就是 -- contain 。

contain 屬性允許我們指定特定的 DOM 元素和它的子元素，讓它們能夠獨(dú)立于整個(gè) DOM 樹結(jié)構(gòu)之外。目的是能夠讓瀏覽器有能力只對部分元素進(jìn)行重繪、重排，而不必每次都針對整個(gè)頁面。

contain: paint 進(jìn)行內(nèi)容裁剪

詳細(xì)說說 contain: paint，設(shè)定了 contain: paint 的元素即是開啟了布局限制，也就是說，此元素的子元素不會(huì)在此元素的邊界之外被展示。

contain: paint 屬性產(chǎn)生的目的，即是為加快頁面的渲染，在非必要區(qū)域，不渲染元素。因此，如果元素不在屏幕上或以其他方式設(shè)定為不可見，則其后代不可見不被渲染。

看看示例：

.g-container {      contain: paint;  }

CodePen Demo -- contain: paint Demo 

地址：https://codepen.io/Chokcoco/pen/KKwmgmN

contain: paint 的副作用

contain: paint 的本意是用于提升頁面的渲染，裁剪到容器之外的元素不進(jìn)行渲染。但是使用它會(huì)產(chǎn)生一些副作用：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  它會(huì)生成一個(gè)自己的新的堆疊上下文(It becomes a stacking context)，也就是說，它會(huì)改變它的子元素的 absolute 定位和 fixed 定位的基準(zhǔn)；

3.  它會(huì)成為新的格式化上下文(It becomes a new formatting context)，也就是說，這意味著元素外部的布局不會(huì)再影響它的子元素；

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

地址：https://developers.google.com/web/updates/2016/06/css-containment

我們解釋下第一點(diǎn)，非常的有意思，它會(huì)生成一個(gè)自己的新的堆疊上下文，也就是說，它將改變 position: fixed 元素的基準(zhǔn)，它會(huì)使得設(shè)置了 position: fixed 的元素不再相對于視口進(jìn)行定位，而是相對于該元素進(jìn)行定位。也就是退化成了 position: absolute。

當(dāng)然，這個(gè)不是本文的重點(diǎn)，我提供了一個(gè) Demo，這里就不繼續(xù)展開。

Demo地址：https://codepen.io/Chokcoco/pen/bGwjqep

總結(jié)一下

到此，本文提供了 3 種可以實(shí)現(xiàn)超出容器范圍裁剪的方法：

•  overflow: hidden

•  clip-path 繪制裁切區(qū)域

•  contain: paint 不繪制元素范圍外的內(nèi)容

這里再提供下 3 個(gè)示例的 Demo：CodePen Demo -- Overflow Hidden In CSS

地址：https://codepen.io/Chokcoco/pen/XWjYZGd

當(dāng)然，它們之間還是有一些差異：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  overflow: hidden 和 contain: paint 會(huì)創(chuàng)建一個(gè) BFC，而clip-path不會(huì)，它只是單純的裁剪

3.  兼容性間的差異

所以也就是說，CSS 不僅僅只有 overflow: hidden 實(shí)現(xiàn) overflow: hidden，很多情況，可以靈活使用。

牛刀小試

再來個(gè)有意思的環(huán)節(jié)，在 一行 CSS 代碼的魅力 中，提到了 CSS Battle 。

這個(gè)網(wǎng)站是核心玩法就是：官方給出一張圖形，在給定的 400 x 300 的畫布上，能夠用越短的代碼實(shí)現(xiàn)它，分?jǐn)?shù)就越高。

上次講了一題通過一行 CSS 代碼實(shí)現(xiàn)，今天，我們再來看看第二題：

地址 ：https://cssbattle.dev/play/2

怎么用最短的代碼實(shí)現(xiàn)它呢？想想今天說的 clip-path。

首先，我們利用這一一段代碼，生成這樣一個(gè)圖形：

<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);  }

這樣就完美實(shí)現(xiàn)啦。當(dāng)然，現(xiàn)在字符數(shù)有點(diǎn)多，有 158 個(gè)字符這么多。其實(shí)對于裁剪矩形區(qū)域，clip-path 有更便捷的語法，上述 clip-path:polygon(0 50px, 100% 50px, 100% 250px, 0 250px) 可以替換成 clip-path:inset(50px 0)，減少了 20 個(gè)字符。

當(dāng)然，再暴力一點(diǎn)，我們也可以一行實(shí)現(xiàn)：

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

當(dāng)然，這里可能用了一些這個(gè)網(wǎng)站才允許的語法，不過核心實(shí)現(xiàn)還是在于用 clip-path 切割掉多余部分

以上是“web開發(fā)中怎么不使用overflow: hidden實(shí)現(xiàn)overflow: hidden”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：web開發(fā)中怎么不使用overflow:hidden實(shí)現(xiàn)overflow:hidden
網(wǎng)站地址：http://chinadenli.net/article2/jhgjic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、App開發(fā)、網(wǎng)頁設(shè)計(jì)公司、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)