HTML/CSS | So sánh display, opacity và visibility

Học HTML, CSS từ Zero Tới Hero

• Giống và khác nhau
• Trường hợp sử dụng
• display: none
• opacity: 0
• visibility: hidden

Trong bài này chúng ta sẽ tìm hiểu về trường hợp sử dụng của 3 thuộc tính:

• display: none
• opacity: 0
• visibility: hidden

Giống và khác nhau

#	display: none	opacity: 0	visibility: hidden
Ẩn khỏi giao diện	✅	✅	✅
Chiếm không gian	❌	✅	✅
Có thể tương tác	❌	✅	❌
Ẩn phần tử con	✅	✅	✅
Tính thừa kế	❌	❌	✅
Hiển thị phần tử con	❌	❌	✅
Hỗ trợ Animations	❌	✅	✅

Trường hợp sử dụng

display: none

• Ẩn và loại bỏ không gian/diện tích của phần tử khỏi bố cục trang web
• Không cần hiệu ứng chuyển tiếp (transition)

opacity: 0

• Tăng/giảm độ mờ của phần tử HTML trên giao diện trang web
• Kết hợp với transition để tạo hiệu ứng chuyển tiếp như:
  • Fade in: từ từ hiện lên
  • Fade out: từ từ ẩn đi

visibility: hidden

• Ẩn phần tử mà không làm thay đổi bố cục trang web (không gian của phần tử không bị loại bỏ)
• Kết hợp với transition và opacity để tạo hiệu ứng chuyển tiếp như:
  • Fade in: từ từ hiện lên
  • Fade out: từ từ ẩn đi