جلسه بیست و هفتم: ویژگی box-sizing در css

ویژگی box-sizing در css

خوش اومدین به بیست و هفتمین جلسه از دوره آموزش رایگان CSS. توی این جلسه قراره که در مورد ویژگی box-sizing با همدیگه صحبت کنیم و میخام این ویژگی مهم و کاربردی رو بهتون معرفی کنم. این ویژگی که یکی از ویژگی های مهم و کاربردی css هست در چینش عناصر html کمک زیادی بهمون میکنه. مخصوصا توی بحث Responsive کردن قالب جزء ویژگی های مهم و پرکاربرد به حساب میاد. با من توی این جلسه همراه باشید.

برای اینکه بتونیم درک درستی از box-sizing داشته باشیم و تعریف دقیقی از اون رو براتون بگم، لازم هست که با نحوه محاسبه مقدار عرض و ارتفاع بصورت پیشفرض توی CSS آشنا بشیم. عرض و ارتفاع هر عنصر توی CSS بصورت زیر محاسبه میشه:

width + padding + border = عرض واقعی یه عنصر html

height + padding + border = ارتفاع واقعی یه عنصر html

میزان فضایی که یه عنصر در عرض صفحه اشغال میکنه برابر است با مقدار عرض + حاشیه padding + ضخامت border

همینطور میزان فضایی که یه عنصر در ارتفاع اشغال میکنه برابر است با مقدار ارتفاع + حاشیه padding + ضخامت border

به عنوان مثال من از یه تگ div توی صفحه خودم استفاده کردم. به اون عرض ۲۰۰ پیکسل رو میدم و مقدار padding چپ و راست این عنصر رو هم روی ۲۰ پیکسل قرار میدم. همینطور یه border به ضخامت ۵ پیکسل هم بهش میدم. مقدار فضایی که این عنصر در عرض اشغال میکنه میشه:

۲۰۰ پیکسل (مقدار عرض) + ۴۰ پیکسل (padding چپ و راست) + ۱۰ پیکسل (border چپ و راست) = ۲۵۰ پیکسل

این تعریف با همین کیفیت برای ارتفاع هم صدق میکنه.

تصویر زیر رو ببیند:

در تصویر بالا هر دو div با عرض ۳۰۰ پیکسل و ارتفاع ۱۰۰ پیکسل تعریف شده اند، اما در div دومی من مقدار ۵۰ پیکسل از هر طرف padding دادم. با اینکه عرض و ارتفاع وارد شده توسط من یکسان بوده اما میبینیم که در خروجی دو اندازه متفاوت رو داریم. این به دلیل عدم استفاده از box-sizing هست. تصویر بالا حاصل استایل زیر هست:

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue; 
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

حالا اگه قصد داشته باشید که این روند نمایش رو تغییر بدیم و مشخص کنیم که زمانی که من عرض یا ارتفاع تعریف میکنم، این عرض و ارتفاع فاصله بین دو border هست میتونیم از box-sizing استفاده کنیم. با این کار به مرورگر میفهمونیم که منظورم ما از تعریف عرض، فاصله بین دو border چپ و راست هست و اگه padding هم به عنصر بدیم دیگه تغییری توی اون عرض صورت نمیگیره.

کد بالا رو به شکل زیر مینویسیم:

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

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

همینطور که میبینید با وجود اینکه div دوم padding از ۴ جهت به مقدار ۵۰ پیکسل داره ولی بازهم هم اندازه div که padding نداره شد.

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

* {
    box-sizing: border-box;
}

به این ترتیب تمامی عناصر شما عرض و ارتفاعشون فاصله بین border چپ و راست و border بالا و پایین درنظر گرفته میشه.

همه ویدیوهای دوره آموزش CSS