CSS - Height/Width العرض والارتفاع
CSS - الأبعاد (Width و Height)
🔸 تُستخدم الخصائص width و height لتحديد عرض وارتفاع العناصر في CSS.
✅ خصائص الأبعاد الأساسية
width: تحدد عرض العنصر.height: تحدد ارتفاع العنصر.max-width: أقصى عرض ممكن للعنصر.max-height: أقصى ارتفاع ممكن للعنصر.min-width: أقل عرض يمكن أن يصل له العنصر.min-height: أقل ارتفاع يمكن أن يصل له العنصر.
📏 وحدات القياس المستخدمة
يمكن تحديد القيم باستخدام وحدات مختلفة مثل:
px(بيكسل) – وحدة ثابتة.%(نسبة مئوية) – نسبة من العنصر الأب.emأوrem– تعتمد على حجم الخط.auto– يُترك للمتصفح تحديد القيمة تلقائيًا.
🧪 أمثلة توضيحية
div {
width: 300px;
height: 150px;
background-color: lightblue;
}
div {
width: 100%;
max-width: 600px;
min-width: 200px;
}
🧪 مثال عملي داخل HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 150px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>هذا عنصر بأبعاد ثابتة (عرض 300px وارتفاع 150px).</div>
</body>
</html>
📌 ملاحظات مهمة
- إذا لم يتم تحديد
widthأوheight، سيقوم المتصفح بتحديدها تلقائيًا وفقًا للمحتوى. - يمكن استخدام
max-widthلجعل التصميم أكثر استجابة (Responsive). - عند استخدام
box-sizing: border-box;، يتم تضمين الحشوة والحدود داخل الأبعاد المحددة.
تعليقات
إرسال تعليق