تخطيط CSS - العرض والحد الأقصى للعرض
باستخدام العرض والعرض الأقصى والهامش: تلقائي ؛
كما ورد في الفصل السابق. يشغل عنصر مستوى الكتلة دائمًا العرض الكامل المتاح (يمتد إلى اليسار واليمين بقدر الإمكان).
سيؤدي تعيين width
عنصر على مستوى الكتلة إلى منعه من التمدد إلى حواف الحاوية الخاصة به. بعد ذلك ، يمكنك ضبط الهوامش على تلقائي ، لتوسيط العنصر أفقيًا داخل الحاوية الخاصة به. سيأخذ العنصر العرض المحدد ، وسيتم تقسيم المساحة المتبقية بالتساوي بين الهامشين:
ملاحظة: تحدث المشكلة مع ما <div>
سبق عندما تكون نافذة المتصفح أصغر من عرض العنصر. ثم يضيف المتصفح شريط تمرير أفقي إلى الصفحة.
سيؤدي استخدام max-width
بدلاً من ذلك ، في هذه الحالة ، إلى تحسين تعامل المتصفح مع النوافذ الصغيرة. هذا مهم عند جعل موقع ما قابلاً للاستخدام على الأجهزة الصغيرة:
نصيحة: قم بتغيير حجم نافذة المتصفح إلى أقل من 500 بكسل ، لترى الفرق بين قسمي divs!
فيما يلي مثال على قسمي div أعلاه:
مثال
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}