Layout - ویژگی width و max-width

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها


استفاده از width, max-width و margin: auto;

همان‌طور که در فصل گذشته توضیح داده شد؛ یک عنصر سطح بلوک همیشه تمام عرض موجود در صفحه را در بر می‌گیرد (از جهات چپ و راست تا جایی که می‌تواند کشیده می‌شود)

تنظیم width برای یک عنصر سطح بلوک از کشیده شدن آن تا لبه‌های ظرف خود (به انگلیسی: container) جلوگیری می‌کند. بنابراین،می‌توانید مقدار حاشیه ها (margins) را روی auto تنظیم کنید، تا عنصر درون ظرف (container) خود به صورت افقی وسط چین شود. عنصر، عرض (به انگلیسی: width) تعیین شده را در برمی گیرد، و مقدار فضای باقیمانده به‌طور مساوی بین دو حاشیه تقسیم خواهد شد:[۱]

عنصر <div> عرضی به اندازه 500px دارد، و حاشیه آن روی auto تنظیم شده‌است.

نکته: مشکل تگ <div> زمانی رخ می‌دهد که پنجره مرورگر کوچکتر از عرض عنصر باشد. در این حالت مرورگر یک نوار پیمایش افقی به صفحه اضافه می‌کند.

استفاده از max-width در این موقعیت به جای width، موجب بهبود عملکرد مرورگر در مدیریت پنجره‌های کوچک می‌شود. این امر برای ساخت وب‌سایت قابل استفاده روی دستگاه‌های کوچک بسیار مهم است.

عنصر <div> حداکثر عرضی به اندازه 500px دارد، و حاشیه آن روی auto تنظیم شده‌است.

نکته: عرض پنجره مرورگر را به کمتر از 500px تغییر دهید، تا تفاوت بین دو div را ببینید!

در اینجا مثالی از هر دو div وجود دارد:

مثال
 1 div.ex1 {
 2   width: 500px;
 3   margin: auto;
 4   border: 3px solid #73AD21;
 5 }
 6 
 7 div.ex2 {
 8   max-width: 500px;
 9   margin: auto;
10   border: 3px solid #73AD21;
11 }


منابع آموزشی