Tidadigi Logo

Thuộc tính Container-Type trong CSS

Thuộc tính CSS container-type kiểm soát cách một phần tử được coi là một vùng chứa bố cục. Nó cho phép bạn định nghĩa các vùng chứa nội tuyến hoặc vùng chứa khối, ảnh hưởng đến cách các thành phần con được sắp xếp và định kiểu. Việc sử dụng container-type rất hữu ích trong việc tạo ra các bố cục phức tạp và linh hoạt hơn. Điều này giúp cải thiện hiệu suất và khả năng bảo trì mã CSS.

Container-Type trong css là gì

Trong CSS, Container-Type là một thuộc tính mô tả cách một phần tử bố cục (layout) xử lý nội dung con của nó. Nó xác định xem nội dung con được sắp xếp như thế nào, ví dụ như xếp chồng lên nhau hay nằm cạnh nhau. Thuộc tính này thường được sử dụng với các thuộc tính khác để tạo ra các bố cục phức tạp. Việc hiểu Container-Type rất quan trọng để thiết kế giao diện web hiệu quả.

Cấu trúc thuộc tính Container-Type

Container-Type: value;

Các giá trị của Container-Type property in css

Thuộc tính Container-Type property in css quy định cách trình bày nội dung của một phần tử container. Chúng ta sẽ xem xét các giá trị thuộc tính khác nhau, bao gồm cách chúng ảnh hưởng đến kích thước và trạng thái cuộn của container. Hiểu rõ các giá trị này rất quan trọng để kiểm soát bố cục và trải nghiệm người dùng.

  • normal: Giá trị mặc định, cho phép trình duyệt tự động xác định kích thước và trạng thái cuộn.
  • size: Thiết lập kích thước của container, bao gồm cả chiều rộng và chiều cao.
  • inline-size: Chỉ định kích thước nội tuyến của container (thường là chiều rộng).
  • scroll-state: Mô tả trạng thái cuộn hiện tại của container, ví dụ như đang cuộn hay không.
  • size scroll-state: Kết hợp cả kích thước và trạng thái cuộn, cho phép kiểm soát toàn diện hơn.
  • inherit: Kế thừa giá trị từ phần tử cha.
  • initial: Thiết lập giá trị ban đầu được định nghĩa trong CSS.
  • revert: Khôi phục giá trị được kế thừa từ quy tắc kiểu mặc định của user agent.
  • revert-layer: Khôi phục giá trị từ lớp kiểu revert gần nhất.
  • unset: Thiết lập giá trị thành giá trị kế thừa nếu có, nếu không thì là giá trị ban đầu.

Ví dụ về giá trị normal trong Container-Type

Giá trị `normal` trong thuộc tính `container-type` của CSS cho phép nội dung bên trong một container được bố trí một cách tự nhiên, giống như các phần tử bình thường. Nó không tạo ra bất kỳ hiệu ứng bố trí đặc biệt nào, giúp bạn dễ dàng kiểm soát cách nội dung hiển thị. Nếu bạn muốn có bố cục phức tạp hơn, hãy dùng các giá trị khác như `inline-size` hoặc `size`. Tóm lại, `normal` là lựa chọn đơn giản và phù hợp cho hầu hết trường hợp.

Cấu trúc

Container-Type: normal;

Ví dụ

<html>
<head>
<style>
.container {
  width: 300px;
  height: 200px;
  background-color: lightblue;
  display: inline-block; /* Default value of display is inline, so this is not strictly necessary to show 'normal' but helps illustrate the concept */
  container-type: normal; /* This is the key line demonstrating 'normal' */
}

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

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

</body>
</html>

Output

Ví dụ về giá trị size trong Container-Type

Thuộc tính size trong kiểu dữ liệu container-type CSS quy định kích thước của vùng chứa. Nó giúp bạn điều chỉnh không gian hiển thị nội dung một cách dễ dàng và linh hoạt. Bạn có thể thiết lập size theo nhiều đơn vị khác nhau như pixel, phần trăm hoặc em. Việc sử dụng size rất hữu ích để tạo bố cục trang web đẹp mắt và chuyên nghiệp. Hãy thử nghiệm để tìm ra kích thước phù hợp nhất với thiết kế của bạn nhé!

Cấu trúc

Container-Type: size;

Ví dụ

<html>
<head>
<style>
.container {
  width: 300px; /* Ví dụ về size: width */
  height: 200px; /* Ví dụ về size: height */
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container img {
  max-width: 100%; /* Điều chỉnh kích thước ảnh để phù hợp với container */
  max-height: 100%;
}
</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ị inline-size trong Container-Type

Giá trị `inline-size` trong CSS điều khiển chiều rộng của một phần tử container. Nó giúp bạn dễ dàng thiết lập kích thước chính xác cho các hộp chứa nội dung. Bạn có thể dùng nó để tạo ra các layout đẹp mắt và đáp ứng tốt trên nhiều thiết bị. Việc sử dụng `inline-size` rất hữu ích khi bạn cần kiểm soát chính xác kích thước hiển thị của các phần tử. Hãy thử nghiệm để thấy hiệu quả của nó nhé!

Cấu trúc

Container-Type: inline-size;

Ví dụ

<html>
<head>
<style>
.container {
  display: inline-block;
  inline-size: 200px; /* Giá trị inline-size */
  background-color: lightblue;
  padding: 10px;
}

.container-image {
  display: inline-block;
  inline-size: 150px; /* Giá trị inline-size */
  background-image: url("https://tidadigi.com/images/post/css.jpg");
  background-size: cover;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  This is a container with inline-size: 200px;
</div>

<div class="container-image">
</div>

</body>
</html>

Output

Ví dụ về giá trị scroll-state trong Container-Type

Thuộc tính scroll-state trong CSS chỉ định trạng thái cuộn của một phần tử, ví dụ như đang cuộn hay không. Nó hữu ích để tạo hiệu ứng động dựa trên hành động cuộn của người dùng. Bạn có thể sử dụng thuộc tính này để điều khiển hiển thị hoặc hoạt động của các thành phần khác trên trang web. Hiểu rõ scroll-state giúp bạn tạo ra các trải nghiệm người dùng mượt mà và hấp dẫn hơn.

Cấu trúc

Container-Type: scroll-state;

Ví dụ

```html 

<style>
body {
  height: 2000px; /* Make the body scrollable */
}

.container {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid black;
}

.container::-webkit-scrollbar {
  width: 10px;
}

.container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

.container::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 5px;
}

.item {
  height: 50px;
  background-color: lightblue;
  margin-bottom: 10px;
}

.item:nth-child(even) {
  background-color: lightcoral;
}

.scroll-state {
  position: fixed;
  top: 0;
  left: 350px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>
<body>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

<div class="scroll-state">Scroll State: <span id="scroll-state">0</span></div>

<script>
const container = document.querySelector('.container');
const scrollState = document.getElementById('scroll-state');

container.addEventListener('scroll', () => {
  scrollState.textContent = container.scrollTop;
});
</script>
</body>
</html>
```

Output

Ví dụ về giá trị size scroll-state trong Container-Type

Thuộc tính `scroll-state` trong CSS chỉ định trạng thái cuộn của một phần tử, ví dụ như đang cuộn hay không. Nó hữu ích để tạo hiệu ứng động dựa trên hành vi cuộn của người dùng. Giá trị của nó thường là "idle" (không cuộn), "scrolling" (đang cuộn) hoặc "auto" (tự động). Bạn có thể sử dụng thuộc tính này để điều khiển kiểu dáng của phần tử tùy thuộc vào trạng thái cuộn. Hiểu rõ thuộc tính này giúp bạn tạo ra các giao diện web tương tác mượt mà hơn.

Cấu trúc

Container-Type: size scroll-state;

Ví dụ

<html>
<head>
<style>
.container {
  width: 200px;
  height: 150px;
  overflow: auto;
  border: 1px solid black;
}

.container::-webkit-scrollbar {
  width: 10px;
}

.container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

.content {
  width: 300px; /* Content wider than container */
  height: 250px; /* Content taller than container */
  background-image: url("https://tidadigi.com/images/post/css.jpg");
  background-size: cover;
}
</style>
</head>
<body>

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

</body>
</html>

Output

Ví dụ về giá trị inherit trong Container-Type

Thuộc tính `inherit` trong CSS 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ếu bạn đặt `container-type: inherit;` cho một phần tử, nó sẽ kế thừa kiểu container từ phần tử chứa nó. Điều này giúp bạn dễ dàng tạo ra các layout lồng nhau một cách nhất quán. Việc 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. Nó cũng giúp duy trì tính nhất quán trong thiết kế.

Cấu trúc

Container-Type: inherit;

Ví dụ

<html>
<head>
<style>
.container {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
}

.container-child {
  width: 50px;
  height: 50px;
  background-image: url("https://tidadigi.com/images/post/css.jpg");
  background-size: cover;
  /*background-color: inherit;  Uncomment this line to see the effect of inherit*/
}
</style>
</head>
<body>

<div class="container">
  <div class="container-child"></div>
</div>

</body>
</html>

Output

Ví dụ về giá trị initial trong Container-Type

Giá trị `initial` trong thuộc tính `container-type` của CSS đặt lại kiểu container về mặc định. Nó vô hiệu hóa mọi kiểu container đã được thiết lập trước đó, giúp bạn bắt đầu với một cấu trúc container sạch sẽ. Điều này rất hữu ích khi bạn muốn đảm bảo container hoạt động như dự định mà không bị ảnh hưởng bởi các kiểu kế thừa. Bạn có thể sử dụng nó để kiểm soát chính xác cách bố cục container hoạt động trong dự án của mình.

Cấu trúc

Container-Type: initial;

Ví dụ

<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  container-type: initial; /* Giá trị initial sẽ là inline-size */
}

.item {
  background-color: lightblue;
  padding: 20px;
  border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
</body>
</html>

Output

Ví dụ về giá trị revert trong Container-Type

Thuộc tính `revert` trong CSS cho phép bạn đặt giá trị của một thuộc tính về giá trị được kế thừa từ phần tử cha. Nó hữu ích khi bạn muốn khôi phục lại kiểu mặc định của một phần tử sau khi đã áp dụng các kiểu tùy chỉnh. Điều này giúp bạn dễ dàng quản lý và kiểm soát kiểu dáng của các thành phần trong trang web. Sử dụng `revert` giúp code CSS trở nên gọn gàng và dễ đọc hơn, tránh sự chồng chéo phức tạp của các thuộc tính. Bạn có thể dùng `revert` cho nhiều thuộc tính CSS khác nhau, giúp việc thiết kế trở nên linh hoạt hơn.

Cấu trúc

Container-Type: revert;

Ví dụ

<html>
<head>
<style>
.container {
  display: inline-block;
  font-size: 16px;
  background-color: lightblue;
  padding: 10px;
}

.container-child {
  font-size: 24px;
  background-color: lightcoral;
  padding: 5px;
}

.revert-container {
  container-type: revert; /* Giá trị revert sẽ kế thừa từ phần tử cha */
}
</style>
</head>
<body>

<div class="container">
  <div class="container-child">
    Text in child
  </div>
</div>

<div class="container revert-container">
  <div class="container-child">
    Text in reverted child
  </div>
</div>

</body>
</html>

Output

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

Thuộc tính revert-layer trong CSS giúp điều chỉnh cách các lớp chồng chéo lên nhau trong một container. Nó cho phép bạn khôi phục thứ tự xếp lớp về trạng thái mặc định của trình duyệt, loại bỏ các hiệu ứng xếp lớp do các thuộc tính khác gây ra. Điều này rất hữu ích khi bạn muốn kiểm soát chính xác cách các phần tử hiển thị mà không bị ảnh hưởng bởi các kiểu kế thừa. Bạn có thể sử dụng revert-layer để đơn giản hóa việc thiết kế giao diện phức tạp, giúp mã CSS dễ đọc và bảo trì hơn. Nhờ đó, việc sắp xếp các lớp chồng chéo trở nên dễ dàng và trực quan hơn.

Cấu trúc

Container-Type: revert-layer;

Ví dụ

```html 
<html>
<head>
<style>
.container {
  display: flex;
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

.layer1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
}

.layer2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  z-index: 2;
  contain: layout style; /*Contain property to isolate the effect*/
  contain-intrinsic-size: 100px 100px;
  transform: translateX(100px);
}

.layer3 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: yellow;
  z-index: 3;
  contain: layout style; /*Contain property to isolate the effect*/
  contain-intrinsic-size: 100px 100px;
  transform: translateX(200px);
  contain: revert-layer;
}
</style>
</head>
<body>
<div class="container">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>
</body>
</html>
```

Output

Ví dụ về giá trị unset trong Container-Type

Giá trị `unset` trong CSS giúp đặt lại thuộc tính về giá trị mặc định của trình duyệt, tùy thuộc vào ngữ cảnh. Nó sẽ tự động chọn giá trị kế thừa từ phần tử cha hoặc giá trị mặc định của thuộc tính đó nếu không có giá trị kế thừa. Điều này rất tiện lợi khi bạn muốn nhanh chóng khôi phục một thuộc tính về trạng thái ban đầu. Việc sử dụng `unset` giúp mã CSS trở nên gọn gàng và dễ hiểu hơn. Bạn có thể dùng `unset` cho nhiều thuộc tính khác nhau trong CSS.

Cấu trúc

Container-Type: unset;

Ví dụ

<html>
<head>
<style>
.container {
  display: flex;
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

.item1 {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  container-type: inline-size; /* container-type: inline-size; */
}

.item2 {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  container-type: unset; /* container-type: unset;  This will inherit the container-type from its parent (which is inline-size in this case) */
}
</style>
</head>
<body>
<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
</div>
</body>
</html>

Output

Kết bài cho css Container-Type property

Tóm lại, thuộc tính Container-Type là một công cụ hữu ích giúp chúng ta quản lý và tổ chức dữ liệu một cách hiệu quả hơn. Nó cho phép chúng ta nhóm các phần tử lại với nhau, tạo ra cấu trúc rõ ràng và dễ dàng hơn trong việc thao tác, sửa đổi hay tìm kiếm thông tin. Hiểu rõ về Container-Type sẽ giúp bạn xây dựng các ứng dụng web mạnh mẽ và dễ bảo trì hơn. Hãy thử áp dụng nó vào dự án của bạn và cảm nhận sự khác biệt nhé!

Last Updated : 07/09/2025