Thuộc tính visibility trong CSS

Thuộc tính visibility

Thuộc tính visibility dùng để điều khiển việc dựng box (hộp) của phần tử, có thể ẩn đi phần tử.

Bạn có thể sử dụng thuộc tính visibility để cho biết phần tử sẽ hiện thị khi trình duyệt dựng trang hoặc không hiện thị, dù không hiện thị nhưng phần tử không bị loại ra khỏi luồng dựng trang mặc định (có nghĩa chiếm chỗ của nó trong luồng vẫn hiệu lực).

Cú pháp:

visibility: visible | hidden | collapse | inherit

Ý nghĩa các giá trị như sau:

visible

Đây là giá trị mặc định, các phần tử khởi đầu sẽ là hiện thị trong trang

hidden

Không hiện thị phần tử (phần tử là trong suốt) nhưng không loại bỏ phần tử khỏi luồng dàn phần tử của trang. Không gian chiếm chỗ bởi phẩn tử vẫn để dành cho nó như là nó đang hiện thị.

Có ví dụ sau:

<style>
    .wrap-content {
        padding: 5px;
        background-color: #00bcd4;
    }
    .ele {
        display: inline-block;
        background-color: #ff5722;
        padding: 10px;
    } 
</style>

<div class="wrap-content">
    <div class="ele">PHẦN TỬ 1</div>
    <div class="ele">PHẦN TỬ 2</div>
    <div class="ele">PHẦN TỬ 3</div>
</div>>

Kết quả:

Giờ cho box phần tử 2 có visibly là hidden.

<style> 
    .ele-hidden {
        visibility: hidden;
    }
</style>

<div class="wrap-content">
    <div class="ele">PHẦN TỬ 1</div>
    <div class="ele ele-hidden">PHẦN TỬ 2</div>
    <div class="ele">PHẦN TỬ 3</div>
</div>>

Phần tử đã ẩn (những không gian nó chiếm chỗ vẫn còn nguyên - như là nó đang hiện thị)

Nếu ẩn phần tử bằng display: none; thì phần tử đó bị loại khỏi luồng dàn trang phần tử (phần tử như là không có - do vậy nó không hề chiếm chỗ trong trang).

<div class="wrap-content">
    <div class="ele">PHẦN TỬ 1</div>
    <div class="ele" style="display: none">PHẦN TỬ 2</div>
    <div class="ele">PHẦN TỬ 3</div>
</div>>

collapse

Nếu visibility có giá trị collapse thì phần tử bị ẩn, nhưng ứng sử có khác nhau tùy vào loại phần tử

• Với các hàng, cột trong bảng <table> thì nó ẩn phần tử - và không gian chiếm chỗ bị thu hồi (giống display: none).
• Sử dụng cho các mục của FlexBox , thì nó ẩn phần tử - và không gian chiếm chỗ bị thu hồi
• Các trường hợp khác ứng xử giống giá trị hidden