內容範圍 contain

由於瀏覽器的進步，絕大部分頁面都不會遭遇渲染元素的效能問題，但如果是較為複雜的頁面，則可以透過 CSS 的 contain 樣式屬性近一步控制渲染的內容範圍，這篇教學會介紹 contain 樣式屬性與 layout、style、paint、size、strict、content 等屬性值的用法。

快速導覽：

認識 contain

屬性值 layout

屬性值 paint

屬性值 style

屬性值 size 與 inline-size

屬性值 strict 與 content

CSS 教學 - 內容範圍 contain

認識 contain

使用 CSS contain 之前，需要先了解瀏覽器渲染網頁的三個主要步驟：

佈局 ( Layout )：計算頁面佈局，確定每個元素的位置和大小。

繪製 ( Painting )：將計算好的佈局呈現在螢幕上。

重排和重繪 ( Reflow and Repaint )：響應使用者互動或動態內容，重新計算網頁佈局和視覺呈現。

前端開發者通常都是透過改善 HTML 和 CSS 結構、減少 JavaScript 對 HTML 和 CSS 的操作等做法，減輕瀏覽器在計算佈局、繪製、重排和重繪上的負擔，而 contain 樣式屬性可以明確地告訴瀏覽器哪些元素是「獨立的」，就像在網頁上建立了隔離的區域，這些區域內的元素不會影響或被外部元素影響，如此就能避免不必要的計算，進而提升渲染性能。

contain 沒有繼承特性，可以使用下列屬性值，

屬性值	說明
layout	只進行元素本身佈局，不考慮外部元素的變化。
paint	只繪製該元素及其子元素的「可見」部分，而不會考慮其周圍元素的繪製，防止不必要的重繪。
style	只作用於計數器和引用的樣式，使其不會影響到父元素或兄弟元素的樣式影響。
size	只基於元素本身內容的 width 和 height 屬性，而不考慮其子元素的內容大小。
inline-size	只基於元素本身內容的 width 屬性，而不考慮其子元素的內容大小。
content	等於同時使用 layout、paint 和 style。
strict	等於同時使用 layout、paint、size 和 style 的縮寫，表示最嚴格的內容範圍。

contain 的屬性值可以單獨使用，也可以混合使用，下方列出相關寫法：

div {
  contain: layout;              /* 使用一種內容範圍 */
  contain: layout paint;        /* 同時使用兩種內容範圍 */
  contain: layout paint style;  /* 同時使用三種內容範圍 */
  contain: content;             /* 等同 layout paint style */
  contain: strict;              /* 等同 layout paint style size */
}

雖然 contain 樣式屬性可以幫助開發者提升網頁性能和佈局穩定性。但需要注意下列事項：

瀏覽器的支援程度有所不同。

能提升複雜網頁或大型應用程式的效能，但對於簡單網頁或小型應用程式沒有太大影響。

需要搭配一些新的樣式屬性才能發揮真正功效，例如 size、inline-size、container 等。

contain 屬性值 layout

當 contain 屬性值為 layout 時，表示「元素會自成一個佈局」，元素的內容不受其他元素或頁面佈局影響 ( 注意是元素內容，元素本身仍然屬於頁面中的容器 )，因此不論是 float、position 等排版相關功能都會在自己的容器區域中進行，下方範例會使用三個 div，紅色 div 因為設定了 contain: layout，就算內容有出現浮動元素或定位，都會採用自身的容器作為佈局依據，另外兩個 div 就會參考頁面本身或父元素進行定位。

線上展示：https://codepen.io/oxxo/pen/bNbKrxx

<!-- HTML 程式碼 -->
<div class="a">
  <h2>contain: layout;</h2>
  <h3 class="fixed">fixed1</h3>
  <h3 class="absolute">absolute1</h3>
  <h3 class="float">float1</h3>
  <h3>oxxo</h3>
</div>
<div class="b">
  <h2>position: relative</h2>
  <h3 class="fixed">fixed2</h3>
  <h3 class="absolute">absolute2</h3>
  <h3 class="float">float2</h3>
  <h3>oxxo</h3>
</div>
<div class="c">
  <h2>normal</h2>
  <h3 class="fixed">fixed3</h3>
  <h3 class="absolute">absolute3</h3>
  <h3 class="float">float3</h3>
  <h3>oxxo</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 250px;
    height: 200px;
    border: 1px solid #000;
    margin: 10px;
    float: left;
  }
  .a {contain: layout;}      /* 設定 contain 為 layout */
  .b {position: relative;}   /* 設定 position 為 relative */
  .a h3 {background: #f005;}
  .b h3 {background: #0f05;}
  .c h3 {background: #00f5;}
  .fixed {
    position: fixed;
    bottom: 0;
    right: 0;
  }
  .absolute {
    position: absolute;
    top: 0;
    right: 0;
  }
  .float {float: left;}
  h3 {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #000;
  }
</style>

CSS 教學 - 內容範圍 contain - contain 屬性值 layout

contain 屬性值 paint

當 contain 屬性值為 paint 時，表示元素「只會渲染寬高尺寸裡的內容」，範圍外的內容都不會渲染，透過這個方法可以提高渲染性能，使用時雖然會呈現類似 overflow: hidden 的效果，但設定 contain: paint 元素內容的 position 定位會以自身佈局為主，下方範例會用三組 div 呈現不同的效果，可以發現設定 contain: paint 的元素內容就算出現了 position: fixed 定位，仍然會以自身佈局為參考依據。

線上展示：https://codepen.io/oxxo/pen/azoKLbB

<!-- HTML 程式碼 -->
<div class="a">
  <h2>contain: paint;</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
  <h3 class="fixed">fixed1</h3>
</div>
<div class="b">
  <h2>position: fixed</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
  <h3 class="fixed">fixed2</h3>
</div>
<div class="c">
  <h2>normal</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
  <h3 class="fixed">fixed3</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
    float: left;
  }
  .a {contain: paint;}         /* 設定 contain 為 paint */
  .a h3 {background: #f005;}
  .b {overflow: hidden;}
  .b h3 {background: #0f05;}
  .c h3 {background: #00f5;}
  h3 {
    margin: 10px;
    border: 1px solid #000;
    width: 100px;
    height: 40px;
  }
  .fixed {
    position: fixed;
    bottom: 0;
    right: 0;
  }
</style>

CSS 教學 - 內容範圍 contain - contain 屬性值 paint

contain 屬性值 style

當 contain 屬性值為 style 時，表示元素的「計數器和引用會獨立運作」，不會受到其他元素的計數器或引用設定影響，下方的範例會使用清單計數器相關樣式屬性，讓清單中每一筆資料前方的顯示數值，以間隔 50 的方式增加，但設定 contain: style 的清單並不會被影響。

線上展示：https://codepen.io/oxxo/pen/VYZdMmX

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li class="a">oxxo</li>
  <li class="a">oxxo</li>
  <li class="a">oxxo</li>
  <li>orange</li>
  <li>papaya</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  ul {counter-reset: oxxo 100;}
  li::before {
      counter-increment: oxxo 50;
      content: counter(oxxo)". ";
    }
  .a {contain: style;}
</style>

CSS 教學 - 內容範圍 contain - contain 屬性值 style

contain 屬性值 size 與 inline-size

當 contain 屬性值為 size 時，表示元素「按照設定的寬高顯示」，不會受到內容影響尺寸變化，如果沒有設定寬高，寬高預設值為 0，當 contain 屬性值為 inline-size 時，表示元素「按照設定的寬度顯示」，寬度不會受到內容影響尺寸變化，但高度會隨內容變化，如果沒有設定寬度，寬度預設值為 0，下方範例會使用三個 div 表現這兩個屬性值的差異。

線上展示：https://codepen.io/oxxo/pen/wBwXrmV

<!-- HTML 程式碼 -->
<div class="a">
  <h2>contain: size;</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
</div>
<div class="b">
  <h2>contain: inline-size;</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
</div>
<div class="c">
  <h2>normal</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
    padding: 5px;
    float: left;
  }
  .a, .b {margin-right: 250px;}
  .a {contain: size;}
  .a h3 {background: #f005;}
  .b {contain: inline-size;}
  .b h3 {background: #0f05;}
  .c h3 {background: #00f5;}
  h3 {
    margin: 10px;
    border: 1px solid #000;
    width: 200px;
    height: 40px;
  }
  .fixed {
    position: absolute;
    bottom: 0;
    right: 0;
  }
</style>

CSS 教學 - 內容範圍 contain - contain 屬性值 size 與 inline-size

contain 屬性值 strict 與 content

當 contain 的 strict 和 content 是縮寫格式的屬性值，使用後等於同時設定多個屬性值：

屬性值	等同多個屬性值同時使用
content	等於同時使用 layout、paint 和 style。
strict	等於同時使用 layout、paint、size 和 style 的縮寫，表示最嚴格的內容範圍。

下方範例會呈現這兩種屬性值的差異。

線上展示：https://codepen.io/oxxo/pen/xbKzXjP

<!-- HTML 程式碼 -->
<div class="a">
  <h2>contain: content;</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
  <h3>papaya</h3>
  <h3 class="fixed">fixed1</h3>
</div>
<div class="b">
  <h2>contain: strict;</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
  <h3>papaya</h3>
  <h3 class="fixed">fixed2</h3>
</div>
<div class="c">
  <h2>normal</h2>
  <h3>apple</h3>
  <h3>banana</h3>
  <h3>oxxo</h3>
  <h3>papaya</h3>
  <h3 class="fixed">fixed3</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 250px;
    min-height: 100px;
    border: 1px solid #000;
    margin: 10px;
    padding: 5px;
    float: left;
  }
  .a {contain: content;}
  .a h3 {background: #f005;}
  .b {contain: strict;}
  .b h3 {background: #0f05;}

  .c h3 {background: #00f5;}

  h3 {
    margin: 10px;
    border: 1px solid #000;
    width: 100px;
    height: 40px;
  }
  .fixed {
    position: absolute;
    bottom: 0;
    right: 0;
  }
</style>

CSS 教學 - 內容範圍 contain - contain 屬性值 strict 與 content

小結

CSS 的 contain 屬性值通常是應用在需要大量動態刷新內容的頁面，透過局部渲染的方式，可以提高網頁的執行效能，但如果是一些靜態頁面或內容不多的頁面，反而沒有多大差別，有時反而透過原本的樣式屬性還比較容易理解和調整。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

內容範圍 contain

認識 contain

contain 屬性值 layout

contain 屬性值 paint

contain 屬性值 style

contain 屬性值 size 與 inline-size

contain 屬性值 strict 與 content

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

規則與定義

函式類型

顏色與濾鏡

文字與段落

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩

視窗與使用者行為

範例效果