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

أثناء تصميم صفحاتك، ستتعامل مع خصائص مختلفة مثل العرض (widths)، الارتفاع (heights)، الحشو (padding)، الهامش (margins)، والمزيد. عند تعريف هذه الخصائص، ستحتاج إلى تحديد وحدات الطول التي تريد استخدامها.

هناك نوعان من الوحدات (units) يمكنك استخدامها لتعريف هذه الخصائص: الوحدات النسبية (relative units) والوحدات المطلقة (absolute units). في هذا الدرس، سنركز فقط على الوحدات المطلقة (absolute units).

الوحدات المطلقة للطول (Absolute length units) هي وحدات ذات طول ثابت (fixed length) وليست نسبية لشيء آخر. النسبية (Relative) تعني أن الطول مرتبط بشيء آخر، مثل حجم الشاشة (size of the screen) أو حجم العنصر الأب (size of the parent element). سنتحدث أكثر عن الوحدات النسبية في الدروس القادمة.

الوحدة المطلقة (absolute unit) الأكثر شيوعًا هي البكسل (px). البكسلات (Pixels) هي وحدة قياس ذات حجم ثابت في CSS، توفر تحكمًا دقيقًا في الأبعاد. هذا يعني أن 1px دائمًا يساوي 1/96 من البوصة (inch).

من المهم ملاحظة أنه بينما تم توحيد 1px كـ 1/96 من البوصة لأغراض تخطيط CSS، قد يختلف الحجم الفعلي للبكسل حسب الشاشة.

لنلقِ نظرة على مثال لاستخدام البكسلات (pixels) لتحديد العرض والارتفاع (width and height) لصندوق (box) :

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

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

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

معاينة:

في هذا المثال، لدينا صندوق أحمر (red box) بعرض وارتفاع محددين بـ 100px. ستظل أبعاد هذا الصندوق كما هي بغض النظر عن تغييرات حجم الشاشة.

لذا، إذا كنت تستخدم جهازًا بشاشة صغيرة، سيظل عرض الصندوق 100px. وإذا كنت على شاشة سطح مكتب كبيرة، سيظل عرض الصندوق 100px.

فمتى يجب استخدام الوحدات المطلقة (absolute units) مثل البكسلات (pixels)؟ يعتمد ذلك على الحالة. لكن عمومًا تستخدم البكسلات عندما تحتاج إلى تحكم دقيق في أبعاد العنصر (element dimensions)، التباعد (spacing)، والتخطيط (layout). أحيانًا قد تستخدم البكسلات للهامش (margins)، الحشو (padding)، والحدود (borders).

إليك مثالًا لاستخدام البكسلات (pixels) لتحديد الهامش (margin) لصندوقين (two boxes) :

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

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

.box {
 width: 100px;
 height: 100px;
 background-color: red;
 margin: 10px;
}
      

معاينة:

تذكر أن الهامش (margin) هو المساحة خارج الصندوق. لذا، في هذا المثال، سيكون للصندوق هامش 10px من جميع الجهات.

تشمل أنواع الوحدات المطلقة (absolute units) الأخرى ما يلي:

• وحدة in (بوصة inches)، تساوي 96px

• وحدة cm (سنتيمتر centimeters)، تساوي 25.2/64 من البوصة

• وحدة mm (مليمتر millimeters)، تساوي 1/10 من السنتيمتر

• وحدة q (ربع مليمتر quarter-millimeters)، تساوي 1/40 من السنتيمتر

• وحدة pc (بيكا picas)، تساوي 1/6 من البوصة

• وحدة pt (نقطة points)، تساوي 1/72 من البوصة

معظم هذه الوحدات (units) تُستخدم للطباعة (print) وليس للشاشات (screens).

بينما الوحدة الأكثر شيوعًا التي ستستخدمها هي البكسلات (pixels)، من المهم أن تعرف أن الوحدات المطلقة (absolute units) الأخرى موجودة.