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 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ộ