Bùi Tấn Lực - 18
- 01/10/2025
Bùi Tấn Lực 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:
Thuộc tính visibility trong CSS
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á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 ở đó):
<!DOCTYPE html>
<html>
<head>
<title>Giá trị hidden của thuộc tính visibility trong CSS</title>
<style>
.visible{visibility:visible}
#hidden{visibility:hidden}
</style>
</head>
<body>
<h1>Giá trị hidden của thuộc tính visibility trong CSS</h1>
<p class="visible">Giá trị visible của thuộc tính visibility trong CSS</p>
<p id="hidden">Giá trị hidden của thuộc tính visibility trong CSS</p>
<p class="visible">Giá trị visible của thuộc tính visibility trong CSS</p>
</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ổ:
<!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;
}
#collapse{visibility:collapse}
</style>
</head>
<body>
<h1>Giá trị collapse của thuộc tính visibility trong CSS</h1>
<table>
<tr>
<td>Bùi Tấn lực</td>
<td>35</td>
</tr>
<tr id="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 *
