العمل مع الوحدات النسبية والمطلقة Absolute and Relative Units

النسب المئوية (Percentages) في CSS هي وحدات نسبية (relative units) تتيح لك تحديد الأحجام (sizes) والأبعاد (dimensions) وخصائص أخرى كنسبة (proportion) من العنصر الأصل (parent element). عند استخدام قيمة نسبة مئوية (percentage value)، فأنت تقول أساسًا: "اجعل هذا العنصر يشغل X% من حاويته (its container)."

على سبيل المثال، إذا ضبطت width: 50% على عنصر، فسيشغل نصف عرض (width) الحاوية الأصلية له (its parent container). هذا يجعل النسب المئوية (percentages) مفيدة جدًا لإنشاء تصميمات متجاوبة (responsive designs) تتكيف مع أحجام الشاشات المختلفة.

<link rel="stylesheet" href="styles.css">

<div class="container">
 <div class="box">
 </div>
</div>
            

.container {
 width: 400px;
 height: 200px;
 background-color: lightgray;
}

.box {
 width: 50%;
 height: 100%;
 background-color: red;
}
            

معاينة:

النسب المئوية (Percentages) مثالية لإنشاء تخطيطات مرنة (fluid layouts) تتكيف مع أحجام الشاشات المختلفة. على سبيل المثال، ضبط حاوية (container) على width: 80% يضمن أن تشغل 80% من عرض الحاوية الأصلية its parent's width)، بغض النظر عن الجهاز (device).

<link rel="stylesheet" href="styles.css">

<div class="parent">
 <div class="child">
 </div>
</div>
            

.parent {
 width: 100%;
 height: 300px;
 background-color: lightgray;
}

.box {
 width: 80%;
 height: 100%;
 background-color: red;
}
            

معاينة:

استخدام النسب المئوية (percentages) للصور المرنة (flexible images) هو ممارسة شائعة أخرى. بتطبيق max-width: 100% على الصور، تسمح لها بالتقلص (scale down) على الشاشات الصغيرة مع الحفاظ على نسبة أبعادها (aspect ratio).

<link rel="stylesheet" href="styles.css">

<img src="https://placehold.co/150x150" alt="صورة نموذجية للمنتج" >
            

img {
 max-width: 100%;
 height: auto;
}
            

معاينة:

رغم أنه أقل شيوعًا، يمكن أيضًا استخدام النسب المئوية (percentages) لأحجام الخطوط (font sizes) لإنشاء نصوص قابلة للتوسع (scalable typography). على سبيل المثال، font-size: 120% يجعل النص أكبر بنسبة 20% من حجم الخط في الحاوية الأصل (its parent's font size).

<link rel="stylesheet" href="styles.css">

<div class="text-container">
 النص الأصلي.
 <p class="text">هذا نص نموذجي.</p>
</div>
            

.text-container {
 font-size: 16px;
}

.text {
 font-size: 120%;
}
            

معاينة:

النسب المئوية (Percentages) مفيدة جدًا للتمركز العمودي (vertical centering). إليك مثالًا على كيفية استخدام النسب مع خاصية transform لتمركز عنصر عموديًا.

يضع هذا المثال العنصر على بعد 50% من أعلى الحاوية (top of its container)، ثم يستخدم transform لتحريكه للأعلى بمقدار نصف ارتفاعه، مما يحقق تمركزًا عموديًا فعّالًا.

<link rel="stylesheet" href="styles.css">

<div class="centered">
</div>
            

.centered {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 300px;
 height: 300px;
 background-color: red;
}
            

معاينة:

سوف تتعلم المزيد عن كيفية عمل التمركز المطلق (absolute positioning) وخصائص التحويل (transform properties) بتفصيل أكبر في الدروس القادمة.

تذكر، النسب المئوية (percentages) دائمًا نسبية لشيء ما (relative to something). بالنسبة للخصائص الأفقية (horizontal) مثل width، فهي نسبية لعرض الحاوية الأصل (relative to the parent's width). أما الخصائص العمودية (vertical) مثل height، فعادة ما تكون نسبية لارتفاع الحاوية الأصل (relative to the parent's height) (إذا كان محددًا).

كن كن حذرًا عند تسكين العناصر (nesting elements) ذات الأبعاد المعتمدة على النسب المئوية، إذ قد يؤدي ذلك إلى نتائج غير متوقعة. أيضًا، ضع في اعتبارك أن ارتفاعات النسب المئوية (percentage-based heights) قد تكون معقدة إذا لم يكن للحاوية الأصل ارتفاع محدد (defined height).

باختصار، النسب المئوية في CSS أدوات قوية لإنشاء تصميمات مرنة ومتجاوبة. استخدمها عندما تريد أن تتناسب العناصر تناسبيًا مع حاوياتها أو عندما تحتاج إلى تخطيطات تتكيف بسلاسة مع أحجام الشاشات المختلفة.