تحديد أبعاد العنصر css
تحتوي لغة CSS على العديد من خصائص الأبعاد ، مثل width و height وmax-width وmin-width و max-height وmin-height التي تسمح لنا بالتحكم في عرض العنصر وارتفاعه. في هذا الدرس سوف نتعلم كيفية استخدام هذه الخصائص لإنشاء تخطيط أفضل لصفحة الويب.
تحديد عرض و إرتفاع العنصر
تحدد الخصائص width و height عرض منطقة المحتوى للعنصر وارتفاعها.
لا يشمل هذا العرض والارتفاع الحواشي paddings أو الحدود borders أو الهوامش margins. راجع درس نموذج الصندوق لمعرفة كيفية حساب العرض والارتفاع الفعليين لصندوق العنصر.
دعنا نجرب المثال التالي ونرى كيفية عمل هذه الخصائص :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>تحديد عرض وارتفاع العنصر</title>
<style>
div {
width: 400px;
height: 200px;
background: #85e0e0;
font-size :30px;
text-align:center;
}
</style>
</head>
<body>
<div>قم بتغيير القيم لترى كيفية عمل هذه الخصائص</div>
</body>
المخرجات
تحدد قواعد CSS أعلاه عرضًا ثابتًا يبلغ 300 بكسل وارتفاع 200 بكسل للعنصر <div>.
يمكن أن تأخذ خصائص العرض والارتفاع القيم التالية:
- قيم بالبكسل او
emاوremاوptاوcm... إلخ. - النسبة المئوية : النسبة المئوية تكون نسبية للعنصر الأب.
-
auto- يحسب متصفح الويب عرضًا مناسبًا للعنصر. -
initial- يضبط العرض والارتفاع على قيمته الافتراضية ، وهي القيمةauto. -
inherit- تحدد أن العرض يجب أن يورث من العنصر الأب.
لا يمكنك تحديد قيم سالبة للخصائص width و height .
عادةً عندما تقوم بإنشاء عنصر كتلة block element , مثل <div> و <p> ... إلخ. يقوم متصفح الويب تلقائيًا بتعيين عرضه على 100٪ من العرض المتاح ، والارتفاع بما يتناسب مع ما هو مطلوب لعرض المحتوى.
يجب تجنب تحديد عرض وارتفاع ثابت للعنصر ما لم يكن ذلك ضروريًا.
تحديد الحد الأقصى للعرض والارتفاع
يمكنك استخدام الخصائص max-width و max-height لتحديد الحد الأقصى للعرض والارتفاع لمنطقة المحتوى. لا يشمل الحد الأقصى للعرض والارتفاع الحواشي أو الحدود أو الهوامش.
لا يمكن أن يكون العنصر اعرض من قيمة الخاصية max-width ، حتى إذا تم تحديد قيمة أكبر للخاصية width. على سبيل المثال ، إذا تم تحديد قيمة الخاصية width بـ 300 بكسل وتم تحديد قيمة الخاصية max-width بـ 200 بكسل ، فسيكون العرض الفعلي للعنصر 200 بكسل. لنلق نظرة على المثال التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد أقصى عرض للعنصر</title>
<style>
div {
width: 300px;
max-width: 200px;
background: #bbb3ff;
text-align: center;
}
p {
float: left;
width: 300px;
background: #eee8aa;
direction : rtl;
text-align: center;
}
</style>
</head>
<body>
<div>تم تحديد الحد الأقصى لعرض عنصر div هذا بـ 200 بكسل ، لذا لا يمكن أن يكون أعرض من ذلك.</div>
<p>قم بتعديل القيم للخاصة max-width و الخاصية width لترى كيفية عملهما</p>
</body>
</html>
المخرجات
إذا تم تحديد خاصية min-width بقيمة أكبر من قيمة خاصية max-width ، في هذه الحالة ستكون قيمة min-width هي القيمة المطبقة.
وبالمثل ، فإن العنصر الذي تم تطبيق الخاصية max-height عليه لن يكون أبدًا أطول من القيمة المحددة لهذه الخاصية ، حتى إذا تم اعطاء قيمة أكبر للخاصية height . على سبيل المثال ، إذا تم تحديد قيمة الخاصية height بـ 200 بكسل وتم تحديد قيمة الخاصية max-height بـ 100 بكسل ، فسيكون الارتفاع الفعلي للعنصر 100 بكسل.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد الارتفاع الأقصى للعنصر</title>
<style>
body {
direction : rtl;
text-align: center;
}
div {
height: 200px;
max-height: 100px;
background: #bbb3ff;
}
p {
max-height: 100px;
background: #eee8aa;
}
</style>
</head>
<body>
<div>تم ضبط الحد الأقصى لارتفاع عنصر div هذا بـ 100 بكسل ، لذلك لا يمكن أن يكون أطول من ذلك.</div>
<p>قم بتعديل قيم الخصائص max-height و height لترى كيفية عملهما</p>
</body>
</html>
المخرجات
إذا تم تحديد قيمة للخاصية min-height أكبر من قيمة الخاصية max-height ، في هذه الحالة ستكون قيمة الخاصية min-height هي القيمة المطبقة.
تحديد الحد الأدنى للعرض والارتفاع
يمكننا استخدام الخاصية min-width و min-height لتحديد الحد الأدنى للعرض والارتفاع لمنطقة المحتوى. لا يشمل الحد الأدنى للعرض والارتفاع الحواشي أو الحدود أو الهوامش.
لا يمكن أن يكون العنصر أضيق من قيمة min-width ، حتى إذا تم تحديد قيمة للخاصية width أقل من ذلك. على سبيل المثال ، إذا تم تحديد قيمة الخاصية width بـ 300 بكسل وتم تحديد قيمة الخاصية min-width بـ 400 بكسل ، فسيكون العرض الفعلي للعنصر 400 بكسل. دعونا نرى كيف عملها في المثال التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد الحد الأدنى لعرض العنصر</title>
<style>
div {
width: 200px;
min-width: 300px;
background: #bbb3ff;
direction : rtl;
text-align : center;
}
p {
min-width: 400px;
background: #eee8aa;
direction : rtl;
text-align : center;
}
</style>
</head>
<body>
<div>يتم تحديد الحد الأدنى لعرض عنصر div هذا بـ 300 بكسل ، لذا لا يمكن أن يكون أضيق من ذلك.</div>
<p>قم بتعديل القيم للخاصة min-width و الخاصية width لترى كيفية عملهما</p>
</body>
</html>
المخرجات
عادةً ما تُستخدم الخاصية min-width لضمان أن يكون للعنصر حد أدنى للعرض على الأقل حتى في حالة عدم وجود محتوى. ومع ذلك ، سيتم السماح للعنصر بالنمو بشكل طبيعي إذا تجاوز محتواه الحد الأدنى للعرض المحدد.
وبالمثل ، فإن العنصر الذي يتم تطبيق الخاصية min-height عليه لن يكون أبدًا أقصر من القيمة المحددة لهذه الخاصية ، حتى إذا تم تحديد قيمة أقل للخاصية height . على سبيل المثال ، إذا تم تحديد قيمة للخاصية height بـ 200 بكسل ، وتم تحديد قيمة الخاصية min-height بـ 300 بكسل ، فسيكون الارتفاع الفعلي للعنصر 300بكسل.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد الحد الأدنى لارتفاع العنصر</title>
<style>
div {
height: 200px;
min-height: 300px;
background: #bbb3ff;
direction : rtl;
text-align : center;
}
p {
min-height: 100px;
background: #eee8aa;
direction : rtl;
text-align : center;
}
</style>
</head>
<body>
<div>تم تحديد الحد الأدنى لارتفاع عنصر div هذا على 300 بكسل ، لذا لا يمكن أن يكون أقصر من ذلك.</div>
<p>قم بتعديل القيم للخاصة min-height و الخاصية height لترى كيفية عملهما</p>
</body>
</html>
المخرجات
عادةً ما تُستخدم الخاصية min-height للتأكد من أن أحد العناصر لديه على الأقل حد أدنى للارتفاع حتى في حالة عدم وجود محتوى. ومع ذلك ، سيتم السماح للعنصر بالنمو بشكل طبيعي إذا تجاوز المحتوى الحد الأدنى للارتفاع المحدد.
تحديد نطاق العرض والارتفاع
غالبًا ما يتم استخدام الخصائص min-width و min-height مع خصائص max-width و max-height لصنع نطاق عرض وارتفاع لعنصر.
يمكن أن يكون هذا مفيدًا جدًا لإنشاء تصميم مرن. في المثال التالي ، سيكون الحد الأدنى لعرض عنصر <div> 300 بكسل ويمكن أن يمتد أفقيًا بحد أقصى 500 بكسل.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد نطاق العرض للعنصر</title>
<style>
body{
direction : rtl;
}
div {
float: left;
min-width: 300px;
max-width: 500px;
height: 100px;
background: #eee8aa;
}
</style>
</head>
<body>
<p><strong>ملاحظة:</strong> سيكون الحد الأدنى لعرض عنصر div التالي 300 بكسل ، ويمكن أن يمتد أفقيًا حتى 500 بكسل. أدخل بضعة أسطر من النص داخل عنصر div لفهم كيفية عمله.</p>
<div></div>
</body>
</html>
المخرجات
وبالمثل ، يمكننا تحديد نطاق ارتفاع لعنصر. في المثال أدناه ، سيكون الحد الأدنى لارتفاع العنصر <div> 300 بكسل ويمكن أن يمتد رأسيًا حتى 500 بكسل كحد أقصى.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد نطاق الارتفاع لعنصر</title>
<style>
body{
direction : rtl;
}
div {
min-height: 300px;
max-height: 500px;
background: #eee8aa;
}
</style>
</head>
<body>
<p><strong>ملاحظة:</strong> سيكون الحد الأدنى لارتفاع عنصر div التالي 300 بكسل ، ويمكن أن يمتد رأسيًا حتى 500 بكسل. أدخل بضعة أسطر من النص داخل عنصر div لفهم كيفية عمله.</p>
<div></div>
</body>
</html>
المخرجات
