Mọi phần tử trên trang web là một hình hộp chữ nhật. Thuộc tính display trong CSS chỉ xác định cách hoạt động của hình hộp chữ nhật đó. Chỉ có một số giá trị thường được sử dụng:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Giá trị mặc định cho tất cả các phần tử là nội tuyến. Hầu hết “Biểu định kiểu tác nhân người dùng” (kiểu mặc định mà trình duyệt áp dụng cho tất cả các trang web) đặt lại nhiều phần tử thành “chặn”. Hãy xem xét từng giá trị này, và sau đó đề cập đến một số giá trị khác ít phổ biến hơn.
Nội tuyến
Giá trị mặc định cho các phần tử. Hãy suy nghĩ về các yếu tố như , hoặc và cách gói văn bản trong các yếu tố trong một chuỗi văn bản không phá vỡ dòng chảy của văn bản.
Phần tử có viền đỏ 1px. Lưu ý rằng nó nằm ngay trong dòng với phần còn lại của văn bản.
Một phần tử nội tuyến sẽ chấp nhận lề và phần đệm, nhưng phần tử vẫn nằm trong dòng như bạn có thể mong đợi. Margin và padding sẽ chỉ đẩy các yếu tố khác theo chiều ngang, không phải theo chiều dọc.
Một phần tử nội tuyến sẽ không chấp nhận heightvà width. Nó sẽ chỉ bỏ qua nó.
Chặn Nội tuyến
Một phần tử được đặt thành inline-blockrất giống với nội dòng ở chỗ nó sẽ đặt nội tuyến với dòng văn bản tự nhiên (trên “đường cơ sở”). Sự khác biệt là bạn có thể thiết lập widthvà heightsẽ được tôn trọng.
Khối
Một số phần tử được đặt thành blockbởi biểu định kiểu UA của trình duyệt. Họ thường yếu tố container, như , , và
. Cũng nhắn tin "khối" như
và
. Các phần tử cấp khối không nằm trong dòng mà vượt qua chúng. Theo mặc định (không đặt chiều rộng) chúng chiếm nhiều không gian theo chiều ngang nhất có thể.
Hai yếu tố có viền đỏ là
s là các phần tử mức khối. Phần tử ở giữa chúng không nằm trong dòng bởi vì các khối chia nhỏ bên dưới các phần tử nội tuyến.
Chạy vào
Đầu tiên, thuộc tính này không hoạt động trong Firefox. Lời nói là thông số kỹ thuật cho nó không đủ rõ ràng. Mặc dù vậy, để bắt đầu hiểu nó, giống như nếu bạn muốn một phần tử tiêu đề nằm thẳng hàng với văn bản bên dưới nó. Làm nổi nó sẽ không hoạt động và bất cứ điều gì khác cũng vậy, vì bạn không muốn tiêu đề là phần tử con của phần tử văn bản bên dưới nó, bạn muốn nó là phần tử độc lập của riêng nó. Trong các trình duyệt "hỗ trợ", nó như thế này:
Đừng tin tưởng vào nó, mặc dù.
Flexbox
Các displaybất động sản cũng được sử dụng cho các phương pháp bố trí fangled mới như Flexbox.
.header ( display: flex; )
Có một số phiên bản cũ của cú pháp flexbox, vì vậy hãy tham khảo bài viết này để biết cú pháp sử dụng flexbox với trình duyệt hỗ trợ tốt nhất. Hãy nhớ xem hướng dẫn đầy đủ này về Flexbox.
Flow-Root
Các flow-rootgiá trị hiển thị sẽ tạo ra một “bối cảnh khối định dạng” mới, nhưng nếu không như block. Một BFC mới giúp thực hiện những việc như xóa phao, loại bỏ sự cần thiết của hack để làm điều đó.
.group ( display: flow-root; )
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
Trình duyệt Chrome
Firefox
I E
Cạnh
Safari
58
53
Không
79
13
Di động / Máy tính bảng
Chrome dành cho Android
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Lưới
Bố cục lưới cũng sẽ được thiết lập ban đầu bởi thuộc tính hiển thị.
body ( display: grid; )
Đây là hướng dẫn của chúng tôi về Bố cục lưới, bao gồm biểu đồ hỗ trợ trình duyệt.
không ai
Xóa hoàn toàn phần tử khỏi trang. Lưu ý rằng trong khi phần tử vẫn ở trong DOM, nó sẽ bị xóa một cách trực quan và theo bất kỳ cách nào khác có thể hình dung được (bạn không thể gắn tab cho nó hoặc phần tử con của nó, nó bị trình đọc màn hình bỏ qua, v.v.).
Giá trị bảng
Có một tập hợp toàn bộ các giá trị hiển thị buộc các phần tử không phải bảng hoạt động giống như các phần tử bảng, nếu bạn cần điều đó xảy ra. Nó hiếm khi xảy ra, nhưng đôi khi nó cho phép bạn hiểu "ngữ nghĩa hơn" với mã của mình trong khi sử dụng sức mạnh định vị duy nhất của các bảng.
