Trong CSS, thuộc tính display được sử dụng để xác định loại hộp mà một phần tử tạo ra. Nó xác định hành vi bố cục của phần tử và cách nó tương tác với các phần tử khác trên trang. Dưới đây là một số giá trị chung cho thuộc tính display và giải thích của chúng:

1. khối:

   • Các phần tử có display: block; sẽ tạo ra một hộp cấp khối. Các phần tử này sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn.

    css
    div {
     display: block;
   }
   

2. nội tuyến:

   • Các phần tử có display: inline; sẽ tạo ra một hộp cấp độ nội tuyến. Các phần tử này sẽ chảy theo nội dung và chỉ chiếm nhiều chiều rộng nếu cần thiết.

    css
    span {
     display: inline;
   }
   

3. chặn Nội tuyến:

   • Các phần tử có display: inline-block; sẽ tạo ra một hộp cấp độ nội tuyến, nhưng chúng có thể được áp dụng các thuộc tính cấp khối. Điều này có nghĩa là chúng sẽ trôi chảy theo nội dung và vẫn cho phép bạn đặt chiều rộng, chiều cao, lề và phần đệm.

    css
    img {
     display: inline-block;
   }
   

4. không có:

   • Các phần tử có display: none; sẽ bị loại bỏ hoàn toàn khỏi bố cục, khiến chúng trở nên vô hình và không chiếm bất kỳ khoảng trống nào trên trang.

    css
    .hidden {
     display: none;
   }
   

5. uốn cong:

   • Các phần tử có display: flex; sẽ tạo ra một thùng chứa linh hoạt. Điều này cho phép bạn sử dụng mô hình bố cục flexbox cho các phần tử con.

    css
    .flex-container {
     display: flex;
   }
   

6. lưới:

   • Các phần tử có display: grid; sẽ tạo ra một thùng chứa lưới. Điều này cho phép bạn sử dụng mô hình bố cục lưới cho các phần tử con.

    css
    .grid-container {
     display: grid;
   }
   

Đây chỉ là một vài ví dụ và còn có nhiều giá trị hơn cho thuộc tính display . Việc lựa chọn giá trị display tùy thuộc vào bố cục bạn muốn đạt được và các yêu cầu cụ thể cho thiết kế của bạn.