Thuộc tính display

Thuộc tính display
Thuộc tính display

Với thuộc tính display. Chúng ta có quy định cách mà một phần tử và các phần tử con của nó hiển thị. Nhờ vậy, chúng ta có thể xây dựng bố cục cho trang web.

Cú pháp

Cũng tương tự với các thuộc tính CSS khác. Khi sử dụng thuộc tính display, cú pháp của chúng ta là:

Thuộc tính display có thể nhận một trong những giá trị sau:

  • none
  • inline
  • block
  • contents
  • flex
  • grid
  • inline-block
  • inline-flex
  • inline-grid
  • inline-table
  • list-item
  • run-in
  • table
  • table-caption
  • table-column-group
  • table-header-group
  • table-footer-group
  • table-row-group
  • table-cell
  • table-column
  • table-row

Trong phạm vi bài viết hiện tại, mình sẽ bàn đến các giá trị được in đậm trong danh sách phía trên. Trong bài viết này, mình sẽ tập trung giải thích về ý nghĩa, cách sử dụng thuộc tính display.

Nâng cao hơn, chúng ta sẽ có bài viết kế tiếp sử dụng giá trị flex và sử dụng giá trị grid để xây dựng bố cục cho trang web.

Phân nhóm các thuộc tính

Để hiểu rõ hơn về các thuộc tính, mình sẽ gom chúng vào các nhóm nhỏ. Qua đó, chúng ta sẽ dễ dàng hiểu và sử dụng chúng hơn.

Outside

Những giá trị này sẽ tác động trực tiếp lên cách hiển thị của phần tử. Chúng gồm:

  • block: Phần tử có giá trị display bằng block sẽ được trình duyệt hiển thị kèm với một dòng trống ở phía trước và phía sau.
  • inline: Ngược lại với block, các phần tử có giá trị display sẽ không thêm bất kỳ thứ gì.

Để rõ ràng hơn, chúng ta có thể xem ảnh minh họa bên dưới. Hướng của giá trị block theo chiều dọc, còn hướng hiển thị của giá trị inline là theo chiều ngang.

Block vs Inline
Block vs Inline

Để thấy rõ, chúng ta xét ví dụ về inlineví dụ về block. Trong 2 ví dụ này, tag strong lần lượt có thuộc tính display là inline và block. Và để thấy rõ được kích thước của 2 phần tử, mình có set giá trị background-color cho chúng.

Ngoài ra còn một điểm khác biệt nữa. Phần tử có thuộc tính display sẽ được hiển thị trên cùng một dòng. Do đó, nó sẽ bị giới hạn bởi chiều cao của dòng đó. Các giá trị top/bottom của thuộc tính margin sẽ không tác động lên phần tử này.

No top/bottom margin
No top/bottom margin

Các bạn có thể thấy, khi mình set giá trị marign: 20px. Box-model của chúng ta vẫn hiển thị đúng 20px ở cả 4 hướng. Tuy nhiên, ở giao diện không thấy sự xuất hiện của top/bottom margin.

Lưu ý: trong phần HTML, chúng ta cũng được giới thiệu về phần tử block và inline. Cách hoạt động của chúng cũng tương tự nhau, do đó, rất nhiều người nhập nhằng giữa chúng. Tuy nhiên, các bạn cần nắm rõ phần thử block trong HTML và giá trị block của thuộc tính display trong CSS.

Inside

Những giá trị này sẽ tác động lên cách hiển thị của phần tử con bên trọng. Chúng gồm:

  • table
  • flex
  • grid

Khi một phần tử cha được gán một trong giá trị trên, chúng sẽ ảnh hưởng đến cách và thứ tự hiển thị của các phần tử con bên trong. Nhờ đó, chúng ta có thể xây dựng được bố cục của toàn bộ trang web, hay của một phần nội dung. Như đã trình bày phía trên. Mình sẽ có 2 bài hướng dẫn xây dựng bố cục với flex và grid trong thời gian sớm nhất.

Legacy

CSS 2 sử dụng 1 từ khóa đơn lẻ (block, inline, flex…) để gán giá trị cho thuộc tính display. Tuy nhiên, đôi lúc chúng ta cần kết hợp thuộc tính của 2 nhóm outside và inside cho một phần tử. Để làm việc đó, CSS3 kế thừa và mở rộng một số thuộc tính như:

  • inline-block
  • inline-table
  • inline-flex
  • inline-grid

Với ví dụ này, chúng ta sẽ hiểu rõ hơn về cách giá trị inline-block hoạt động. Phần tử của chúng ta

Kết luận

Các giá trị của thuộc tính display mình giới thiệu phía trên chỉ dừng lại ở mức độ cơ bản. Với mức độ này, chúng ta sẽ dễ dàng làm chủ các thư viện, framework frontend. Tuy nhiên, nếu các bạn thực sự muốn trở thành frontend developer chuyên nghiệp, các bạn cần hiểu sâu hơn tất cả các giá trị của thuộc tính display. Đây là một trong những thuộc tính cực kỳ quan trọng trong bài toán xây dựng bố cục trang web.