box-sizing در CSS

ساعت : ۱۵:۲۹

تاریخ : ۱۵ بهمن ۱۳۹۷

box-sizing در CSS چیست و چه کاربردی دارد؟

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

box-sizing در CSS

به عبارت دیگه با استفاده از این ویژگی شما می تونید بر اساس مدل قسمت بندی عنصرها، روش اندازه دهی آن ها رو تغییر بدید. در اینجا منظور از مدل قسمت بندی، همون ۴ ناحیه اصلی مربوط به هر عنصر (بخش محتوا یا content-box، بخش فاصله داخلی یا padding-box، بخش حاشیه عنصر یا border-box و بخش فاصله خارجی یا margin-box) هست.

مقادیر box-sizing که می توانیم به این ویژگی نسبت دهیم، مقادیر زیر هستند:

  • Content-box
  • padding-box
  • Border-box

مقدار پیش فرض box-sizing در مرورگرها معمولا content-box است.

box-sizing در CSS

نحوه استفاده از box-sizing در CSS

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


div {
Width: 100px;
Height: 100px;
Padding: 10px;
Border: 0;
}

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

حال اگر از padding-box برای این ویژگی استفاده کنیم، مقدار padding هم جزوی از عرض و ارتفاع عنصر مورد نظر محسوب می شود. یعنی عنصر طول و عرض ۱۰۰ پیکسلی خودشو حفظ میکنه و padding هم داخل همون باکس ۱۰۰ پیکسلی اعمال میکنه. یعنی در اصل ما یه باکس ۱۰۰ پیکسلی داریم که از هر ۴ طرف ۱۰ پیکسل padding گرفته. پس طول و عرض اصلی ما میشه ۸۰ پیکسل.


div {
Box-sizing: padding-box;
Width: 100px;
Height: 100px;
Padding: 10px;
Border: 0;
}

در هر دو مثال بالا اندازه ای که به border نسبت داده می شود، جزوی از عرض و ارتفاع محسوب نمی شود. اما زمانی که از border-box برای box-sizing استفاده کنیم، مقدار نسبت داده شده به border نیز جزوی از عرض و ارتفاع نسبت داده شده به عنصر مورد نظر محسوب می شود.

در مثال مقابل با این که طول و عرض داده شده به المان ۱۰۰ پیکسل هست ولی فقط ۷۰ پیکسل از قسمت اشغال شده توسط عنصر، مربوط به محتوای عنصره. چون ۲۰ پیکسل (۱۰ پیکسل از هر طرف) مربوط به padding عنصره و ۱۰ پیکسل (۵ پیکسل از هر طرف) مربوط به border عنصره که در مجموع میشه ۳۰ پیکسل.


div {
Box-sizing: border-box;
Width: 100px;
Height: 100px;
Padding: 10px;
Border: 0;
}
box-sizing در css


  • box-sizing در CSS
    نام نویسنده : امیرمسعود طالاری
  • box-sizing در CSS
    نام نویسنده : رضا ابولحسن زاده
  • box-sizing در CSS
    نام نویسنده : رضا ابولحسن زاده
  • box-sizing در CSS
    نام نویسنده : رضا ابولحسن زاده

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

پاسخی بگذارید

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