آموزش CSS مبتدی : اندازه بندی آیتم ها در CSS
در درسهای مختلف تاکنون، با روشهای مختلفی برای اندازهگیری عناصر در یک صفحه وب با استفاده از CSS مواجه شدهاید. درک اینکه ویژگیهای مختلف در طراحی شما چقدر بزرگ خواهند بود، مهم است. بنابراین، در این درس، روشهای مختلفی را که عناصر از طریق CSS اندازه میگیرند، خلاصه میکنیم و چند اصطلاح در مورد اندازهگیری را تعریف میکنیم که در آینده به شما کمک خواهد کرد.
اندازه طبیعی یا ذاتی آیتم ها
عناصر HTML دارای اندازه طبیعی هستند که قبل از اینکه تحت تأثیر هرگونه CSS قرار گیرند، تنظیم میشوند. یک مثال ساده، یک تصویر است. یک فایل تصویر حاوی اطلاعات اندازه است که به عنوان اندازه ذاتی آن توصیف میشود. این اندازه توسط خود تصویر تعیین میشود، نه توسط هیچ قالببندی که ما اعمال میکنیم.
اگر تصویری را در صفحه قرار دهید و ارتفاع یا عرض آن را تغییر ندهید، چه با استفاده از ویژگیهای و چه با CSS، با استفاده از آن اندازه ذاتی نمایش داده میشود. ما به تصویر در مثال زیر یک حاشیه دادهایم تا بتوانید میزان اندازه آن را همانطور که در فایل آن تعریف شده است، ببینید.
از سوی دیگر، یک خالی، اندازهی خودش را ندارد. اگر یک بدون محتوا به HTML خود اضافه کنید، سپس همانطور که با تصویر انجام دادیم، به آن حاشیه بدهید، یک خط در صفحه خواهید دید. این حاشیهی جمعشدهی است - هیچ محتوایی برای باز نگه داشتن آن وجود ندارد.
در مثال زیر، آن حاشیه تمام عرض ظرف را میپوشاند، زیرا یک عنصر سطح بلوک است، رفتاری که باید برای شما آشنا شود. ارتفاع (یا اندازهای در بعد بلوک) ندارد زیرا محتوایی ندارد.
در مثال بالا، سعی کنید مقداری متن را درون عنصر خالی اضافه کنید. خواهید دید که حاشیه باز میشود زیرا ارتفاع عنصر توسط محتوا تعریف میشود. باز هم، این اندازه ذاتی عنصر است - اندازه آن توسط محتوای آن تعریف میشود.
البته میتوانیم به عناصر طراحی خود اندازه مشخصی بدهیم. وقتی به یک عنصر اندازهای داده میشود (که محتوای آن باید در آن اندازه جا شود)، آن را اندازه بیرونی مینامیم.
در مثال بعدی، به دو مقدار عرض و ارتفاع مشخصی میدهیم و اکنون صرف نظر از محتوایی که درون آنها قرار میگیرد، آن اندازه را خواهند داشت. همانطور که در سمت راست نشان داده شده است، اگر محتوای بیشتری نسبت به عنصر حاوی آن وجود داشته باشد، تنظیم ارتفاع میتواند باعث سرریز محتوا شود (در درس بعدی درباره سرریز بیشتر خواهید آموخت).
به دلیل این مشکل سرریز، تنظیم ارتفاع عناصر با طول یا درصد، کاری است که باید در وب با دقت زیادی انجام دهیم.
از بسیاری جهات، درصدها مانند واحدهای طول عمل میکنند و همانطور که در درس مربوط به مقادیر و واحدها بحث کردیم، اغلب میتوان آنها را به جای طولها به کار برد. هنگام استفاده از درصد، باید بدانید که درصد آن چیست. در مورد یک جعبه درون یک کانتینر دیگر، اگر به جعبه فرزند، عرض درصدی بدهید، آن درصد، درصدی از عرض کانتینر والد خواهد بود.
دلیل این امر این است که درصدها در برابر اندازه بلوک حاوی خود، تفکیک میشوند. بدون اعمال هیچ درصدی، کادر ما ۱۰۰٪ فضای موجود را اشغال میکند، زیرا یک عنصر سطح بلوک است. اگر به آن عرض درصدی بدهیم، این به درصدی از فضایی تبدیل میشود که معمولاً پر میکند.
مثال بالا را ویرایش کنید:
تعریف عرض کادر را حذف کنید تا تأیید شود که به طور پیشفرض ۱۰۰٪ از عرض موجود را اشغال میکند.
تغییر قبلی خود را برگردانید - دوباره به کادر عرض ۵۰٪ بدهید.
حالا به ظرف عرض ۵۰٪ بدهید. خواهید دید که عرض کادر کوچکتر میشود، زیرا نسبت به عرض ظرف آن است.
اگر مارجینها و پدینگ را به صورت درصد تنظیم کنید، ممکن است متوجه رفتار عجیبی شوید.
در مثال زیر، یک کادر داریم که مارجین و پدینگ آن را 10٪ و فاصلهگذاری آن را 10٪ تنظیم کردهایم. مارجین و پدینگ در بالا و پایین کادر، به اندازه مارجین و پدینگ در چپ و راست کادر است.
ممکن است انتظار داشته باشید که درصد مارجین بالا و پایین، درصدی از ارتفاع عنصر و درصد مارجین چپ و راست، درصدی از عرض عنصر باشد. با این حال، اینطور نیست!
وقتی از مارجین و پدینگ تنظیمشده بر اساس درصد استفاده میکنید، مقدار آن از اندازه درونخطی بلوک حاوی محاسبه میشود - بنابراین، هنگام کار با یک زبان افقی، عرض محاسبه میشود. در مثال ما، تمام مارجین و پدینگها 10٪ از عرض هستند. این بدان معناست که میتوانید مارجین و پدینگهایی با اندازه مساوی در اطراف کادر داشته باشید. اگر از درصدها به این روش استفاده میکنید، این نکته را باید به خاطر داشته باشید.
علاوه بر تعیین اندازه ثابت برای عناصر، میتوانیم از CSS بخواهیم که به یک عنصر حداقل یا حداکثر اندازه بدهد. اگر جعبهای دارید که ممکن است حاوی مقدار متغیری از محتوا باشد و همیشه میخواهید حداقل ارتفاع مشخصی داشته باشد، میتوانید ویژگی را روی آن تنظیم کنید. جعبه همیشه حداقل این ارتفاع را خواهد داشت، اما اگر محتوای بیشتری نسبت به فضای موجود در جعبه در حداقل ارتفاع آن وجود داشته باشد، بلندتر میشود.
در مثال بعدی، میتوانید دو جعبه را ببینید که هر دو حداقل ارتفاع تعریف شده ۱۰۰ پیکسل دارند. جعبه سمت چپ ۱۰۰ پیکسل ارتفاع دارد؛ جعبه سمت راست محتوایی دارد که به فضای بیشتری نیاز دارد، بنابراین از ۱۰۰ پیکسل بلندتر شده است.
این برای جلوگیری از سرریز شدن هنگام برخورد با مقادیر متغیر محتوا بسیار مفید است.
حداکثر عرض روی تصاویر max-width
یکی از کاربردهای رایج این است که اگر فضای کافی برای نمایش تصاویر در عرض ذاتیشان وجود نداشته باشد، باعث کوچک شدن آنها میشود، در حالی که مطمئن میشویم از آن عرض بزرگتر نمیشوند.
به عنوان مثال، اگر عرض را روی یک تصویر ۱۰۰٪ تنظیم کنید و عرض ذاتی آن کوچکتر از ظرف آن باشد، تصویر مجبور به کشیده شدن و بزرگتر شدن میشود و باعث میشود پیکسلی به نظر برسد.
اگر به جای آن از استفاده کنید و عرض ذاتی آن کوچکتر از ظرف آن باشد، تصویر مجبور به کشیده شدن و بزرگتر شدن نمیشود و در نتیجه از پیکسلی شدن جلوگیری میشود.
در مثال زیر، ما سه بار یک تصویر را جاسازی کردهایم:
به تصویر اول داده شده است و در ظرفی بزرگتر از آن قرار دارد، بنابراین به اندازه عرض ظرف کشیده میشود.
تصویر دوم روی آن تنظیم شده است و بنابراین برای پر کردن ظرف کشیده نمیشود.
کادر سوم دوباره شامل همان تصویر است، همچنین با تنظیم شده است؛ در این حالت، میتوانید ببینید که چگونه کوچک شده تا در کادر جا شود.
این تکنیک برای واکنشگرا کردن تصاویر استفاده میشود، به طوری که وقتی در دستگاههای کوچکتر مشاهده میشوند، به طور مناسب کوچک میشوند. با این حال، نباید از این تکنیک برای بارگذاری تصاویر بسیار بزرگ و سپس کوچک کردن آنها در مرورگر استفاده کنید. تصاویر باید به طور مناسب اندازه گیری شوند تا بزرگتر از اندازه مورد نیاز برای بزرگترین اندازهای که در طراحی نمایش داده میشوند، نباشند. دانلود تصاویر بیش از حد بزرگ باعث کند شدن سایت شما میشود و اگر کاربران برای دادهها به صورت مگابایتی هزینه کنند، میتواند هزینه بیشتری برای آنها داشته باشد.
نمای صفحه - که ناحیه قابل مشاهده صفحه شما در مرورگری است که برای مشاهده سایت از آن استفاده میکنید - نیز دارای اندازه است. در CSS، واحدهایی داریم که به اندازه نمای صفحه مربوط میشوند - واحد vw برای عرض نمای صفحه و vh برای ارتفاع نمای صفحه. با استفاده از این واحدها، میتوانید اندازه چیزی را نسبت به نمای صفحه کاربر تعیین کنید.
1vh برابر با 1٪ از ارتفاع نمای صفحه و 1vw برابر با 1٪ از عرض نمای صفحه است. میتوانید از این واحدها برای اندازه کادرها و همچنین متن استفاده کنید. در مثال زیر، کادری داریم که اندازه آن 20vh و 20vw است. کادر حاوی حرف A است که اندازه فونت آن 10vh است.
تغییر مقادیر vh و vw به ترتیب اندازه کادر و فونت را تغییر میدهد؛ تغییر اندازه viewport نیز اندازه کادر و فونت را تغییر میدهد زیرا اندازه آنها نسبت به viewport تغییر میکند. برای مشاهده تغییر اندازه کادر و متن هنگام تنظیم اندازه viewport، مثال را در یک برگه جدید بارگذاری کنید و اندازه پنجره مرورگر را تغییر دهید.
اندازهبندی چیزها بر اساس viewport میتواند در طراحیهای شما مفید باشد. به عنوان مثال، اگر میخواهید یک بنر تمام صفحه قبل از بقیه محتوای شما نمایش داده شود، بالا بردن آن قسمت از صفحه به اندازه ۱۰۰vh، بقیه محتوا را به زیر viewport هل میدهد، به این معنی که فقط زمانی که سند اسکرول شود، ظاهر میشود.
