Tràn css la gì

tip nhỏ. Để tìm kiếm chính xác các ấn phẩm của GiuseArt. com, hãy tìm kiếm trên Google với cú pháp. "Từ khóa" + "giuseart". (Ví dụ. out new linh mục giuart). Search now

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn sử dụng CSS cơ bản của Giuseart. com. Trong lúc thiết kế web có rất nhiều bạn gặp phải lỗi tràn phần tử, làm cho phần tử hiển thị theo cách không muốn. Vì sao phải làm sao để giải quyết nó, thì trong bài viết hôm nay mình sẽ hướng dẫn cách giải quyết những trường hợp như vậy

Thuộc tính over-flow

Thuộc tính overflow cho phép nội dung có thể thêm thanh cuộn khi nội dung của một phần tử quá lớn nên trong một khu vực cụ thể có thể chứa nó

• Hướng dẫn chèn bài viết liên quan cực đẹp cho website
• Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS
• Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
• Hướng dẫn tạo các nút gọi, chat Zalo, chat Facebook cho website WordPress bằng HTML và CSS
• Hướng dẫn tạo menu Float Theo dõi sát lề cho trang web WordPress

Thuộc tính overflow có các giá trị sau

• visible– Mặc định. Lỗi tràn không được cắt bớt. Nó hiển thị bên ngoài hộp của phần tử
• hidden – Phần tràn bị cắt bớt và phần còn lại của nội dung sẽ bị ẩn
• scroll – Luồng tràn bị cắt bớt, nhưng một thanh cuộn được thêm vào để xem phần còn lại của nội dung
• auto – Nếu phần tràn bị cắt bớt, một thanh cuộn sẽ được thêm vào để xem phần còn lại của nội dung

Bây giờ chúng ta hãy cùng đi sâu để tìm hiểu về các thuộc tính ở trên nhé

Thuộc tính tràn. dễ thấy

1

2

3

div   {

    tràn.   hiển thị;

}

Theo mặc định, tràn là visible, có nghĩa là nó không bị cắt và nó xuất hiện bên ngoài hộp của phần tử

Ví dụ

Thuộc tính tràn. ẩn giấu

Với giá trị hidden, phần tràn đã bị cắt bớt và phần còn lại của nội dung bị ẩn

1

2

3

div   {

    tràn.   ẩn;

}

Ví dụ

 

Thuộc tính tràn. cuộn

Thiết lập giá trị scroll cho nội dung, thì phần tràn sẽ bị cắt bớt và thanh cuộn được thêm vào để cuộn bên trong hộp. Điều này sẽ bổ sung một thanh cuộn cả theo chiều ngang và chiều dọc (ngay cả khi bạn không cần thiết)

1

2

3

div {

    tràn. cuộn;

}

Ví dụ

Thuộc tính tràn. tự động

Các giá trị auto tương tự như scroll, nhưng nó chỉ thêm thanh cuộn khi cần thiết

1

2

3

div {

    tràn. tự động;

}

Ví dụ

Thuộc tính tràn-x và tràn-y

Các thuộc tính overflow1và overflow2 được sử dụng để chỉ định nội dung có thay đổi chỉ tràn theo chiều ngang hoặc chiều dọc (hoặc cả hai)

overflow1chỉ định phải làm gì với cạnh trái / phải của nội dung.
______02chỉ định phải làm gì với các cạnh trên cùng / dưới cùng của nội dung.

Ví dụ

1

2

3

4

div   {

    tràn-x.   ẩn;

    tràn-y.   cuộn;  

}

Lời kết

Bài viết hướng dẫn của mình tới đây là hết rồi, mình mong rằng bài viết này sẽ có ích cho các bạn. Nếu có bất kỳ thắc mắc nào liên quan đến bài học thì đừng ngại và hãy bình luận ở phía dưới bài viết. Các bạn hãy chú ý theo dõi và cùng chờ đón những bài viết tiếp theo của mình nhé. Cảm ơn các bạn đã theo dõi bài viết