Tìm hiểu cách hiển thị một phần tử trên trang web bằng thuộc tính Display

Chào các bạn, nối tiếp các bài tự học HTML cơ bản, lethach.com cũng đang biên tập một Series các bài tự học CSS cơ bản nữa, để phục vụ các bạn đang bắt đầu học thiết kế web. Series tự học CSS này do bạn Lê Văn Thạch biên soạn và trình bày. Mọi ý kiến đóng góp hoặc thắc mắc, vui lòng liên hệ admin để được hỗ trợ nhiệt tình nhé!

Hôm nay lethach.com sẽ giới thiệu đến bạn một thuộc tính mới. Đó là thuộc tính display, nó quy định cụ thể làm thế nào để một phần tử được hiển thị.

Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặc inline.

Các phần tử khối (hay còn gọi là dạng Block)

Block: Các phần tử sẽ được nằm một hàng riêng biệt khi hiển thị.

Ví dụ như các thẻ <div>, <h1> - <h6> , <p> , <from>, < header> , <footer >,…. là các phần tử block

Các phần tử nội tuyến (hay còn gọi là Inline)

Inline: Các phần tử này sẽ hiển thị trên cùng một hàng trên nội dung khác.

Ví dụ như các thẻ <span>, <a>, <img>,.. là các phần tử inline.

Ẩn phần tử (display: none)

Thường được sử dụng cùng với JavaScript để ẩn và hiển thị các phần tử mà ta không cần phải xóa hay tạo lại chúng.
Thẻ <script> tự sử dụng display: none; làm mặc định.

Ghi đè giá trị hiển thị mặc định:

Như đã đề cập, mọi phần tử đều có giá trị hiển thị mặc định. Tuy nhiên, bạn có thể ghi đè lên chính nó.

Bạn có thể chuyển từ một phần tử nội tuyến (Inline) sang một phần tử khối (Block) hoặc ngược lại.

Một ví dụ thường gặp là tạo các thẻ <li> yếu tố nội tuyến cho các menu ngang:

Ví dụ:

li {
   display: inline;
}

Lưu ý: Việc đặt thuộc tính hiển thị của phần tử chỉ thay đổi cách hiển thị của phần tử, không quan tâm đến phần tử đó là gì đi nữa. Vì vậy, một yếu tố nội tuyến display:block; không được phép có các phần tử khối khác ở bên trong nó.

Ví dụ sau hiển thị các phần tử <span> như các phần tử khối:

span {
   display: block;
}

Ví dụ sau hiển thị các phần tử <a> làm phần tử khối:

a {
  display:block;
}

Sự khác biệt giữa ẩn phần tử bằng display: none hoặc visibility: hidden ?

Ẩn một phần tử có thể được thực hiện bằng cách thiết lập thuộc tính display:none;. Phần tử sẽ bị ẩn và trang sẽ được hiển thị như thể phần tử không có ở đó:

Ví dụ:

h1.hidden {
  display: none;
}

visibility:hidden; cũng ẩn một phần tử.

Tuy nhiên, phần tử vẫn sẽ chiếm không gian tương tự như trước đây. Phần tử sẽ bị ẩn nhưng vẫn ảnh hưởng đến bố cục

Ví dụ :

h1.hidden {
  visibility: hidden;
}

Chỉ vậy thôi, các bạn nên nhớ là CSS luôn tồn tại một thuộc tính tên là display để đổi kiểu hiển thị cho phần tử là được vì chắc chắn sau này bạn sẽ sử dụng rất nhiều khi thực hành thực tế.