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

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

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

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

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

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

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

 

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

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

 

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

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

مثال:

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

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

 

 

 

 

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

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



منبع مطلب

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

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

خصوصیت display در CSS /آموزش خصوصیت display در CSS یا آموزش CSS Layout

آموزش خصوصیت display در CSS   CSS Layout – خصوصیت display در CSS خصوصیت display …

پاسخی بگذارید

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