Trong CSS, có một thuộc tính tràn được cho phép bạn khắc phục yếu tố trên bằng cách cắt bớt nội dung tràn hoặc thêm thanh cuộn cho thành phần đó .
Xem : Thuộc tính tràn trong css là gì
Thuộc tính tràn có nhiều giá trị, nhưng trong bài này mình sẽ tìm hiểu 4 giá trị chính của thuộc tính tràn: hiển thị, ẩn, cuộn, tự động.
Tóm Tắt
1. Tốc độ dòng chảy
hiểu
Nếu thuộc tính tràn được đặt thành hiển thị, nội dung tràn sẽ không bị cắt và nội dung tràn sẽ ghi đè lên những thành phần khác .
Bấm RUN để xem hiệu quả. ⁇
Ví dụ RUN
div.overflow {background-color: gray; chiều rộng: 300px; chiều dài: 50px; viền: đen đặc 1px; tràn: xem;}
Và kết quả của ví dụ trên:
giấu
Nếu thuộc tính tràn bị ẩn, nội dung tràn sẽ bị cắt và nội dung bị ẩn .
Ví dụ RUN
div.overflow {background-color: gray; chiều rộng: 300px; chiều dài: 50px; viền: đen đặc 1px; tràn: ẩn;}
Và kết quả của ví dụ trên:
cuộn giấy
Nếu thuộc tính tràn có giá trị cuộn thì nội dung tràn vẫn bị cắt bớt, nhưng trình duyệt có thêm thanh cuộn, tôi hoàn toàn có thể kéo để xem nội dung ẩn. Thanh cuộn này được thêm theo chiều dọc và chiều ngang vào thành phần .
Ví dụ RUN
div.overflow {background-color: gray; chiều rộng: 300px; chiều cao: 50px; viền: đen đặc 1px; tràn: cuộn;
Và kết quả của ví dụ trên:
TỰ ĐỘNG
Khi thuộc tính phần bổ trợ được đặt thành tự động hóa, nó giống với giá trị cuộn, nhưng thanh cuộn sẽ được thêm vào nếu cần .
Ví dụ RUN
div.overflow {background-color: gray; chiều rộng: 300px; chiều dài: 50px; border: 1px đen đặc;}
Và kết quả của ví dụ trên:
Đó là nguyên do tại sao tôi biết những giá trị chính của thuộc tính tràn là tìm thấy, ẩn, cuộn, tự động hóa. Trong CSS, có thêm hai thuộc tính tràn-x và tràn-y được cho phép tràn nội dung theo chiều dọc hoặc chiều ngang. Hãy xem nội dung tiếp theo .
2. chảy-x
Thuộc tính tràn-x là thuộc tính được cho phép nội dung tràn theo chiều ngang ( nghĩa là ở bên trái và bên phải của thành phần ). Giống như thuộc tính tràn, thuộc tính tràn-x cũng có một giá trị. ví dụ điển hình như hiển thị, ẩn, tự động hóa, cuộn .
Xem thêm : Các Lỗi Máy In Epson T60 Thường Gặp Không In Được, Các Lỗi Máy In Epson Thường Gặp Và Cách Khắc Phục
Tôi sẽ lấy một ví dụ cho thuộc tính tràn-x sau khi biết thuộc tính tràn-y.
3. tràn-y
Overflow-y là một thuộc tính được cho phép nội dung được tràn theo chiều dọc ( nghĩa là phía trên ( trên ) và bên dưới ( bên dưới ) một thành phần ). Tương tự như thuộc tính tràn, thuộc tính tràn y cũng có một giá trị. ví dụ điển hình như hiển thị, ẩn, tự động hóa, cuộn .
Tôi sẽ lấy một ví dụ cho hai thuộc tính tràn-x và tràn-y như sau :
Ví dụ RUN
div {background-color: yellow; chiều rộng: 200px; chiều dài: 50px; viền: đen đặc 1px; tràn-x: ẩn; tràn-y: scroll;}
Và kết quả của ví dụ trên:
4. Kết luận
Vì vậy, tôi đã kết thúc trình diễn 4 giá trị thuộc tính tràn chính hoàn toàn có thể tìm thấy, ẩn, cuộn, tự động hóa. Ngoài ra còn có 2 thuộc tính tràn-x và tràn-y được cho phép tràn nội dung theo chiều ngang hoặc chiều dọc. Các giá trị hiển thị, ẩn, hoàn toàn có thể cuộn, tự động hóa tràn, thuộc tính tràn-x, tràn-y khi nào sử dụng tùy thuộc vào mục tiêu sử dụng của bạn. ⁇
Cuối cùng trong quy trình viết chắc như đinh sẽ không tránh khỏi những sai sót, nếu có gì chưa hài hòa và hợp lý, rất mong nhận được sự góp ý chân thành của những bạn để bài viết của tôi ngày càng tốt hơn .
Cảm ơn đã đọc bài viết. Tôi kỳ vọng bạn sử dụng nó tốt .
Tham khảo : w3school.com
Bài tiếp theo Bài tiếp theo
Các chủ đề để học lập trình web: Mô-đun HTML / CSS
Đây là chương tiên phong về tự học lập trình web với PHP. Trong chương này tất cả chúng ta sẽ học HTML và CSS trước .
Hãy sub kênh để mình ủng hộ nhé. Liên kết đặc biệt quan trọng tại đây .
Xem thêm : Có Nên Mua Máy in Fuji Xerox P115W, Máy in Laser đơn năng Fuji Xerox Docuprint P115W
Tải xuống và thêm phản hồi
DANH MỤC BÀI HỌC
Tài liệu tham khảo nâng cao cơ bản
Danh sách các chủ đề
MÃ GIẢM GIÁ | ||
Unica | 50% | Nhận mã |
TinoHost | 30% | Nhận mã |
INET | 30% | Nhận mã |
Tiếp xúc
Mã giảm giá
Khóa học
ra mắt
Quản trị viên sức mạnhngười quản lý chính của trang web.
Năm 2020 – congdonginan.com. Tất cả các chủ đề dành riêng Tin tốtthông tin liên lạc Người viết mãVPS được mua bởi Tinohost
BÀI ĐĂNG
Nếu bạn tìm thấy liên kết sai, nội dung sai hoặc bất kỳ lỗi nào khác trên trang này sau đó cho tôi biết. Cảm ơn!
Xem thêm các bài viết trong chuyên mục này: Nó là gì
Source: https://final-blade.com
Category : Kiến thức Internet