Tự học CSS: Thuộc tính display và visibility

Bài viết tiếp theo trong series Tự học CSS, mình xin chia sẻ với các bạn về 2 thuộc tính là display và visibility. Nhưng tại sao mình lại đề cập đến cả 2 thuộc tính đó trong bài này? Trước hết chúng ta hãy cùng tìm hiểu về chúng.

I. Thuộc tính display - Quy định cách hiển thị của phần tử trên trang web:

1. Cấu trúc khai báo:

.class { display: giá trị }

#id { display: giá trị }

keyword { display: giá trị }

2. Một số giá trị và ý nghĩa: (vì mục đích chủ yếu của bài này là phân biệt 2 thuộc tính nên mình sẽ chỉ nêu ra một số giá trị chính)

- display: inline (Dạng mặc định - Phần tử hiển thị bình thường)
- display: block (Phần tử hiển thị dạng khối, độc lập với các phần tử đứng trước và sau nó)
- display: inline-block (Phần tử cũng hiển thị dạng khối, nhưng là một khối nội tuyến)
- display: none (Phần tử không hiển thị và coi như trang web không có phần tử đó, nhưng trình duyệt vẫn load code của nó)

II. Thuộc tính visibility - Quy định cách được nhìn thấy của phần tử trên trang web:

1. Cấu trúc khai báo:

.class_thuoc_tinh { visibility: giá trị }

#id_thuoc_tinh { visibility: giá trị }

keyword { visibility: giá trị }

2. Một số giá trị và ý nghĩa:

- visibility: visible (Dạng mặc định - Phần tử được nhìn thấy bình thường)
- visibility: hidden (Phần tử sẽ không được nhìn thấy)

III. Phân biệt:

- Đây chính là phần mình muốn đề cập nhất trong bài này. Về cơ bản 2 thuộc tính này gần giống nhau, với những bạn mới tìm hiểu về CSS thì rất có thể sẽ dễ lầm tưởng rằng chúng có thể thay thế cho nhau. Mình xin nêu ra một vài chú ý dưới đây để các bạn tham khảo:

+ Khi sử dụng thuộc tính display: none, phần tử gần như được xóa hẳn khỏi trang web và coi như bạn chưa từng tạo nó.

+ Khi sử dụng thuộc tính visibility: hidden, phần tử không được nhìn thấy nhưng vẫn chiếm một phần diện tích của nó trên trang web, nghĩa là nó chỉ như đang "tàng hình" mà thôi.

Đó là một vài lưu ý cho các bạn khi sử dụng 2 thuộc tính trên. Hy vọng rằng qua bài viết này các bạn vừa biết cách thức sử dụng, vừa biết cách phân biệt chúng trong lập trình CSS nói riêng và lập trình web nói chung.

Chúc các bạn thành công !