جلسه ۲۱ – طول و عرض در CSS

منظور از طول در CSS چیست؟ منظور از عرض در CSS چیست؟ آیا تفاوتی بین طول و عرض HTML و طول و عرض CSS وجود دارد؟ در این مقاله می‌خواهیم در رابطه با height در CSS و Width در CSS صحبت کنیم.

طول و عرض در CSS

در CSS، هر عنصری ابعاد و اندازه های مختص به خودش رو داره.

همچنین راه های متفاوتی برای مشخص کردن این ابعاد وجود داره. برای مثال، ما می‌تونیم با استفاده از padding، ابعاد یک عنصر تا مرز های خودش رو مشخص کنیم.

اما در این مقاله، با راه مستقیم تری برای تنظیم ابعاد عناصر آشنا می‌شیم.

در اینجا ما به دو بحث می‌پردازیم:

• خاصیت width و height چی هستن و چه کاربری دارن؟
• مقادیر مورد قبول این خاصیت ها، بر حسب چه واحد هایی نوشته می‌شن؟

نحوه استفاده از Height و Width در CSS

استفاده کردن از خاصیت های width و height، می‌تونه به ما کنترل بیشتری برای تعریف کردن ابعاد برای عناصر عطا کنه.

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

کد HTML:

<div>
   Mizfa content
</div>

کد CSS:

div{
   background-color: yellow;
   width:100px;
   height:100px;
}

نتیجه:

همونطور که می‌بینیم، عرض و طول div مورد نظر ما به ۱۰۰ پیکسل ختم شده. height و width نقش های بسیار حیاتی ای رو در وب سایت ما ایجاد می‌کنن. به خصوص زمانی که می‌خوایم از تصاویر استفاده کنیم.

نکته: طول و عرض برای متن ها تعریف نشده. ابعاد اون ها توسط خصوصیاتی نظیر font-size تعیین میشه.

مقادیر مورد قبول در height و width

حالا که با خاصیت width و خاصیت height آشنا شدیم، وقت آن است که با مقادیر مورد قبول این دو ویژگی آشنا شویم.

مقدار auto

مقدار auto، مقدار پیشفرض دو خاصیت width و height‌ هست.

در صورت اختصاص دادن این مقدار به این دو خاصیت، عرض و طول عنصر ما، متناسب با بزرگی محتوای داخلش تنظیم می‌شه.

در صورت عدم وجود محتوا در داخل عنصر، طول و عرض اون، صفر تلقی می‌شه.

مقدار های عددی

این مقدار ها، بر حسب عدد و واحد مختص به خودشون، تنظیم می‌شن.

واحد ها در CSS به دو گروه تقسیم می‌شن. یا وابسته هستن و یا مطلق.
واحد های وابسته، به اندازه و سایز عناصر دیگه بستگی دارن. واحد های مطلق، اینطور نیستن و  کاملا مستقلن.

حالا واحدهایی که تا الان یاد گرفتیم رو باهم بررسی کنیم.

پیکسل px
یک واحد مطلقه و به چیزی بستگی نداره، مثل سانتی متر و متر. طول و عرض رو بر حسب پیکسل مشخص می‌کنه. یعنی اگه عرض یک عنصر رو برابر ۲۰ پیکسل قرار بدیم، این عرض ثابت خواهد موند و به هیچ عنوان از ۲۰ پیکسل، بیشتر یا کمتر نخواهد شد.

نکته: خاصیت های width و height، نمی‌تونن مقدار منفی داشته باشن.

/*--- !اینطور چیزی نداریم ---*/
width: -30px;

درصد %
یک واحد وابستست. مقدار اون به اندازه عنصر پدر اون بستگی داره.

اگه عرض یک عنصر رو ۲۰٪ قرار بدیم به این معنیست که عرض عنصر مورد نظر، ۲۰ درصد عرض عنصر پدر خواهد بود.

بدین ترتیب، هر تغییری در عرض عنصر پدر، باعث تغییر در عرض عنصر مورد نظر ما می‌شه.

به مثال زیر توجه کنین:

کد HTML:

<div class="parent">
   <div class="child">
      Mizfa content
   </div>
</div>

کد CSS:

/*--- استایل عنصر پدر ---*/
.parent{
   width: 600px;
   background-color: yellow;
   height: 300px;
}
/*--- استایل عنصر فرزند ---*/
.child{
   width:30%;
   background-color: limegreen;
   height: 300px;
}

نتیجه:

به صورت دقیق تر، عرض عنصر پدر (عنصر زرد رنگ)، ۶۰۰ پیکسل و عرض عنصر فرزند (عنصر سبز رنگ)، ۳۰٪ عنصر پدره.

با یک محاسبه سر انگشتی، متوجه می‌شیم که عرض عنصر فرزند، ۱۸۰ پیکسل خواهد بود.

در صورتی که عرض عنصر پدر به ۵۰۰ پیکسل افت کنه، عنصر فرزند هم، با توجه به عرض وابسته خودش، به ۱۵۰ پیکسل افت خواهد کرد.

این موضوع، در مورد بیشتر شدن عرض عنصر پدر نیز صادقه.

اگه مثال مورد نظر، ابهام یا سوال خاصی براتون پیش میاره، تو قسمت نظرات پایگاه دانش میزفا حتما و حتما مطرح کنین. همیشه پاسخگو خواهم بود 🙂

نکته: خود صفحه وب ما، می‌تونه یک عنصر پدر برای عناصری که در تگ body می‌نویسیم به حساب بیاد.

لزوم استفاده از واحد درصد

چرا باید رو یاد گیری واحد درصد حساس باشیم؟

دلایل بسیاری می‌تونه داشته باشه. از نظر شخصی خودم، دو مسئله هست که کدنویسارو، چه حرفه ای و چه مبتدی، مجبور می‌کنه که بیشتر از % استفاده کنن، تا پیکسل.

1. قابل تصور بودن ابعاد: زمانی که ما ابعاد یک عنصر رو برای مثال، برابر ۳۰۰پیکسل قرار می‌دیم، مطمئن نیستیم که چقدر از صفحه ما رو می‌پوشونه، چون معیاری برای اندازه گیری ۳۰۰ پیکسل وجود نداره و تمام اندازه گیری ها در خود سیستم ما اتفاق میفته. اما با استفاده از درصد، میتونیم بدونیم که ۳۰٪ میشه یک سوم عنصر پدر، یا با توجه به نکته ای که گفته شد، می‌تونیم به راحتی یک سوم صفحه وب سایت رو با درصد پوشش بدیم.
2. واکنش گرا بودن صفحه: واکنش گرا بودن به معنای مناسب بودن صفحه وب ما برای تمامی صفحات مختلف نظیر انواع لپ تاب ها، تبلت ها و گوشی هاست. به عبارت ساده تر، وقتی صفحه رو بزرگ کوچیک می‌کنیم چیزی بهم نریزه. استفاده کردن از درصد، می‌تونه تاثیر بسیار زیادی رو واکنش گرا بودن صفحه ما بزاره. این بحث رو در مقاله های طراحی واکنش گرا در CSS به خوبی با هم یاد می‌گیریم.

پایان ترم

سوال:

ارتباط padding با width و height به چه شکله؟ آیا با وجود عرض و طول مشخص شده، می‌شه برای عنصر padding در نظر گرفت؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله از اموزش css ، یاد گرفتیم که چطور می‌تونیم توسط دو خاصیت width و height، طول و عرض تعریف کنیم.

همچنین، فهمیدیم که با چه واحد ها و روش هایی می‌تونیم این طول و عرض رو مشخص کنیم.

در نهایت، با اهمیت واحد درصد در تعیین طول و عرض آشنا شدیم و فایده های اون رو با هم یاد گرفتیم.

توجه داشته باشید که ما علاوه بر CSS ، در HTML نیز خاصیت های طول و عرض را داریم که می‌توانید مشخصات آن‌ها را در مقاله لیست همه Attribute ها در HTML مشاهده کنید.

در جلسه بعدی با نکات مهمی در ویژگی width در سی اس اس و ویژگی height در سی اس اس آشنا خواهیم شد.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی