Hiển thị: không có trong CSS

Trong HTML, giá trị thuộc tính hiển thị mặc định được lấy từ thông số kỹ thuật HTML hoặc từ biểu định kiểu mặc định của trình duyệt/người dùng. Giá trị mặc định trong XML là nội tuyến, bao gồm các phần tử SVG

Đưa ra bản chạy thử ❯

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Hiển thị tài sản4. 08. 03. 03. 17. 0

Ghi chú. Các giá trị "flex" và "inline-flex" yêu cầu tiền tố -webkit- để hoạt động trong Safari

Ghi chú. "trưng bày. nội dung" không hoạt động trong Edge trước phiên bản 79

Cú pháp CSS

Giá trị tài sản

ValueDescriptionPlay itinlineHiển thị phần tử dưới dạng phần tử nội tuyến (như ). Mọi thuộc tính chiều cao và chiều rộng sẽ không có hiệu lực Bản trình diễn ❯khốiHiển thị phần tử dưới dạng phần tử khối (như

). Nó bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng

Thêm ví dụ

Thí dụ

Minh họa cách sử dụng giá trị thuộc tínhcontent. Trong ví dụ sau đây. một vùng chứa sẽ biến mất và tạo các phần tử con (. b) con của phần tử cấp độ tiếp theo trong DOM

Một phần tử khối luôn được 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 từ bên trái qua bên phải xa hết mức có thể)

Ví dụ. Các

sẽ tạo một phần tử khối, nó được bắt đầu ở một dòng mới và có thể có chiều dài hết hạn

Dưới đây là một số thẻ có loại phần tử khối (khối)

Kiểu phần tử nội tuyến (Inline Element)

Một phần nội tuyến KHÔNG bắt đầu trên một dòng mới

Ví dụ. đây là một phần tử nội tuyến nằm trên cùng một dòng của phần tử tồn tại trước đó (nếu phần tử đó cũng thuộc loại nội tuyến)

Như đã biết mọi phần tử trên trang HTML đều có dạng chữ nhật (xem mô hình hộp chữ nhật phần tử trong CSS). Kiểu hộp sẽ ảnh hưởng đến định dạng của nó trên trang

Có hai cách định dạng định dạng cho phần tử chữ nhật là. inline and block (xem thêm Phần tử HTML Inline và Block)

Định dạng nội tuyến

Định dạng inline (cấp độ inline), thì hộp phần tử đi theo luồng của dòng, nó không tạo ngắt dòng. Các phần tử mặc định của hộp định dạng ban đầu của nó là inline as inline. , , , , . This element section as a section of line.

To setting setting section on inline as a CSS cú pháp

display: inline;

Đây là đoạn văn trong 
    paragraph, 
    ví dụ có chứa strong là inline.

Đây là đoạn văn trong đoạn văn, ví dụ có chứa Strong is inline

Định dạng phần tử nội tuyến có thể thiết lập có phần đệm, lề nhưng không thiết lập được chiều rộng và chiều cao (dù có thiết lập thì cũng không có tác dụng gì). Ngoài ra chú thích, phần đệm và lề nếu thiết lập nó sẽ hỗ trợ các phần tử khác giãn ra theo chiều ngang và không tác dụng hỗ trợ các phần tử theo chiều đứng

inline-block inline format

Định dạng một phần tử giống như định dạng nội tuyến, tuy nhiên cho phép thiết lập chiều rộng và phần nội dung cao, nó thư giãn các phần tử ngang, dọc phù hợp với kích thước của nó. That is inline-block inline inline section. cú pháp

display: inline-block;

Đây là đoạn văn trong 
    paragraph, 
    ví dụ có chứa strong là inline-block.

Đây là đoạn văn trong đoạn văn, ví dụ có chứa Strong là inline-block

Định dạng khối

Cú pháp CSS

display: block;

Định dạng khối định dạng cấp độ của phần tử là những phần tử không đứng cùng hàng với phần tử khác, nó ngắt dòng để tạo dòng mới và chiều ngang mở rộng tối đa có thể (tối đa kích thước theo kích thước phần tử chứa). Khối phần tử có thể thiết lập chiều rộng, cao cho nó. Please respect rule. khối phần tử có thể chứa khối phần tử khác, chứa phần tử nội tuyến, khối nội tuyến. Còn phần tử nội tuyến thì không nên chứa khối (có một số ngoại lệ như phần tử ). Default default section is block as

...

Ẩn phần tử - hiển thị. không ai

Cú pháp CSS

display: none;

Phần tử sẽ bị ẩn đi, bị loại bỏ hoàn toàn khỏi thị trường hiện tại của trang, trình duyệt không xây dựng nội dung của phần tử - mà sẽ có nó như không có. Thuộc tính này hữu ích khi sử dụng với phản hồi Javascript hoặc viết CSS (ẩn/hiện tùy thuộc vào kích thước màn hình)

Ẩn phần tử - hiển thị. mục danh sách

Cú pháp CSS

display: list-item;

Cho biết sẽ tạo ra các phần tử dưới dạng danh sách (các phần tử tương tự

• trong HTML).

  
  
      Phần tử 1
      Phần tử 2
      Phần tử 3
  

  Phần tử 1 Phần tử 2 Phần tử 3

  ---

  Thuộc tính hiển thị còn nhận các giá trị khác, sẽ được trình bày ở các mục riêng như. flex, inline-flex để bố cục trang, grid và inline-grid để tạo lưới bố cục cục bộ