Các visibilitybất động sản trong CSS có hai chức năng khác nhau. Nó ẩn các hàng và cột của bảng, và nó cũng ẩn một phần tử mà không thay đổi bố cục.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilitycó bốn giá trị hợp lệ: visible, hidden, collapse, và inherit. Chúng tôi sẽ đi qua từng người trong số họ để tìm hiểu thêm.
có thể nhìn thấy
Giống như âm thanh, visiblelàm cho mọi thứ hiển thị. Không có gì bị ẩn theo mặc định, vì vậy giá trị này không có tác dụng gì trừ khi bạn đã đặt hiddentrên phần tử này hoặc phần tử gốc của phần tử này.
ẩn
Các hidden giá trị ẩn thứ. Điều này khác với việc sử dụng display: none, vì hidden chỉ ẩn các phần tử một cách trực quan. Phần tử vẫn ở đó và vẫn chiếm dung lượng trên trang, nhưng bạn không thể nhìn thấy nó nữa (giống như chuyển độ mờ về 0). Điều thú vị là thuộc tính này không kế thừa theo mặc định. Điều đó có nghĩa là, không giống như các thuộc tính display hoặc opacity, bạn có thể tạo một phần tử hiddenvà vẫn có một trong các phần tử con của nó visiblenhư sau:
Lưu ý rằng, trong khi ẩn, phần tử mẹ không kích hoạt :hover.
sự sụp đổ
Điều này chỉ ảnh hưởng đến các hàng trong bảng ( ), nhóm hàng (như ), cột ( ), nhóm cột ( ) hoặc các phần tử được tạo theo cách đó thông qua display).
Không giống như hidden, giá trị này ẩn phần tử con của bảng mà không để lại khoảng trống ở vị trí của nó. Nếu được sử dụng ở bất kỳ đâu ngoại trừ phần tử con của bảng, nó hoạt động như thế nào visibility: hidden.
Có rất nhiều điều kỳ quặc với điều này, thật khó để biết bắt đầu từ đâu. Chỉ như một món khai vị:
- Chrome / Safari sẽ thu gọn một hàng, nhưng không gian mà hàng đó chiếm sẽ vẫn còn. Và nếu các ô của bảng bên trong có đường viền, thì đường viền đó sẽ thu gọn thành một đường viền duy nhất dọc theo cạnh trên cùng.
- Chrome / Safari sẽ không thu gọn một cột hoặc nhóm cột.
- Safari thu gọn một ô trong bảng (sai) nhưng Chrome thì không (đúng).
- Trong bất kỳ trình duyệt nào, nếu một ô nằm trong cột bị thu gọn (cho dù nó có thực sự thu gọn hay không) thì văn bản trong ô đó sẽ không được hiển thị.
- Opera (trước WebKit) sẽ thu gọn tất cả mọi thứ, ngoại trừ một ô trong bảng (đúng như vậy).
Có nhiều hơn nữa, nhưng về cơ bản: không sử dụng cái này bao giờ.
thừa kế
Giá trị mặc định. Điều này chỉ đơn giản là làm cho phần tử kế thừa giá trị của phần tử gốc của nó.
Flexbox
visibility: collapse; cũng được sử dụng trong Flexbox và được định nghĩa rõ ràng hơn.
Hỗ trợ trình duyệt
Những điều cơ bản, không xem xét tất cả các điều kỳ quặc với sự sụp đổ:
| Bất kì | Bất kì | Bất kì | 4+ | 4+ | Bất kì | Bất kì |
IE 7- không hỗ trợ collapsehoặc inherit.