خاصية عرض CSS
مثال
استخدام بعض قيم العرض المختلفة:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية سلوك display
العرض (نوع مربع العرض) للعنصر.
في HTML ، يتم أخذ قيمة خاصية العرض الافتراضية من مواصفات HTML أو من ورقة الأنماط الافتراضية للمستعرض / المستخدم. القيمة الافتراضية في XML مضمنة ، بما في ذلك عناصر SVG.
القيمة الافتراضية: | ؟ |
---|---|
وارث: | رقم |
متحرك: | رقم. اقرأ عن animatable |
الإصدار: | CSS1 |
بناء جملة JavaScript: | الكائن .style.display = "لا شيء" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
ملاحظة: تتطلب القيمتان "المرن" و "المرن المرن" البادئة -webkit- للعمل في Safari.
ملاحظة: "العرض: المحتويات" لا يعمل في الإصدار 79 السابق من Edge.
بنية CSS
display: value;
قيم الملكية
Value | Description | Play it |
---|---|---|
inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect | |
block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
flex | Displays an element as a block-level flex container | |
grid | Displays an element as a block-level grid container | |
inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |
inline-flex | Displays an element as an inline-level flex container | |
inline-grid | Displays an element as an inline-level grid container | |
inline-table | The element is displayed as an inline-level table | |
list-item | Let the element behave like a <li> element | |
run-in | Displays an element as either block or inline, depending on context | |
table | Let the element behave like a <table> element | |
table-caption | Let the element behave like a <caption> element | |
table-column-group | Let the element behave like a <colgroup> element | |
table-header-group | Let the element behave like a <thead> element | |
table-footer-group | Let the element behave like a <tfoot> element | |
table-row-group | Let the element behave like a <tbody> element | |
table-cell | Let the element behave like a <td> element | |
table-column | Let the element behave like a <col> element | |
table-row | Let the element behave like a <tr> element | |
none | The element is completely removed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
عرض توضيحي لكيفية استخدام قيمة خاصية المحتويات. في المثال التالي ، ستختفي حاوية .a ، وتجعل العناصر الفرعية (.b) العناصر الفرعية للعنصر في المستوى الأعلى التالي في DOM:
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
مثال
عرض توضيحي لكيفية استخدام قيمة الخاصية الموروثة:
body {
display: inline;
}
p {
display: inherit;
}
مثال
اضبط اتجاه بعض العناصر المرنة داخل عنصر <div> بترتيب عكسي:
div {
display: flex;
flex-direction: row-reverse;
}
الصفحات ذات الصلة
دروس CSS: عرض ورؤية CSS
مرجع DOM HTML: خاصية العرض