Tidadigi Logo

Thuộc tính Contain trong CSS

Thuộc tính CSS contain cho phép bạn kiểm soát mức độ một phần tử ảnh hưởng đến bố cục bên ngoài của nó. Nó giúp tối ưu hóa hiệu năng bằng cách giới hạn sự lan truyền của các thuộc tính và layout, cải thiện thời gian render trang web. Contain có nhiều giá trị khác nhau, cho phép bạn tinh chỉnh mức độ cô lập của phần tử. Việc sử dụng contain hiệu quả có thể làm tăng đáng kể tốc độ tải trang, đặc biệt trên các trang web phức tạp.

Contain trong css là gì

Trong CSS, thuộc tính contain kiểm soát phạm vi ảnh hưởng của một phần tử, giúp tối ưu hóa hiệu năng trình duyệt. Nó hạn chế sự lan truyền của một số thuộc tính CSS và bố cục, ví dụ như layout, paint, size, giúp trình duyệt render nhanh hơn. Việc sử dụng contain hiệu quả có thể cải thiện đáng kể tốc độ tải trang web, đặc biệt là trên các trang web phức tạp.

Cấu trúc thuộc tính Contain

Contain: value;

Các giá trị của Contain property in css

Thuộc tính contain trong CSS kiểm soát cách một phần tử ảnh hưởng đến bố cục và vẽ của các phần tử khác. Điều này giúp tối ưu hóa hiệu suất bằng cách hạn chế sự lan truyền của các thuộc tính và hiệu ứng. Hiểu rõ các giá trị của contain property in css là rất quan trọng để tối ưu hóa hiệu năng web.

  • none: Không có giới hạn nào được áp dụng.
  • strict: Hạn chế mạnh mẽ nhất, ngăn chặn hầu hết các tương tác.
  • content: Chỉ giới hạn nội dung của phần tử.
  • size: Giới hạn kích thước của phần tử.
  • inline-size: Chỉ giới hạn kích thước nội tuyến.
  • layout: Giới hạn bố cục của phần tử.
  • style: Giới hạn các thuộc tính kiểu dáng.
  • paint: Giới hạn việc vẽ phần tử.
  • size paint: Kết hợp size và paint.
  • size layout paint: Kết hợp size, layout và paint.
  • inline-size layout: Kết hợp inline-size và layout.
  • inherit: Kế thừa giá trị từ phần tử cha.
  • initial: Thiết lập giá trị mặc định.
  • revert: Thiết lập giá trị từ user agent stylesheet.
  • revert-layer: Thiết lập giá trị từ user agent stylesheet, nhưng chỉ ảnh hưởng đến layer hiện tại.
  • unset: Thiết lập giá trị thành giá trị kế thừa hoặc giá trị ban đầu.

Ví dụ về giá trị none trong Contain

Trong CSS, thuộc tính `content` có giá trị `none` sẽ làm cho phần tử không hiển thị bất kỳ nội dung nào. Điều này có nghĩa là vùng chứa sẽ trống trơn, không có văn bản hay hình ảnh. Bạn cần đặt toàn bộ nội dung của bạn vào trong một thẻ

duy nhất để đảm bảo tính nhất quán. Việc này giúp cho mã nguồn của bạn dễ đọc và dễ bảo trì hơn.

Cấu trúc

Contain: none;

Ví dụ

<html>
<head>
<style>
.container {
  contain: none;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

.container img {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
</div>

</body>
</html>

Output

Ví dụ về giá trị strict trong Contain

Thuộc tính `contain: strict` trong CSS giúp tối ưu hiệu năng website bằng cách hạn chế sự ảnh hưởng của phần tử con lên bố cục chung. Nó hoạt động như một "vùng chứa" độc lập, giúp trình duyệt dễ dàng xử lý nội dung bên trong. Vì vậy, toàn bộ nội dung của vùng này phải nằm gọn trong một thẻ `

`, đảm bảo tính nhất quán và hiệu quả. Điều này giúp trình duyệt render nhanh hơn, cải thiện trải nghiệm người dùng. Hãy nhớ rằng, chỉ có một thẻ `

` duy nhất được phép chứa nội dung trong vùng `contain: strict`.

Cấu trúc

Contain: strict;

Ví dụ

```html 

<style>
.container {
  contain: strict;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

.container img {
  width: 100px;
  height: 100px;
}

.outside {
  background-color: lightcoral;
}
</style>
<body>
<div class="outside">
  <div class="container">
    <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
  </div>
  <p>This text is outside the container.</p>
</div>
</body>
</html>
```

Output

Ví dụ về giá trị content trong Contain

Nội dung cần đặt trong một thẻ

duy nhất để đảm bảo tính nhất quán của mã nguồn. Việc này giúp cho việc quản lý và bảo trì website trở nên dễ dàng hơn rất nhiều. Hãy chia nội dung thành 3-5 câu ngắn gọn, mỗi câu khoảng 15-25 từ để người đọc dễ dàng tiếp thu thông tin. Nhớ sử dụng giọng văn thân thiện, dễ hiểu nhé! Cuối cùng, hãy hạn chế sử dụng các từ chuyên môn phức tạp.

Cấu trúc

Contain: content;

Ví dụ


<body>
  <div class="container"></div>
</body>

Output

Ví dụ về giá trị size trong Contain

Thuộc tính size trong CSS không còn được hỗ trợ nữa, bạn nên sử dụng thuộc tính font-size để điều chỉnh kích thước chữ. Thuộc tính font-size cho phép bạn thiết lập kích thước văn bản một cách chính xác hơn, bằng nhiều đơn vị khác nhau như pixel (px), em, rem, v.v. Việc sử dụng font-size giúp bạn kiểm soát tốt hơn kiểu dáng và bố cục của trang web. Hãy nhớ rằng việc sử dụng đúng font-size sẽ làm cho nội dung của bạn dễ đọc và hấp dẫn hơn. Chọn kích thước phù hợp với nội dung và thiết kế tổng thể là rất quan trọng.

Cấu trúc

Contain: size;

Ví dụ

<html>
<head>
<style>
.container {
  width: 200px;
  height: 150px;
  background-color: lightblue;
  contain: size; /* Chỉ ảnh hưởng đến kích thước của phần tử con */
}

.inner {
  width: 300px; /* Vượt quá kích thước của .container */
  height: 200px; /* Vượt quá kích thước của .container */
  background-color: lightcoral;
  background-image: url("https://tidadigi.com/images/post/css.jpg");
  background-size: cover;
}
</style>
</head>
<body>
<div class="container">
  <div class="inner"></div>
</div>
</body>
</html>

Output

Ví dụ về giá trị inline-size trong Contain

Thuộc tính inline-size trong CSS thuộc tính contain giúp kiểm soát kích thước nội dung nằm trong một phần tử. Nó cho phép bạn đặt giới hạn chiều rộng của nội dung một cách dễ dàng, rất hữu ích khi thiết kế bố cục. Bạn có thể dùng giá trị inline-size để điều chỉnh độ rộng của phần tử mà không ảnh hưởng đến bố cục chung. Việc này giúp tối ưu hóa hiệu suất và cải thiện trải nghiệm người dùng. Tóm lại, inline-size là một công cụ mạnh mẽ trong CSS contain.

Cấu trúc

Contain: inline-size;

Ví dụ

<html>
<head>
<style>
.container {
  contain: inline-size;
  width: 200px;
  background-color: lightblue;
}

.container img {
  width: 300px; /* width của ảnh sẽ bị contain: inline-size giới hạn */
}
</style>
</head>
<body>

<div class="container">
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
</div>

</body>
</html>

Output

Ví dụ về giá trị layout trong Contain

Thuộc tính `layout` trong CSS container giúp bạn sắp xếp nội dung một cách dễ dàng, giống như đặt đồ đạc trong phòng. Nó cho phép bạn kiểm soát cách các phần tử con được bố trí bên trong container. Bạn có thể tạo ra các layout phức tạp chỉ với một vài dòng code. Việc sử dụng `layout` giúp code gọn gàng và dễ bảo trì hơn. Hãy thử dùng nó để tạo ra những giao diện đẹp mắt nhé!

Cấu trúc

Contain: layout;

Ví dụ

<html>
<head>
<style>
.container {
  width: 300px;
  border: 1px solid black;
  display: inline-block;
  layout: fixed; /* hoặc layout: content-box; */
  padding: 20px;
}

.container img {
  width: 100%;
  height: auto;
}

.container-2 {
  width: 300px;
  border: 1px solid black;
  display: inline-block;
  layout: auto; /* hoặc bỏ trống thuộc tính layout */
  padding: 20px;
}

.container-2 img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<div class="container">
  <p>Layout: fixed (hoặc content-box)</p>
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
</div>

<div class="container-2">
  <p>Layout: auto (hoặc bỏ trống)</p>
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
</div>

</body>
</html>

Output

Ví dụ về giá trị style trong Contain

Thuộc tính `style` trong CSS cho phép bạn trực tiếp định dạng nội dung HTML. Bạn có thể thêm nhiều thuộc tính kiểu dáng khác nhau vào trong đó, ví dụ như màu sắc, cỡ chữ hay kiểu chữ. Việc sử dụng thuộc tính `style` inline như vậy thường không được khuyến khích vì nó làm giảm tính khả năng bảo trì và tổ chức của mã nguồn. Tuy nhiên, trong một số trường hợp đơn giản, nó vẫn rất tiện lợi. Hãy nhớ rằng, việc sử dụng CSS riêng biệt thường là cách tốt hơn để quản lý kiểu dáng trang web.

Cấu trúc

Contain: style;

Ví dụ

<html>
<head>
<style>
.container {
  width: 300px;
  height: 200px;
  background-color: lightblue;
  contain: layout style; /* Chỉ ảnh hưởng đến layout và style bên trong */
}

.container img {
  width: 100%;
  height: auto;
}

.outside {
  font-size: 2em; /* Style này sẽ không ảnh hưởng đến phần tử bên trong .container vì contain: layout style; */
}
</style>
</head>
<body>

<div class="container">
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
</div>

<div class="outside">
  This text has a larger font size.
</div>

</body>
</html>

Output

Ví dụ về giá trị paint trong Contain

Thuộc tính `paint-order` trong CSS giúp bạn kiểm soát thứ tự vẽ các lớp nền, lớp nền trong suốt và nội dung chính của một phần tử. Nó rất hữu ích khi bạn muốn điều chỉnh sự chồng chéo giữa các lớp, tạo hiệu ứng thú vị. Ví dụ, bạn có thể đặt lớp nền vẽ trước nội dung để tạo hiệu ứng nổi bật. Việc sử dụng `paint-order` giúp bạn linh hoạt hơn trong việc thiết kế giao diện. Hiểu rõ thuộc tính này sẽ giúp bạn tạo ra những hiệu ứng hình ảnh đẹp mắt và tinh tế.

Cấu trúc

Contain: paint;

Ví dụ

<html>
<head>
<style>
.container {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  contain: paint; /* Chỉ ảnh hưởng đến phần tử con, không ảnh hưởng đến bố mẹ */
}

.child {
  width: 100px;
  height: 100px;
  background-image: url("https://tidadigi.com/images/post/css.jpg");
  background-size: cover;
  transform: translateX(50px); /* Thay đổi vị trí, nhưng bố mẹ không bị ảnh hưởng */
}
</style>
</head>
<body>
<div class="container">
  <div class="child"></div>
</div>
</body>
</html>

Output

Ví dụ về giá trị size paint trong Contain

Thuộc tính `size` không tồn tại trong CSS của phần tử `

`. Để điều chỉnh kích thước chữ trong thẻ `

`, bạn hãy sử dụng thuộc tính `font-size`. Bạn có thể đặt giá trị cho `font-size` bằng nhiều đơn vị khác nhau như px, em, rem, v.v. Ví dụ, `font-size: 16px` sẽ thiết lập kích thước chữ là 16 pixel. Hãy nhớ rằng việc điều chỉnh kích thước chữ cần phù hợp với thiết kế tổng thể của trang web.

Cấu trúc

Contain: size paint;

Ví dụ

<html>
<head>
<style>
.container {
  width: 200px;
  height: 150px;
  background-color: lightblue;
  contain: size paint; /* Chỉ ảnh hưởng đến kích thước paint của phần tử */
}

.container img {
  width: 300px; /* Kích thước lớn hơn container */
  height: 200px; /* Kích thước lớn hơn container */
}
</style>
</head>
<body>

<div class="container">
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
</div>

</body>
</html>

Output

Ví dụ về giá trị size layout paint trong Contain

Thuộc tính `contain` trong CSS giúp tối ưu hiệu năng website bằng cách hạn chế ảnh hưởng của một phần tử đến phần còn lại. Nó có thể kiểm soát các khía cạnh như bố cục, vẽ lại và tính toán kích thước. Việc sử dụng `contain` hiệu quả giúp trình duyệt render nhanh hơn, mượt mà hơn. Bạn có thể dùng nó để cải thiện tốc độ load trang web, đặc biệt là trên các trang phức tạp. Hãy thử nghiệm để thấy sự khác biệt rõ rệt nhé!

Cấu trúc

Contain: size layout paint;

Ví dụ

<html>
<head>
<style>
.container {
  width: 200px;
  height: 150px;
  background-color: lightblue;
  contain: size layout paint; /* Chỉ định contain: size layout paint */
}

.inner {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  margin: 25px; /* Thêm margin để minh họa layout */
}

.image-container {
  width: 100px;
  height: 100px;
  contain: size layout paint;
  background-color: lightgreen;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
</head>
<body>

<div class="container">
  <div class="inner"></div>
</div>

<div class="image-container">
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS Image">
</div>

</body>
</html>

Output

Ví dụ về giá trị inline-size layout trong Contain

Thuộc tính inline-size trong CSS giúp điều khiển chiều rộng của một phần tử, đặc biệt hữu ích khi bạn muốn kiểm soát cách bố cục nội dung bên trong. Với thuộc tính contain: layout, bạn có thể tạo ra một vùng chứa độc lập, giúp tối ưu hiệu năng trình duyệt. Điều này rất tiện lợi khi bạn cần xử lý các phần tử phức tạp mà không ảnh hưởng đến bố cục chung của trang web. Việc sử dụng contain: layout giúp cải thiện tốc độ tải trang và hiệu suất tổng thể. Nhờ đó, trải nghiệm người dùng sẽ được nâng cao đáng kể.

Cấu trúc

Contain: inline-size layout;

Ví dụ

<html>
<head>
<style>
.container {
  contain: layout inline-size;
  width: 200px; /* width của container */
  border: 1px solid black;
}

.container img {
  width: 100%; /* ảnh sẽ chiếm toàn bộ chiều rộng của container */
  height: auto;
}
</style>
</head>
<body>

<div class="container">
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
</div>

</body>
</html>

Output

Ví dụ về giá trị inherit trong Contain

Trong CSS, thuộc tính `inherit` cho phép một phần tử kế thừa giá trị của thuộc tính đó từ phần tử cha. Nó giúp bạn dễ dàng áp dụng kiểu dáng một cách nhất quán trên toàn trang web. Sử dụng `inherit` giúp tiết kiệm thời gian và làm cho mã CSS của bạn gọn gàng hơn. Bạn chỉ cần đặt thuộc tính trên phần tử cha, các phần tử con sẽ tự động kế thừa. Điều này làm cho việc quản lý kiểu dáng trở nên đơn giản và hiệu quả hơn.

Cấu trúc

Contain: inherit;

Ví dụ

<html>
<head>
<style>
body {
  font-size: 16px;
}

.container {
  font-size: 24px;
  color: blue;
}

.container p {
  inherit; /* Thừa kế font-size và color từ .container */
}

.container img {
  width: 100px;
  height: auto;
}

.container2 {
  font-size: 12px;
  color: green;
}

.container2 p {
  /* Không thừa kế gì cả */
}
</style>
</head>
<body>

<div class="container">
  <p>This text inherits font-size and color.</p>
  <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS">
</div>

<div class="container2">
  <p>This text does not inherit anything.</p>
</div>

</body>
</html>

Output

Ví dụ về giá trị initial trong Contain

Thuộc tính `initial` trong CSS đặt giá trị của thuộc tính về giá trị mặc định ban đầu. Nó giúp bạn dễ dàng khôi phục lại kiểu dáng ban đầu của một phần tử, bỏ qua các kiểu dáng kế thừa hoặc đã được đặt trước đó. Việc sử dụng `initial` rất hữu ích khi bạn muốn bắt đầu lại từ một trạng thái chuẩn. Bạn có thể áp dụng `initial` cho nhiều thuộc tính CSS khác nhau để kiểm soát kiểu dáng một cách chính xác. Nhờ đó, việc thiết kế giao diện web trở nên dễ dàng và linh hoạt hơn.

Cấu trúc

Contain: initial;

Ví dụ

<html>
<head>
<style>
.container {
  width: 200px;
  height: 150px;
  background-color: lightblue;
  contain: initial; /* Giá trị initial sẽ cho phép contain kế thừa từ cha */
}

.inner {
  width: 300px; /* Vượt quá kích thước cha */
  height: 200px; /* Vượt quá kích thước cha */
  background-color: lightcoral;
  contain: layout; /* Con sẽ bị ảnh hưởng bởi contain: layout */
}
</style>
</head>
<body>
<div class="container">
  <div class="inner"></div>
</div>
</body>
</html>

Output

Ví dụ về giá trị revert trong Contain

Thuộc tính `revert` trong CSS giúp khôi phục giá trị của một thuộc tính về giá trị kế thừa từ phần tử cha. Nó hữu ích khi bạn muốn bỏ qua các kiểu đã được đặt trước đó và quay lại với kiểu mặc định của dòng kế thừa. Điều này giúp làm sạch mã CSS và dễ dàng quản lý hơn, đặc biệt trong các dự án lớn. Bạn có thể sử dụng `revert` cho nhiều thuộc tính khác nhau, giúp tạo ra một giao diện linh hoạt và dễ tùy chỉnh. Nhờ `revert`, việc điều chỉnh kiểu dáng trở nên đơn giản và trực quan hơn.

Cấu trúc

Contain: revert;

Ví dụ

<html>
<head>
<style>
body {
  font-size: 20px;
}

.container {
  contain: revert;
  font-size: 16px;
  color: blue;
}

.container p {
  font-size: 12px;
  color: green;
}
</style>
</head>
<body>
<div class="container">
  <p>This text should be 12px green, but because of `contain: revert;`, it inherits the body's styles.</p>
</div>
</body>
</html>

Output

Ví dụ về giá trị revert-layer trong Contain

Thuộc tính `revert-layer` trong CSS giúp bạn khôi phục lại kiểu dáng của một phần tử về trạng thái mặc định của nó, bỏ qua các kiểu dáng được kế thừa từ cha hoặc được đặt trực tiếp. Nó hữu ích khi bạn muốn loại bỏ các hiệu ứng kiểu dáng không mong muốn và bắt đầu lại từ một điểm chuẩn. Bạn có thể sử dụng nó để tạo ra các hiệu ứng đặc biệt hoặc để khắc phục các vấn đề về kiểu dáng phức tạp. Tóm lại, `revert-layer` là một công cụ mạnh mẽ giúp bạn kiểm soát tốt hơn kiểu dáng của các phần tử trong trang web.

Cấu trúc

Contain: revert-layer;

Ví dụ

<html>
<style>
.container {
  contain: revert-layer;
  background-color: lightblue;
  padding: 20px;
}

.inner {
  background-color: lightcoral;
  padding: 10px;
  transform: rotate(10deg); /* This transform will be reverted */
  z-index: 10; /* This z-index will be reverted */
}

.outer {
  background-color: lightgreen;
  padding: 10px;
  z-index: 5;
}

.image-container {
  contain: layout; /* Example of another contain property */
  width: 100px;
  height: 100px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<body>

<div class="container">
  <div class="outer">
    <div class="inner">Inner Div</div>
  </div>
  <div class="image-container">
    <img src="https://tidadigi.com/images/post/css.jpg" alt="CSS Image">
  </div>
</div>

</body>
</html>

Output

Ví dụ về giá trị unset trong Contain

Trong CSS, thuộc tính `unset` đặt giá trị của một thuộc tính về giá trị mặc định của nó, tùy thuộc vào ngữ cảnh. Nếu thuộc tính được kế thừa từ phần tử cha, `unset` sẽ đặt nó về giá trị kế thừa đó. Ngược lại, nếu thuộc tính không được kế thừa, `unset` sẽ đặt nó về giá trị mặc định được định nghĩa trong trình duyệt. Nói một cách đơn giản, `unset` giúp bạn khôi phục giá trị ban đầu của thuộc tính một cách linh hoạt.

Cấu trúc

Contain: unset;

Ví dụ

<html>
<head>
<style>
.container {
  contain: unset; /* Giá trị unset sẽ cho phép kế thừa các thuộc tính từ cha */
  background-color: lightblue;
  padding: 20px;
}

.child {
  background-color: lightcoral;
  padding: 10px;
}

.parent {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
}
</style>
</head>
<body>

<div class="parent">
  <div class="container">
    <div class="child">This is child div</div>
  </div>
</div>

</body>
</html>

Output

Kết bài cho css Contain property

Tóm lại, thuộc tính contain là một công cụ mạnh mẽ giúp tối ưu hóa hiệu năng website. Nó cho phép trình duyệt cách ly các phần tử, hạn chế ảnh hưởng lẫn nhau và tăng tốc độ render trang. Việc sử dụng contain một cách khôn ngoan sẽ giúp cải thiện trải nghiệm người dùng, đặc biệt trên các website phức tạp, nhiều hiệu ứng động. Hãy thử áp dụng contain vào dự án của bạn để thấy sự khác biệt đáng kể nhé!

Last Updated : 07/09/2025