خاصية عرض CSS
مثال
اضبط عرض عناصر <div> الثلاثة:
div.a {
width: auto;
border: 1px
solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width:
50%;
border: 1px solid black;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية عرض width
العنصر.
لا يشمل عرض العنصر المساحة المتروكة أو الحدود أو الهوامش!
ملاحظة: تتجاوز الخاصيتان min
-width و max-widthwidth
الخاصية.
القيمة الافتراضية: | تلقاءي |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS1 |
بناء جملة JavaScript: | الكائن .style.width = "500px" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
بنية CSS
width: auto|value|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
auto | Default value. The browser calculates the width | |
length | Defines the width in px, cm, etc. Read about length units | |
% | Defines the width in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
عيّن عرض عنصر <img> باستخدام قيمة النسبة المئوية:
img {
width: 50%;
}
مثال
اضبط عرض عنصر <input type = "text"> على 100 بكسل. ومع ذلك ، عندما يتم التركيز عليها ، اجعلها بعرض 250 بكسل:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
الصفحات ذات الصلة
دروس CSS: ارتفاع وعرض CSS
دروس CSS: نموذج صندوق CSS
مرجع CSS: خاصية الارتفاع
مرجع HTML DOM: خاصية العرض