CSS Display – Serie CSS – Phần 9

Display là gì?

Thuộc tính Display trong CSS có nhiệm vụ quy định cách mà một phần tử sẽ được hiển thị trên trang web. Có nhiều giá trị khác nhau mà bạn có thể đặt cho thuộc tính Display, bao gồm Block, Inline block, Flex, Grid và Webkit box.

Display Block

Khi bạn đặt giá trị Display là Block, phần tử sẽ chiếm toàn bộ chiều rộng của trang web và sẽ bắt đầu từ dòng mới.

Display Inline block

Khi đặt giá trị Display là Inline block, phần tử sẽ chỉ chiếm đủ không gian mà nó cần và sẽ không bắt đầu từ dòng mới.

Display Flex

Khi đặt giá trị Display là Flex, bạn sẽ có thể sắp xếp các phần tử con trong một phần tử cha theo hàng hoặc cột một cách linh hoạt. Bạn có thể xem thêm tại đây

Display Grid

Khi đặt giá trị Display là Grid, bạn có thể tạo ra một lưới gồm nhiều hàng và cột để sắp xếp các phần tử. 

Display Webkit box

Giá trị Display Webkit box được sử dụng để tạo ra một hộp hiển thị dựa trên Webkit, một thư viện mã nguồn mở được sử dụng bởi nhiều trình duyệt web.

Cách sử dụng

Để sử dụng thuộc tính Display, bạn cần thêm nó vào trong phần CSS của phần tử mà bạn muốn thay đổi. Ví dụ:

div {
  display: flex;
}
 

Khi nào nên sử dụng

Thuộc tính Display rất linh hoạt và có thể sử dụng trong nhiều trường hợp khác nhau. Bạn nên sử dụng Display Block khi muốn phần tử chiếm toàn bộ chiều rộng của trang web và bắt đầu từ dòng mới. Display Inline block phù hợp khi bạn muốn phần tử chỉ chiếm đủ không gian mà nó cần và không bắt đầu từ dòng mới. Display Flex và Display Grid rất hữu ích khi bạn muốn sắp xếp các phần tử con trong một phần tử cha.

Cùng ví dụ để dễ hiểu hơn về khái niệm cũng như các thuộc tính:

Sự khác biệt giữa Inline và Inline-block

Mặc dù cả hai giá trị Inline và Inline-block đều không bắt đầu từ dòng mới, nhưng có một sự khác biệt quan trọng. Khi bạn đặt giá trị Display là Inline, bạn không thể đặt chiều cao và chiều rộng cho phần tử. Tuy nhiên, nếu bạn đặt giá trị Display là Inline-block, bạn có thể đặt chiều cao và chiều rộng cho phần tử.

Hy vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về thuộc tính Display trong CSS. Hãy thử sử dụng nó trong dự án tiếp theo của bạn và xem sự khác biệt mà nó mang lại.

Kết luận

Vậy là chúng ta đã tìm hiểu xong về thuộc tính Display trong CSS. Qua bài viết này, ta đã hiểu rõ được Display Block, Inline block, Flex, Grid và Webkit box là như thế nào, cách sử dụng chúng như thế nào và khi nào nên sử dụng chúng. Đặc biệt, chúng ta cũng đã nắm được sự khác biệt giữa Inline và Inline-block. Hi vọng rằng với những kiến thức này, bạn sẽ tạo ra được những trang web thật sự ấn tượng và phù hợp với người dùng.