أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
تحدد الخاصية عرض نوع مربع من استخدامها لعنصر HTML.
| القيمة الافتراضية: | inline |
|---|---|
| وارث: | no |
| Animatable: | no. Read about animatable |
| الإصدار: | CSS1 |
| جافا سكريبت بناء الجملة: | object .style.display="none" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| display | 4.0 | ثمانية جزئية من 5.5 | 3.0 | 3.1 | 7.0 |
Note: القيم "inline-table" ، "table" ، "table-caption" ، "table-cell" ، "table-column" ، "table-column-group" ، "table-row" ، و "table-row-group" غير معتمدة في IE7 وفي وقت سابق. IE8 يتطلب DOCTYPE!. IE9 يدعم القيم.
ملاحظة: القيم "flex" و "inline-flex" يتطلب بادئة للعمل في سفاري. ل "flex" استخدام "display: -webkit-flex" ، عن "inline-flex" استخدام "display: -webkit-inline-flex;" .
CSS بناء الجملة
display:value;قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| inline | القيمة الافتراضية. يعرض عنصر كعنصر مضمنة (like <span>) | العبها " |
| block | يعرض عنصر كعنصر كتلة (like <p>) | العبها " |
| flex | يعرض عنصر باعتبارها حاوية المرن على مستوى الكتلة. الجديد في CSS3 | |
| inline-block | يعرض عنصر باعتبارها حاوية كتلة مستوى المضمنة. يتم تنسيق داخل هذه الكتلة كما مربع على مستوى الكتلة، ويتم تنسيق العنصر نفسه باعتباره مربع على مستوى مضمنة | |
| inline-flex | يعرض عنصر باعتبارها حاوية المرن على مستوى المضمنة. الجديد في CSS3 | |
| inline-table | يتم عرض عنصر باعتبارها الجدول على مستوى مضمنة | |
| list-item | السماح للعنصر تتصرف مثل <li> عنصر | العبها " |
| run-in | يعرض عنصر إما كتلة أو مضمنة، اعتمادا على السياق | |
| table | السماح للعنصر تتصرف مثل <table> العنصر | |
| table-caption | السماح للعنصر تتصرف مثل <caption> العنصر | |
| table-column-group | السماح للعنصر تتصرف مثل <colgroup> العنصر | |
| table-header-group | السماح للعنصر تتصرف مثل <thead> العنصر | |
| table-footer-group | السماح للعنصر تتصرف مثل <tfoot> العنصر | |
| table-row-group | السماح للعنصر تتصرف مثل <tbody> العنصر | |
| table-cell | السماح للعنصر تتصرف مثل <td> العنصر | |
| table-column | السماح للعنصر تتصرف مثل <col> العنصر | |
| table-row | السماح للعنصر تتصرف مثل <tr> العنصر | |
| none | لن يتم عرض عنصر على الإطلاق (has no effect on layout) | العبها " |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | العبها " |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مزيد من الأمثلة
مثال
مظاهرة لكيفية استخدام قيمة العقار ترث:
body {
display: inline;
}
p {
display: inherit;
} انها محاولة لنفسك » مثال
تحديد اتجاه بعض العناصر المرنة داخل <div> عنصر في ترتيب عكسي:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} انها محاولة لنفسك » صفحات ذات صلة
درس CSS: العرض المغلق والرؤية
HTML DOM المرجع display property