Sự khác biệt giữ display:none và visibility:hidden

Sự khác biệt giữ display:none và visibility:hidden
Thông thường, để ẩn hiện những thứ không mong muốn trong một website đối với CSS thì thông thường chúng ta sẽ sử dụng hai thuộc tính đó là display: none, và visibility: hidden. Khá chắc rằng nhiều người khi mới bước vào học thiết kế website, thì mười người có tới bảy đến tám người chẳng ai biết cái hai thuộc tính này khác nhau ở chỗ nào. Do đó tiện đây mình lập ra bài viết ngắn này, giúp các bạn hiểu được nó khác biết nhau ở chỗ nào.

Sự khác biệt giữ display:none và visibility:hidden

Để hiểu rõ được sử khác biệt của chúng đầu tiên xin mình giới thiệu sơ qua về cách làm ẩn hiện đối tượng sử dụng hai thuộc tính này.

Đối với display: none, thông thường nhất chúng ta sử dụng hai thuộc tính cơ bản sau:
  • display: block (Hiện)
  • display: none (Ẩn)

Đối với visibility: hidden, thông thường cũng sử dụng hai thuộc tính:
  • visibility: visible (Hiện)
  • visibility: hidden (Ân)

Bây giờ để nhìn vào là biết ngay thì mình sẽ tạo ra ba đối tượng, mình sẽ sử dụng hai thuộc tính này cho vào đối tượng ở giữa và bạn sẽ nhận ra được ngay nó khác biệt nhau ở chỗ nào. Mỗi đối tượng dưới đây mà mình tạo chúng sẽ có màu sắc theo thứ tự đỏ, xanh lá, xanh biển.

ĐỐI TƯỢNG 1ĐỐI TƯỢNG 2ĐỐI TƯỢNG 3

Đối với display: none


ĐỐI TƯỢNG 1ĐỐI TƯỢNG 2ĐỐI TƯỢNG 3

đối tượng thứ hai (xanh lá) đã bị ẩn đi còn một thứ gì hết, ý mình là không gian mà nó chiếm dụng của đối tượng thứ hai như bạn thấy nó đã mất đi chứ không chỉ là phần chữ viết trong nó.

Đối với visibility: hidden


ĐỐI TƯỢNG 1ĐỐI TƯỢNG 2ĐỐI TƯỢNG 3

khác với display: none thuộc tính này làm cho đối tượng thứ hai (xanh lá) chỉ ẩn đi phần chữ viết, nhưng không gian mà đối tượng chiếm dụng vẫn sẽ còn đó, không hề bị mất đi.

Lời kết

Qua các ví dụ trên thì mình đã giải thích xong sử khác biệt giữa hai thuộc tính này, mong rằng sau khi mọi người hiểu được sự khác biệt nho nhỏ này, các bạn sẽ biết phải sử dụng nó cho các trường hợp nào trên các website của riêng mỗi người.

2 bình luận

  1. avatar says

    lúc 10:42 26 tháng 3, 2015

    cảm ơn bạn! bài viết của bạn hay, đúng cái mình đang tìm hiểu

  2. avatar says

    lúc 11:37 26 tháng 3, 2015

    Thế quá tốt rồi :D

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.