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ị ẩnscroll
– 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 dungauto
– 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 overflow
1và overflow
2 đượ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]
overflow
1chỉ đị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