Bài 24: Cách sử dụng Display trong css

Cách sử dụng Display trong css

Trong CSS, display được sử dụng để xác định cách hiển thị phần tử trên trang web. Các giá trị phổ biến của thuộc tính display bao gồm:

1. block: Hiển thị phần tử dưới dạng khối và chiếm toàn bộ chiều rộng của phần tử cha. Các phần tử khối thường được sử dụng để định dạng các phần tử lớn như tiêu đề, đoạn văn bản, các khối chứa danh sách hoặc bảng.

Ví dụ: 

div {
  display: block;
}

2. inline: Hiển thị phần tử dưới dạng nội dòng và kích thước phần tử chỉ phụ thuộc vào nội dung của nó. Các phần tử nội dòng thường được sử dụng để định dạng các phần tử nhỏ hơn như liên kết hoặc các phần tử trong văn bản.

Ví dụ: 

a {
  display: inline;
}

3. inline-block: Hiển thị phần tử dưới dạng nội dòng và cho phép định dạng kích thước và khoảng cách cho phần tử. Các phần tử nội dòng có khả năng định dạng kích thước và khoảng cách giống như các phần tử khối.

Ví dụ: 

span {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin-right: 10px;
}

4. none: Ẩn phần tử khỏi trang web. Phần tử không được hiển thị trên trang và không chiếm bất kỳ không gian nào trên trang.

Ví dụ: 

img {
  display: none;
}

5. flex: Hiển thị phần tử dưới dạng một hộp linh hoạt (flexbox) cho phép kiểm soát định dạng và sắp xếp các phần tử con bên trong phần tử đó.

Ví dụ: 

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

6. grid: Hiển thị phần tử dưới dạng một hộp lưới (grid) cho phép kiểm soát định dạng và sắp xếp các phần tử con bên trong phần tử đó.

Ví dụ: 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

Các giá trị khác của thuộc tính display bao gồm table, table-row, table-cell, list-item, inherit, và initial. Việc sử dụng giá trị phù hợp cho thuộc tính display sẽ giúp cho trang web của bạn trông chuyên nghiệp và dễ đọc hơn.