CSS max-width property
-
في هذا الدرس نتعرف على كيفية استخدام الخاصية max-width
ما هي Max-width:
تُستخدم خاصية max-width في CSS لتحديد أقصى width للعنصر. بحيث لا يمكن أن تكون قيمة width لهذه العنصر أكبر من max-width. إذا كان المحتوى أكبر من max-width ، فسوف ينتقل إلى السطر التالي وإذا كان المحتوى أصغر من max-width ، فلن يكون له أي تأثير.
الفائدة من هذه الخاصية هي تحسين تعامل المتصفح مع النوافذ الصغيرة. هذا مهم عند جعل موقع ما قابلاً للاستخدام على الأجهزة الصغيرة.
طريقة الكتابة :
max-width: value;
القيم Parameters or Arguments التي يمكن استخدامها :
| القيمة | الوصف |
| fixed | قيمة ثابتة قد تكون pixels, em's div { max-width: 150px; } div { max-width: 50em; } |
| percentage | نسبة مئوية div { max-width: 90%; } |
| none | لن يتم تطبيق width في هذه الحالة div { max-width: none; } |
| inherit | سيرث element قيمة max-width من parent element div { max-width: inherit; } |
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 600px;
margin: auto;
padding: 5px;
border: 3px solid #9b9c99;
border-radius: 4px;
}
.div2 {
max-width: 600px;
margin: auto;
padding: 5px;
border: 3px solid #9b9c99;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>ِapply CSS Max-width</h2><div class="div1">Max-width تطبيق العرض دون استخدام خاصية، Max-width تطبيق العرض دون استخدام خاصية </div><br><div class="div2">Max-width تطبيق العرض مع استخدام خاصية، Max-width تطبيق العرض مع استخدام خاصية</div></body>
</html>
اترك تعليقك