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 JavaScriptobject.style.display="none"

Trình duyệt hỗ trợ

Trình duyệtChromeIE / EdgeFirefoxSafariOpera
Phiên bản đầu tiên hỗ trợ4.08.03.03.17.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
inlineHiể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
blockHiể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
contentsLà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)
flexHiể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
gridHiển thị phần tử dưới dạng vùng chứa lưới cấp khối
inline-blockHiể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-flexHiể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-gridHiển thị một phần tử dưới dạng vùng chứa lưới cấp nội tuyến
inline-tablePhần tử được hiển thị dưới dạng bảng cấp nội tuyến
list-itemThiết lập hành vi của phần tử giống như phần tử <li>
run-inHiể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
tableThiết lập hành vi của phần tử giống như phần tử <table>
table-captionThiết lập hành vi của phần tử giống như phần tử <caption>
table-column-groupThiết lập hành vi của phần tử giống như phần tử <colgroup>
table-header-groupThiết lập hành vi của phần tử giống như phần tử <thead>
table-footer-groupThiết lập hành vi của phần tử giống như phần tử <tfoot>
table-row-groupThiết lập hành vi của phần tử giống như phần tử <tbody>
table-cellThiết lập hành vi của phần tử giống như phần tử <td>
table-columnThiết lập hành vi của phần tử giống như phần tử <col>
table-rowThiết lập hành vi của phần tử giống như phần tử <tr>
noneLoại bỏ hoàn toàn phần tử.
initialThiết lập thuộc tính này thành giá trị mặc định của nó.
inheritThừ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.

Leave a Comment