CSSVerse | الوحدات المطلقة والنسبية

مراجعة وحدات CSS النسبية Relative والمطلقة Absolute

مراجعة

الوحدات المطلقة Absolute Units

px (بكسل Pixels) : هذه الوحدة المطلقة هي وحدة قياس بحجم ثابت في CSS. هي أكثر الوحدات المطلقة شيوعًا وتوفر تحكمًا دقيقًا في الأبعاد. 1px دائمًا يساوي 1/96 من البوصة (inch).
in (بوصة Inch) : هذه الوحدة المطلقة تساوي 96 بكسل.
cm (سنتيمتر Centimeters) : هذه الوحدة المطلقة تساوي 25.2/64 من البوصة (inch).
mm (ميليمتر Millimeters) : هذه الوحدة المطلقة تساوي 1/10 من السنتيمتر (centimeter).
q (ربع ميليمتر Quarter-Millimeters) : هذه الوحدة المطلقة تساوي 1/40 من السنتيمتر (centimeter).
pc (بيكا Picas) : هذه الوحدة المطلقة تساوي 1/6 من البوصة (inch).
pt (نقطة Points) : هذه الوحدة المطلقة تساوي 1/72 من البوصة (inch).

index.html


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

<div class="units">
 <div class="unit px">px</div>
 <div class="unit inch">in</div>
 <div class="unit cm">cm</div>
 <div class="unit mm">mm</div>
 <div class="unit q">q</div>
 <div class="unit pc">pc</div>
 <div class="unit pt">pt</div>
</div>

styles.css


.units {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 align-items: flex-end;
}

.unit {
 background-color: steelblue;
 color: white;
 text-align: center;
 padding: 4px;
}

.px {
 width: 40px;
 height: 40px;
}

.inch {
 width: 0.5in;
 height: 0.5in;
}

.cm {
 width: 1cm;
 height: 1cm;
}

.mm {
 width: 10mm;
 height: 10mm;
}

.q {
 width: 40q;
 height: 40q;
}

.pc {
 width: 6pc;
 height: 6pc;
}

.pt {
 width: 36pt;
 height: 36pt;
}

معاينة:

الوحدات النسبية Relative Units

النسب المئوية Percentages : تتيح لك هذه الوحدات النسبية تعريف الأحجام والأبعاد وخصائص أخرى كنسبة (proportion) من عنصرها الأصل. على سبيل المثال، إذا ضبطت width: 50%; على عنصر، فسيشغل نصف عرض حاويته الأصل.
الوحدة em : هذه الوحدات نسبية إلى حجم خط العنصر. إذا كنت تستخدم ems للخاصية font-size ، فسيكون حجم النص نسبيًا إلى حجم خط العنصر الأصل.
الوحدة rem : هذه الوحدات نسبية إلى حجم خط العنصر الجذر (root element)، وهو عنصر html.
الوحدة vh : ترمز vh إلى (viewport height) (ارتفاع إطار العرض) وتساوي 1vh نسبة 1% من ارتفاع إطار العرض.
الوحدة vw : ترمز vw إلى (viewport width) (عرض إطار العرض) وتساوي 1vw نسبة 1% من عرض إطار العرض.

index.html


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

<div class="parent">
 <div class="box percent">50%</div>
 <div class="box em">2em</div>
 <div class="box rem">2rem</div>
 <div class="box vh">10vh</div>
 <div class="box vw">10vw</div>
</div>

styles.css


html {
 font-size: 16px;
}

.parent {
 width: 200px;
 font-size: 20px;
 border: 2px dashed #555;
 padding: 10px;
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.box {
 background-color: seagreen;
 color: white;
 text-align: center;
 padding: 6px;
}

.percent {
 width: 50%;
}

.em {
 font-size: 2em;
}

.rem {
 font-size: 2rem;
}

.vh {
 height: 10vh;
}

.vw {
 width: 10vw;
}

معاينة:

دالة calc

دالة calc() باستخدام دالة calc() ، يمكنك إجراء حسابات مباشرة داخل أوراق الأنماط (stylesheets) لتحديد قيم الخصائص بشكل ديناميكي. هذا يعني أنه يمكنك إنشاء واجهات مستخدم مرنة ومتجاوبة بحساب الأبعاد بناءً على حجم إطار العرض (viewport) أو عناصر أخرى.

index.html


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

<div class="calc-box">calc()</div>

styles.css


.calc-box {
 width: calc(100% - 40px);
 padding: 10px;
 background: steelblue;
 color: white;
 text-align: center;
 border: 2px solid black;
}

معاينة:

calc()

→ السابق التالي ←