Các thuộc tính của overflow trong CSS? giải thích chúng?

Trong CSS, thuộc tính overflow quy định cách thức xử lý nội dung khi nó vượt quá kích thước của phần tử chứa (parent element). Thuộc tính này có thể được thiết lập với một số giá trị khác nhau để kiểm soát việc hiển thị nội dung vượt quá:

Các Giá Trị của Thuộc Tính overflow

1. visible: Đây là giá trị mặc định. Nội dung vượt quá sẽ không bị cắt bỏ và có thể hiển thị bên ngoài phần tử chứa.

   css Copy

   overflow: visible;

2. hidden: Nội dung vượt quá sẽ bị cắt bỏ và không hiển thị. Không có thanh cuộn được thêm vào.

   css Copy

   overflow: hidden;

3. scroll: Nội dung vượt quá sẽ bị cắt bỏ và thanh cuộn sẽ được thêm vào để xem phần nội dung bị ẩn, bất kể nội dung có vượt quá hay không.

   css Copy

   overflow: scroll;

4. auto: Tương tự như scroll, nhưng thanh cuộn chỉ được thêm vào khi nội dung vượt quá kích thước của phần tử chứa.

   css Copy

   overflow: auto;

5. clip: Nội dung vượt quá sẽ bị cắt bỏ, tương tự như hidden, nhưng không tạo ra một block formatting context mới.

Sử Dụng overflow với Hai Hướng

Thuộc tính overflow có thể được chỉ định bằng một hoặc hai giá trị từ các giá trị trên. Nếu chỉ định một giá trị, nó sẽ áp dụng cho cả hai hướng (ngang và dọc). Nếu chỉ định hai giá trị, giá trị đầu tiên áp dụng cho hướng ngang (overflow-x), và giá trị thứ hai áp dụng cho hướng dọc (overflow-y).

Lưu Ý

• overflow chỉ hoạt động trên các phần tử block có kích thước xác định.
• Trong một số trường hợp, như trên macOS, thanh cuộn có thể được ẩn mặc định và chỉ hiển thị khi sử dụng.
• Sử dụng overflow-x và overflow-y để kiểm soát riêng lẻ việc hiển thị nội dung vượt quá theo hướng ngang hoặc dọc.

Ví dụ, để ẩn thanh cuộn ngang và thêm thanh cuộn dọc khi cần thiết, bạn có thể sử dụng:

element {
  overflow-x: hidden;
  overflow-y: auto;
}

Thuộc tính overflow và các giá trị của nó cung cấp sự linh hoạt trong việc kiểm soát cách thức hiển thị nội dung vượt quá, giúp tạo ra trải nghiệm người dùng tốt hơn trên các trang web và ứng dụng web.