Cách Sử Dụng Thuộc Tính Overflow Trong Css Là Gì, Thuộc Tính Overflow Trong Css | https://final-blade.com - https://final-blade.com

Chắc hẳn ai học lập trình web cũng từng gặp phải khó khăn vất vả là nếu nội dung của một thành phần quá lớn so với kích cỡ của thành phần đó thì nội dung đó sẽ chảy ra ngoài vùng được chỉ định cho thành phần đó. . Vậy làm thế nào để vượt qua khó khăn vất vả đó ?
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.

Bạn đang đọc: Cách Sử Dụng Thuộc Tính Overflow Trong Css Là Gì, Thuộc Tính Overflow Trong Css | https://final-blade.com – https://final-blade.com

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.

Xem thêm: Tối ưu hóa phân phối CSS trong tăng tốc website • Kiến càng

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