آموزش طرح بندی CSS – عرض و حداکثر عرض

12 جولای 2021

با استفاده از عرض ، حداکثر عرض و حاشیه: خودکار؛

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

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

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

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

نکته: اندازه پنجره مرورگر را به عرض کمتر از 500 پیکسل تغییر دهید تا تفاوت بین دو تقسیم را ببینید!

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

مثال

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.