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

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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 }

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل