Thuộc tính visibility trong CSS
Bùi Tấn Lực - 338
- 01/10/2025
Thuộc tính visibility trong CSS dùng để ẩn các phần tử con nằm trong phần tử cha nhưng không mất đi bố cục giao diện, chi tiết như nào hãy cùng chúng tôi phân tích:
Chức năng của Thuộc tính visibility trong CSS
Thuộc tính visibility trong CSS dùng để ẩn các phần tử con nằm trong phần tử cha nhưng không mất đi bố cục giao diện, nó hiện ra với chiều rộng chiều cao như lúc chưa ẩn và không có gì trong đó, đối với table thì nó ẩn đi một hàng và hàng đó giống như bị xóa.
Cú pháp của Thuộc tính visibility trong CSS
visibility: giatri;
giatri: Giá trị để ẩn các phần tử con nằm trong phần tử cha nhưng không mất đi bố cục giao diện, riêng collapse sẽ ẩn luôn một hàng của table, giống như không tồn tại (Ví dụ: hidden, visible, collapse)
Các giá trị của Thuộc tính visibility trong CSS
visible: Để hiển thị phần tử HTML.
hidden: Để ẩn nội dung trong phần tử HTML nhưng chiều cao chiều rộng không bị thay đổi (giống như nội dung không nhìn thấy nhưng vẫn ở đó).
collapse: Dành cho table, ẩn luôn cả hàng trong table, giống như hàng đó không tồn tại và cũng không chiếm chổ.
initial: Trả về giá trị ban đầu của trình duyệt (thường là visible).
inherit: Kế thừa giá trị visibility từ phần tử cha của nó.
Code Thuộc tính visibility trong CSS
Giá trị hidden của thuộc tính visibility trong CSS
Giá trị visible để hiển thị, giá trị hidden để ẩn nội dung trong phần tử HTML nhưng chiều cao chiều rộng không bị thay đổi (giống như nội dung không nhìn thấy nhưng vẫn ở đó):
visibility:hidden; Ẩn nội dung trong phần tử HTML
visibility:visible; Hiện nội dung trong phần tử HTML
<!DOCTYPE html>
<html>
<head>
<title>Giá trị hidden của thuộc tính visibility trong CSS</title>
<style>
div{width:100%; float:left; height:auto; background:#ddd; padding:10px; margin-bottom:15px}
</style>
</head>
<body>
<h1>Giá trị hidden của thuộc tính visibility trong CSS</h1>
<p>Giá trị visible để hiển thị, giá trị hidden để ẩn nội dung trong phần tử HTML nhưng chiều cao chiều rộng không bị thay đổi (giống như nội dung không nhìn thấy nhưng vẫn ở đó):</p>
<div>
visibility:hidden; <span style="visibility:hidden;">Ẩn nội dung</span> trong phần tử HTML
</div>
<div>
visibility:hidden; <span style="visibility:visible;">Hiện nội dung</span> trong phần tử HTML
</div>
</body>
</html>
Giá trị collapse của thuộc tính visibility trong CSS
Ẩn luôn cả hàng trong table, giống như hàng đó không tồn tại và cũng không chiếm chổ:
visibility: collapse;
<!DOCTYPE html>
<html>
<head>
<title>Giá trị collapse của thuộc tính visibility trong CSS</title>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Giá trị collapse của thuộc tính visibility trong CSS</h1>
<p>Ẩn luôn cả hàng trong table, giống như hàng đó không tồn tại và cũng không chiếm chổ:</p>
<h2>Trước khi dùng visibility:collapse;</h2>
<table>
<tr>
<td>Bùi Tấn lực</td>
<td>35</td>
</tr>
<tr>
<td>Nguyễn Thùy Dung</td>
<td>30</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>29</td>
</tr>
</table>
<h2>Sau khi dùng visibility:collapse;</h2>
<table>
<tr>
<td>Bùi Tấn lực</td>
<td>35</td>
</tr>
<tr style="visibility:collapse">
<td>Nguyễn Thùy Dung</td>
<td>30</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>29</td>
</tr>
</table>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính visibility trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
