Bố cục CSS - Thuộc tính hiển thị
Thuộc tính display là thuộc tính CSS quan trọng nhất để kiểm soát bố cục.
Thuộc tính hiển thị
Thuộc tính display được sử dụng để chỉ định cách hiển thị một phần tử trên trang web.
Mọi phần tử HTML đều 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 thành phần là block hoặc inline .
Thuộc tính display được sử dụng để thay đổi hành vi hiển thị mặc định của các phần tử HTML.
Các phần tử cấp khối
Phần tử cấp khối LUÔN 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 (kéo dài sang trái và phải xa nhất có thể).
Ví dụ về các phần tử cấp khối:
- <div>
- <h1> - <h6>
- <p>
- <biểu mẫu>
- <tiêu đề>
- <chân trang>
- <phần>
Các phần tử nội tuyến
Phần tử nội tuyến KHÔNG bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng nếu cần thiết.
Đây là phần tử <span> nội tuyến bên trong một đoạn văn.
Ví dụ về các phần tử nội tuyến:
- <nhịp>
- <a>
- <hình>
Giá trị thuộc tính hiển thị
Thuộc tính display có nhiều giá trị:
| Value | Description |
|---|---|
| inline | Displays an element as an inline element |
| block | Displays an element as a block element |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM |
| flex | Displays an element as a block-level flex container |
| grid | Displays an element as a block-level grid container |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values |
| inline-flex | Displays an element as an inline-level flex container |
| inline-grid | Displays an element as an inline-level grid container |
| inline-table | The element is displayed as an inline-level table |
| list-item | Let the element behave like a <li> element |
| run-in | Displays an element as either block or inline, depending on context |
| table | Let the element behave like a <table> element |
| table-caption | Let the element behave like a <caption> element |
| table-column-group | Let the element behave like a <colgroup> element |
| table-header-group | Let the element behave like a <thead> element |
| table-footer-group | Let the element behave like a <tfoot> element |
| table-row-group | Let the element behave like a <tbody> element |
| table-cell | Let the element behave like a <td> element |
| table-column | Let the element behave like a <col> element |
| table-row | Let the element behave like a <tr> element |
| none | The element is completely removed |
| initial | Sets this property to its default value |
| inherit | Inherits this property from its parent element |
Không trưng bày;
display: none; thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không cần xóa và tạo lại chúng. Hãy xem ví dụ cuối cùng của chúng tôi trên trang này nếu bạn muốn biết làm thế nào có thể đạt được điều này.
Phần tử <script> sử dụng display: none; như mặc định.
Bấm để hiển thị bảng điều khiển
Bảng này chứa phần tử <div>, được ẩn theo mặc định ( display: none; ).
Nó được tạo kiểu bằng CSS và chúng tôi sử dụng JavaScript để hiển thị nó (đổi nó thành ( display: block; ).
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 điều này.
Việc thay đổi phần tử nội tuyến thành phần tử khối hoặc ngược lại có thể hữu ích để làm cho trang có giao diện cụ thể mà vẫn tuân theo các tiêu chuẩn web.
Một ví dụ phổ biến là tạo các phần tử <li> nội tuyến cho các menu ngang:
Lưu ý: Việc đặt thuộc tính hiển thị của một phần tử chỉ thay đổi cách hiển thị phần tử đó , KHÔNG thay đổi loại phần tử đó. Vì vậy, một phần tử nội tuyến có 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> dưới dạng phần tử khối:
Ví dụ sau hiển thị các phần tử <a> dưới dạng các phần tử khối:
Ẩn một phần tử - hiển thị: không có hoặc hiển thị: ẩn?
display:none
visibility:hidden
Cài lại
Việc ẩn một phần tử có thể được thực hiện bằng cách đặt thuộc tính display thành none . Phần tử sẽ bị ẩn và trang sẽ được hiển thị như thể phần tử không có ở đó:
visibility:hidden; cũng ẩn một phần tử.
Tuy nhiên, phần tử vẫn sẽ chiếm không gian như trước. Phần tử sẽ bị ẩn nhưng vẫn ảnh hưởng đến bố cục:
Thêm ví dụ
Sự khác biệt giữa màn hình: không có; và khả năng hiển thị: ẩn;
Ví dụ này minh họa display: none; so với khả năng hiển thị: ẩn;
Hiển thị nhiều kiểu hiển thị hơn
Ví dụ này minh họa thêm một số kiểu hiển thị.
Sử dụng CSS cùng với 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ị một phần tử khi nhấp chuột.
Thuộc tính hiển thị/hiển thị CSS
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |
