صفحه اصلی / CSS Layout / بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

آموزش عرض و حداکثر عرض

CSS Layout – عرض و حداکثر عرض

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

همانطور که در درس قبل ذکر شد؛ یک عنصر سطح بلوک همیشه عرض کامل را در اختیار شما می گذارد (تا آنجا که ممکن است به سمت چپ و راست برسد).

تنظیم عرض یک عنصر سطح بلوک جلوگیری از کشش به لبه های ظرف آن است. سپس می توانید حاشیه ها را به صورت خودکار تنظیم کنید تا عنصر را درون ظرف خود به صورت افقی قرار دهید. عنصر از عرض مشخص شده استفاده می کند و فضای باقیمانده به طور مساوی بین دو حاشیه تقسیم می شود:

 

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

با استفاده از حداکثر عرض، در این وضعیت، مرور مرورگر پنجره های کوچک را بهبود می بخشد. هنگام ساخت سایت قابل استفاده در دستگاه های کوچک مهم است:

 

نکته: تغییر اندازه پنجره مرورگر به عرض کمتر از ۵۰۰ پیکسل، برای دیدن تفاوت بین دو divs!

در اینجا یک مثال از دو div در بالا آمده است:

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

 

 

 

 

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

متن در CSS/بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

  آموزش متن در CSS CSS Text در این درس به بررسی خصوصیات متن در CSS …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *