Lưới CSS - Thuộc tính display

display thuộc tính là thuộc tính CSS quan trọng nhất để kiểm soát布局.

Thuộc tính display

display thuộc tính xác định có/hoặc cách hiển thị phần tử.

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

Nhấp để hiển thị màn hình

Màn hình này chứa một phần tử <div>, nó được ẩn mặc định.（display: none)

Nó được thiết lập kiểu dáng bởi CSS, chúng ta sử dụng JavaScript để hiển thị nó. (Thay đổi display: block)

Phần tử khối (block element)

Các phần tử khối luôn bắt đầu từ dòng mới và chiếm toàn bộ chiều rộng có sẵn (nếu có thể thì kéo sang trái và phải).

Phần tử <div> này thuộc phần tử khối.

Một số ví dụ về phần tử khối:

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

Phần tử dòng (inline element)

Các phần tử dòng không bắt đầu từ dòng mới, chỉ chiếm chiều rộng cần thiết.

Đây là đoạn văn bảnPhần tử dòng <span>.

Một số ví dụ về phần tử dòng:

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

Display: none;

display: none; thường được sử dụng cùng với JavaScript để ẩn và hiển thị phần tử mà không cần xóa và tạo lại chúng. Nếu bạn muốn biết cách thực hiện mục tiêu này, hãy xem ví dụ cuối cùng trên trang này.

mặc định,<script> phần tử sử dụng display: none;.

Thay thế giá trị Display mặc định

Như đã nói, mỗi phần tử đều có một giá trị display mặc định. Nhưng bạn có thể thay thế nó.

Chuyển đổi phần tử dòng thành phần tử khối và ngược lại, rất hữu ích để hiển thị trang web theo một cách nhất định đồng thời vẫn tuân thủ các tiêu chuẩn Web.

Một ví dụ phổ biến là tạo các phần tử dòng để thực hiện menu ngang. <li> phần tử:

thực thể

li {
  display: dòng;
}

Thử trực tiếp

Lưu ý:thiết lập thuộc tính display của phần tử chỉ sẽ thay đổicách hiển thị của phần tửvà không thay đổi loại phần tử. Do đó, phần tử có display: block; phần tử trong dòng không được phép chứa các phần tử khối khác.

Dưới đây là ví dụ để hiển thị phần tử <span> như một phần tử khối:

thực thể

span {
  display: block;
}

Thử trực tiếp

Dưới đây là ví dụ để hiển thị phần tử <a> như một phần tử khối:

thực thể

a {
  display: block;
}

Thử trực tiếp

Ẩn phần tử - display: none hay visibility: ẩn?

display: none

visibility: ẩn

Đặt lại

Bằng cách đặt display thuộc tính được thiết lập none Có thể ẩn phần tử. Phần tử sẽ được ẩn và trang web sẽ hiển thị như thể phần tử không có trong đó:

thực thể

h1.ẩn {
  display: none;
}

Thử trực tiếp

visibility: ẩn; Cũng có thể ẩn phần tử.

Nhưng, phần tử này vẫn sẽ chiếm không gian tương đương với trước. Phần tử sẽ được ẩn, nhưng vẫn sẽ ảnh hưởng đến bố cục:

thực thể

h1.ẩn {
  visibility: hidden;
}

Thử trực tiếp

Thêm các ví dụ

Sự khác biệt giữa display: none; và visibility: hidden;
Ví dụ minh họa display: none; VS visibility: hidden;
Kết hợp sử dụng CSS và JavaScript để hiển thị nội dung
Ví dụ này minh họa cách sử dụng CSS và JavaScript để hiển thị phần tử khi nhấp vào.

Thuộc tính CSS Display/Visibility

Thuộc tính Mô tả
display Đ指定 phần tử nên hiển thị như thế nào.
visibility Đ指定 phần tử có nên hiển thị hay không.