سلام دوستان. از چند وقت پیش تصمیم گرفتم یه دستی به سر و روی نوت های CSS ام بکشم و به عنوان مطالب کوتاه باهاتون به اشتراک بزارم و این دومین مطلب از این سری هست که براتون آماده کردم.
مطلب قبلی:
توی پروژه ها بعضی وقتا لازم میشه که ارتفاع (height) یک عنصر هم اندازه با عرض (width) اون باشه و زمانی که عرض رو متغیر در نظر بگیریم پیاده سازی این مورد واقعا دردناک میشه. ?
برای حل این مورد میتونیم از شبه عناصر (psuedo-elements) استفاده کنیم. کد زیر رو نگاه کنید:
من عرض کلاس square رو 100% در نظر گرفتم و به عنصر after اش ویژگی padding-top:100% رو اضافه کردم. با این کار عنصر after به اندازه عرض عنصر اصلی ارتفاع میگیره و از اونجایی که عنصر after در داخل square قرار داره، ارتفاع square هم به همون اندازه بیشتر میشه.
حالا شاید براتون سوال باشه که چرا ویژگی padding-top باید از عرض square تاثیر بگیره؟ خوب جوابش سادست، چون اینطوری سیاست گذاری و تعریف شده. :)
در واقع مقداری که به ویژگی padding میشه داد، یا یک مقدار ثابت هست و یا یک مقدار درصدی. در مقادیر ثابت ( مثل px, rem, em) که اندازه مشخص هست و بحثی درش نیست. ولی در اندازه های درصدی (مثل چیزی که ما در مثال داریم)، اندازه با توجه به عرض عنصر والد محاسبه میشه. حتی برای padding-top و padding-bottom. توضیحات بیشتر رو اینجا میتونید مطالعه کنید.
البته به این موضوع دقت کنید که اگر عنصر دیگه ای غیر از after داخل square باشه، ارتفاع اونا هم به ارتفاع کل square اضافه میشه.
در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.
امیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید.
