Leaderboard ads banner

CSS Hiển Thị

Thuộc tính display 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ế.

Để học tốt thì chúng ta phải kết hợp giữa việc học đi đôi với hành, hãy cùng nhau làm những bài tập thực hành đơn giản theo đường dẫn bên dưới nhé. Nó sẽ giúp chúng ta học tập tốt hơn nhiều đó.

https://www.codehub.vn/Hoc-CSS/CSS-Hien-Thi/challenges

Nội dung không được để trống

Hướng Dẫn Liên Quan