شرح صفوف ومحتوى الفقرة
تقيس النسبة المئوية % قيمتها دائماً بالارتباط المباشر مع الحاوية الأم المباشرة التي تحتضن العنصر:
- عرض الصندوق المرن: كتابة
width: 50%;لعنصر ابن داخل حاوية عرضها360pxتمنحه عرضاً محسوباً قدره180px، ويتمدد تلقائياً كلما اتسعت الحاوية الأم. - شرط عمل نسبة الارتفاع: كتابة
height: 50%;على الابن لا تُنتج ارتفاعاً فعلياً إلا إذا كان للأب نفسه ارتفاع صريح محدد مثلheight: 80px;؛ أما إذا تُرك ارتفاع الأب تلقائياً فلن يجد المتصفح رقماً ثابتاً ليحسب نصفه! - نسبة حجم الخط: كتابة
font-size: 125%;تضرب حجم خط الأب تماماً كما تفعل1.25em.
HTML
<style>
.reading-note { width: 48ch; background-color: whitesmoke; }
.track-box { width: 360px; height: 40px; background-color: lavender; }
.half-fill { width: 50%; height: 100%; background-color: teal; color: white; }
</style>
<p class="reading-note">Comfortable 48ch reading line width for long lesson notes.</p>
<div class="track-box"><div class="half-fill">50% (180px)</div></div>