Thuộc tính Hiển thị CSS

Làm thế nào để làm việc vớidisplaythuộc tính trong CSS

Cácdisplaythuộc tính của một đối tượng xác định cách nó được trình duyệt hiển thị.

Đó là thuộc tính rất quan trọng và có thể là thuộc tính có số lượng giá trị cao nhất mà bạn có thể sử dụng.

Những giá trị đó bao gồm:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table(và tất cảtable-*những cái)
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

cộng với những người khác mà bạn có thể sẽ không sử dụng, nhưruby.

Việc chọn bất kỳ phần tử nào trong số đó sẽ thay đổi đáng kể hành vi của trình duyệt với phần tử và phần tử con của nó.

Trong bài đăng này, tôi sẽ phân tích những điều quan trọng nhất không được đề cập ở nơi khác:

  • block
  • inline
  • inline-block
  • none

Tôi đề cập đến những người khác trong các bài viết riêng biệt:

inline

Nội tuyến là giá trị hiển thị mặc định cho mọi phần tử trong CSS.

Tất cả các thẻ HTML đều được hiển thị bên trong hộp ngoại trừ một số phần tử nhưdiv,psection, được đặt làblockbởi tác nhân người dùng (trình duyệt).

Các phần tử nội dòng không có bất kỳ lề hoặc khoảng đệm nào được áp dụng.

Tương tự cho chiều cao và chiều rộng.

Bạncó thểthêm chúng, nhưng giao diện trong trang sẽ không thay đổi - chúng được trình duyệt tính toán và áp dụng tự động.

inline-block

Tương tự vớiinline, nhưng vơiinline-block widthheightđược áp dụng như bạn đã chỉ định.

block

Như đã đề cập, thông thường các phần tử được hiển thị nội dòng, ngoại trừ một số phần tử, bao gồm

  • div
  • p
  • section
  • ul

được đặt làblockbằng trình duyệt.

Vớidisplay: block, các phần tử được xếp chồng lên nhau, theo chiều dọc và mọi phần tử chiếm 100% trang.

Các giá trị được chỉ định chowidthheightcác thuộc tính được tôn trọng, nếu bạn đặt chúng, cùng vớimarginpadding.

none

Sử dụngdisplay: nonelàm cho một phần tử biến mất. Nó vẫn ở đó trong HTML, nhưng không hiển thị trong trình duyệt.

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: