Với thuộc tính display. Chúng ta có lao lý cách mà một thành phần và những thành phần con của nó hiển thị. Nhờ vậy, tất cả chúng ta hoàn toàn có thể kiến thiết xây dựng bố cục tổng quan cho website .
Tóm Tắt
Cú pháp
Cũng tương tự như với những thuộc tính CSS khác. Khi sử dụng thuộc tính display, cú pháp của tất cả chúng ta là :
Bạn đang đọc: CSS – Thuộc tính display – https://final-blade.com
| 123 |
selector{ display:value ; } |
Thuộc tính display hoàn toàn 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 khoanh vùng phạm vi bài viết hiện tại, mình sẽ bàn đến những giá trị được in đậm trong list phía trên. Trong bài viết này, mình sẽ tập trung chuyên sâu lý giải về ý nghĩa, cách sử dụng thuộc tính display .
Nâng cao hơn, tất cả chúng ta sẽ có bài viết tiếp nối sử dụng giá trị flex và sử dụng giá trị grid để kiến thiết xây dựng bố cục tổng quan cho website .
Phân nhóm những thuộc tính
Để hiểu rõ hơn về những thuộc tính, mình sẽ gom chúng vào những nhóm nhỏ. Qua đó, tất cả chúng ta sẽ thuận tiện hiểu và sử dụng chúng hơn .
Outside
Những giá trị này sẽ ảnh hưởng tác động trực tiếp lên cách hiển thị của thành phần. 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, tất cả chúng ta hoàn toàn 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 .
Để thấy rõ, tất cả chúng ta xét ví dụ về inline và ví 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 cỡ của 2 thành phần, mình có set giá trị background-color cho chúng .
Ngoài ra còn một điểm độc lạ 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ị số lượng giới hạn bởi độ cao của dòng đó. Các giá trị top / bottom của thuộc tính margin sẽ không ảnh hưởng tác động lên thành phần này .
Các bạn hoàn toàn có thể thấy, khi mình set giá trị marign : 20 px. Box-model của tất cả chúng ta vẫn hiển thị đúng 20 px ở cả 4 hướng. Tuy nhiên, ở giao diện không thấy sự Open 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ẽ ảnh hưởng tác động lên cách hiển thị của thành phần 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 tất cả chúng ta cần phối hợp thuộc tính của 2 nhóm outside và inside cho một thành phần. Để thao tác đó, CSS3 thừa kế và lan rộng ra một số ít thuộc tính như :
- inline-block
- inline-table
- inline-flex
- inline-grid
Với ví dụ này, tất cả chúng ta sẽ hiểu rõ hơn về cách giá trị inline-block hoạt động giải trí. Phần tử của tất cả chúng ta
Kết luận
Các giá trị của thuộc tính display mình trình làng phía trên chỉ dừng lại ở mức độ cơ bản. Với mức độ này, tất cả chúng ta sẽ thuận tiện làm chủ những thư viện, framework frontend. Tuy nhiên, nếu những bạn thực sự muốn trở thành frontend developer chuyên nghiệp, những bạn cần hiểu sâu hơn toàn bộ những 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 thiết kế xây dựng bố cục tổng quan website .
Source: https://final-blade.com
Category: Kiến thức Internet
