CSS Display

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    577 lượt xem


Thuộc tính display là thuộc tính quan trọng nhất để kiểm soát bố cục trong CSS.

Display Property

Thuộc tính display chỉ cách mà một element được hiển thị.

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

Block Elements

Một element có display block luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể).

Các element tiêu biểu:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline Elements

Một element có display inline không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết.

Đây là element <span> bên trong một paragraph.

Các element tiêu biểu:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; thường được sử dụng với JavaScript để ẩn và hiển thị các element mà không cần xóa và tạo lại chúng.

Element <script> sử dụng display: none; như mặc định.

Ghi đè giá trị display mặc định

Như đã đề cập, mọi element đều có giá trị display mặc định. Tuy nhiên, bạn có thể ghi đè nó.

Thay đổi element inline thành element block hoặc ngược lại, có thể hữu ích để làm cho trang trông theo một cách cụ thể và vẫn tuân theo các tiêu chuẩn web.

Một ví dụ phổ biến là tạo các element <li> inline cho các menu ngang:

li {    display: inline;  }

 

Lưu ý: Việc đặt thuộc tính display của element chỉ thay đổi cách phần tử được hiển thị, KHÔNG phải loại element đó là gì. Vì vậy, một phần tử inline với display: block; không được phép có các element block khác bên trong nó.

Ví dụ sau đây hiển thị các element <span> dưới dạng các phần tử khối:

span {    display: block;  }

Ví dụ sau đây hiển thị các element <a> dưới dạng các phần tử khối:

a {    display: block;  }

 

Ẩn Element so sánh - display:none và visibility:hidden?

Việc ẩn một element có thể được thực hiện bằng cách đặt thuộc tính display: none;. Element sẽ bị ẩn và trang sẽ được hiển thị như thể element không có ở đó:

h1.hidden {    display: none;  }

visibility:hidden; cũng có thể ẩn element.

Tuy nhiên, element sẽ vẫn chiếm vị trí như trước. Element sẽ bị ẩn, nhưng vẫn ảnh hưởng đến bố cục:

h1.hidden {    visibility: hidden;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.