السلام عليكم ورحمة الله
يواجه البعض مشاكل مع css عند محاولة ضبط أبعاد (عرض وارتفاع) عنصر ما حيث لايظهر العنصر كما تريده ويطفح رغم أن حساباتك تبدو سليمة، لنأخذ مثال على هذه المشكلة:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<title>مثال</title>
<style>
#container {
width: 300px;
height: 300px;
background: #669EFF;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
يظهر في الصفحة مربع جميل #container عرضه وارتفاعه 300 بكسل، سنستخدمه لإحتواء عنصر ابن #child ارتفاعه أيضاً 300px وعرضه 300px:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<title>مثال</title>
<style>
#container {
width: 300px;
height: 300px;
background: #669EFF;
}
#child {
width: 300px;
height: 300px;
background: #FF6F3A;
opacity: 1.0;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
</body>
</html>لو عاينته سيبدو:
يظهر أنه المربع البرتقالي مطابق للأزرق، يمكننك الحقق اما بتغيير الشفاشفية الى النص مثلاً opacity: 0.5:
أو استخدام ميزة جميلة في فايرفوكس اسمها 3D View ستجدها في Tools > Web Developer > Web Console وهي لعرض الطبقات في البعد الثالث:
ندخل في المشكلة، ونضيف اطار عرضه 3px ونعمل إزاحة خارجية padding بمقدار 2 بكسل:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<title>مثال</title>
<style>
#container {
width: 300px;
height: 300px;
background: #669EFF;
}
#child {
width: 300px;
height: 300px;
background: #FF6F3A;
padding: 2px;
border: 3px solid #C10000;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
</body>
</html>لننظر للنتيجة:
العنصر طفح ، هذه مشكلة سيئة مع css سببها أن أبعاد العنصر لاتتضمن عرض الإطار والإزاحة الخارجية، لذا فحجم العنصر الحقيقي يساوي:
العرض الحقيقي = العرض + الإزاحة لليمين + الإزاحة لليسار + الإطار الأيمن + الإطار الأيسر
الإرتفاع الحقيقي = الإرتفاع + الإزاحة للأعلى + الإزاحة للأسفل + الإطار العلوي + الإطار السفلي
في حالتنا فالعرض والإرتفاع الحقيقي للعنصر يساوي 300 + 2 × 2 + 3 × 2 = 310 بكسل.
هناك طريقتين لحلها، الطريقة الأولى عن طريق طرح الإزاحة الخارجية وعرض الإطار ونعدّل العرض والإرتفاع إلى 300 - (2 * 2 + 3 * 2) = 290 بكسل:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<title>مثال</title>
<style>
#container {
width: 300px;
height: 300px;
background: #669EFF;
}
#child {
width: 290px; /* width - padding-lef - padding-right - border-left - border-right */
height: 290px; /* width - padding-lef - padding-right - border-left - border-right */
background: #FF6F3A;
padding: 2px;
border: 3px solid #C10000;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
</body>
</html>الطريقة الثانية هي استخدام خاصية جديدة أضيفت في css3 اسمها box-sizing ، عند تمرير القيمة border-box لها، فتطلب من التصفّح أن يأخذ الإطار والإزاحة الخارجية في الحساب عند حساب الأبعاد، معها ستحل مشكلة الأبعاد السابقة وأيضاً هي الحل الوحيد إذا كنت تريد أن يكون العرض والإرتفاع نسبي مثل 100% وعند التعامل مع حقول الإدخال مثل input و textarea، طريقة استخدامها كالتالي:
box-sizing : border-box; -moz-box-sizing : border-box; -webkit-box-sizing : border-box;
وتضع العرض والإرتفاع كماتريد.
دعم المتصفحات لها ممتاز، فإكسبلورر يدعمها من الإصدار 8، يدعم الصيغة القياسية box-sizing، وفايرفوكس يدعمها منذ زمن طويل لكنه لايزال يطلب الشق -moz وأغلب متصفحات webkit تدعم الآن الصيغة القياسية ، انظر لدعم المتصفحات لها.
مثال عليها:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<title>مثال</title>
<style>
#container {
width: 300px;
height: 300px;
background: #669EFF;
}
#child {
width: 300px;
height: 300px;
background: #FF6F3A;
padding: 2px;
border: 3px solid #C10000;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
</body>
</html>النتيجة في كل الطريقتين:
بدون الشفافية:
بالتوفيق