Categories CSS

Về thuộc tính display trong CSS

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ị flexinline-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.

Back to Top