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

تاریخ بروزرسانی: ۲۸ اسفند ۱۳۹۷ تعداد بازدید : 18 بازدید بدون دیدگاه

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

قدم قبلی >< قدم بعدی

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

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

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

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

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

 

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

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

 

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

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

مثال:

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

 

 

 

گام قبلی >< گام بعدی

 

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

لینک کوتاه این مطلب: https://tiktheme.com/?p=16048


کانال تلگرام تیک تم

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

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