Trong các thuộc tính cơ bản về CSS, các thuộc tính liên quan đến vị trí, không gian như căn giữa phần tử là tôi lớ ngớ nhất. Mà cái này lại rất quan trọng trong thiết kế nên phải sửa chữa ngay thôi.
Và thuộc tính display trong CSS liên quan rất nhiều đến việc căn giữa, dạo gần đây nó bổ sung thêm vài giá trị mới rất tiện lợi.
Định nghĩa và cách sử dụng
Thuộc tính display chỉ định hành vi hiển thị (kiểu kết xuất hộp / rendering box) của một phần tử.
Trong HTML, giá trị mặc định của thuộc tính display được lấy từ các thông số kỹ thuật của HTML hoặc từ style sheet của trình duyệt/người dùng. Giá trị mặc định trong XML là inline, bao gồm cả các phần tử SVG.
| Giá trị mặc định: | ? |
| Kế thừa: | không |
| Animatable: | không |
| Phiên bản: | CSS1 |
| Cú pháp JavaScript | object.style.display="none" |
Trình duyệt hỗ trợ
| Trình duyệt | Chrome | IE / Edge | Firefox | Safari | Opera |
| Phiên bản đầu tiên hỗ trợ | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Lưu ý: giá trị flex và inline-flex trong trình duyệt safari yêu cầu thêm tiền tố -webkit-
Lưu ý: display:contents không hoạt động trong Edge phiên bản cũ bản 79.
| Giá trị | Mô tả về giá trị này |
inline | Hiển thị phần tử dưới dạng phần tử nội tuyến (chẳng hạn như thẻ <span>). Bất cứ việc thiết lập chiều cao và/hoặc chiều rộng nào sẽ không có tác dụng |
block | Hiển thị phần tử dưới dạng phần tử khối (chẳng hạn như thẻ <p>). Nó sẽ bắt đầu trên dòng mới, và chiếm toàn bộ chiều rộng |
contents | Làm cho vùng chứa biến mất, làm cho các phần tử con là phần tử con của phần tử lên cấp tiếp theo trong DOM (tức từ biến cháu thành con, biến con thành ngang hàng) |
flex | Hiển thị phần tử dưới dạng vùng chứa linh hoạt cấp khối, cái này dùng để làm responsive thì rất tiện |
grid | Hiển thị phần tử dưới dạng vùng chứa lưới cấp khối |
inline-block | Hiển thị một phần tử dưới dạng vùng chứa khối cấp nội tuyến. Bản thân phần tử được định dạng là phần tử nội tuyến, nhưng bạn có thể áp dụng các giá trị chiều cao và chiều rộng, cái áp dụng chiều cao và chiều rộng này thì khác inline, còn cái nội tuyến thì khác block |
inline-flex | Hiển thị một phần tử dưới dạng vùng chứa linh hoạt cấp nội tuyến |
inline-grid | Hiển thị một phần tử dưới dạng vùng chứa lưới cấp nội tuyến |
inline-table | Phần tử được hiển thị dưới dạng bảng cấp nội tuyến |
list-item | Thiết lập hành vi của phần tử giống như phần tử <li> |
run-in | Hiển thị một phần tử dưới dạng khối hoặc nội dòng, cái này còn tùy thuộc vào ngữ cảnh |
table | Thiết lập hành vi của phần tử giống như phần tử <table> |
table-caption | Thiết lập hành vi của phần tử giống như phần tử <caption> |
table-column-group | Thiết lập hành vi của phần tử giống như phần tử <colgroup> |
table-header-group | Thiết lập hành vi của phần tử giống như phần tử <thead> |
table-footer-group | Thiết lập hành vi của phần tử giống như phần tử <tfoot> |
table-row-group | Thiết lập hành vi của phần tử giống như phần tử <tbody> |
table-cell | Thiết lập hành vi của phần tử giống như phần tử <td> |
table-column | Thiết lập hành vi của phần tử giống như phần tử <col> |
table-row | Thiết lập hành vi của phần tử giống như phần tử <tr> |
none | Loại bỏ hoàn toàn phần tử. |
initial | Thiết lập thuộc tính này thành giá trị mặc định của nó. |
inherit | Thừa kế thuộc tính này từ phần tử cha của nó. |
Các giá trị display mặc định của các thẻ phổ biến
Danh sách thẻ được xếp theo thứ tự abc.
block: address, article, aside, blockquote, body, div, fieldset, footer, form, từ h1 đến h6, hr, header, html, iframe, menu, nav, ol, p, pre, ul
inline-block: img
inline: map, output, q, span, a
none: area, datalist, head, link, param, script, style, title
Các thẻ chủ yếu là display block; inline-block có ít nhất, inline thì không nhiều, còn none có độ gần 10 thẻ.
Có vẻ thống kê này tôi lấy từ W3School không được họ liệt kê đầy đủ và chính xác. Lúc nào tìm được dữ liệu tốt hơn, tôi sẽ cập nhật sau.