Thuộc tính overflow trong css là gì là một trong những keyword được search nhiều nhất trên Google về chủ đề thuộc tính overflow trong css. Trong bài viết này, hoclamweb.vn sẽ viết bài viết Tổng hợp thuộc tính overflow trong css mới nhất 2020.
Tóm Tắt
Tổng hợp thuộc tính overflow trong css mới nhất 2020
khái niệm
và
sử dụng
thuộc tính overflow định hình điều gì sẽ xảy ra nếu một thành phần box tràn nội dung.
Cấu trúc
tagoverflow: giá trị;
Với giá trị giống như sau:
thuộc tính
trị giá
ví dụ
giới thiệu
overflow
visible
overflow: visible;
Khi chiều cao của box
không
đủ
chứa text, thì text
luôn luôn
hiển thị tràn qua box, đây là mặc định.
hidden
overflow: hidden;
Khi chiều cao của box
k
quá đủ
chứa text, thì text bị tràn sẽ được dấu đi.
scroll
overflow: scroll;
_ Khi chiều cao của box
không
quá đủ
chứa text, thì text bị tràn sẽ được dấu đi và xuất hiện thanh scroll, khi cuộn sẽ hiển thị text.
_ Khi
sử dụng
yếu tố
này sẽ xuất hiện cả thanh scroll ngang và dọc.
auto
overflow: auto;
_ Khi chiều cao của box
không
đủ
chứa text, thì thanh scroll sẽ
tự động
hiển thị.
_ Khi
dùng
thành phần
này sẽ xuất hiện thanh scroll dọc.
inherit
overflow: inherit;
dựng lại
thừa hưởng
tính chất
từ
yếu tố
cha (thành phần bao ngoài).
gợi ý
nhìn thấy thêm ví dụ
HTML viết:
HỌC website CHUẨN
Html4
Html5
Xhtml
Css2
Css3
Jquery
Javascript
Php
Giả sử ban đầu CSS viết:
pborder: 1px solid red; height: 100px;
Hiển thị trình duyệt khi chưa có
thuộc tính
overflow:
HỌC web chuẩn
Html4
Html5
Xhtml
Css2
Css3
Jquery
Javascript
Php
Thêm
tính chất
overflow vào CSS:
pborder: 1px solid red; height: 100px; overflow: hidden;
Hiển thị trình duyệt khi
đang
thêm overflow vào CSS:
HỌC web phù hợp
Html4
Html5
Xhtml
Css2
Css3
Jquery
Javascript
Php
Trình duyệt
hỗ trợ
thuộc tính overflow được support trong đa số các trình duyệt.
giá trị “inherit” k support trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
nguồn: hocwebchuan.com
