آموزش کامل کار با Box Sizing در CSS3

مقدمه

ویژگی Box Sizing در CSS3 کنترل نحوه محاسبه ابعاد عناصر را تعیین می‌کند. با Box Sizing می‌توان مطمئن شد که padding و border در محاسبه عرض و ارتفاع عنصر لحاظ شوند یا نه. برای یادگیری کامل CSS و مدیریت اندازه عناصر، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Box Sizing

Box Sizing مشخص می‌کند که آیا padding و border جزو width و height عنصر محاسبه شوند یا خارج از آن. دو مقدار اصلی وجود دارد:

• content-box → width و height شامل فقط محتوای عنصر است، padding و border اضافه می‌شوند.
• border-box → width و height شامل محتوا، padding و border است.

مثال عملی با کد

استفاده از content-box (پیش‌فرض):

.box1 {
  width: 200px;
  padding: 20px;
  border: 5px solid #3498db;
  box-sizing: content-box;
}

استفاده از border-box:

.box2 {
  width: 200px;
  padding: 20px;
  border: 5px solid #3498db;
  box-sizing: border-box;
}

اعمال برای کل عناصر با universal selector:

* {
  box-sizing: border-box;
}

نکات مهم و توضیحات تکمیلی

• border-box باعث می‌شود اندازه‌ها دقیق و محاسبات راحت‌تر شوند.
• content-box پیش‌فرض است و ممکن است باعث افزایش اندازه کل شود.
• ترکیب با طراحی واکنش‌گرا باعث ثبات در چیدمان عناصر می‌شود.
• اعمال universal selector (*) برای کل عناصر توصیه می‌شود تا استاندارد اندازه‌ها حفظ شود.

ادامه آموزش CSS

برای یادگیری کار با ویژگی Transforms و ایجاد افکت‌های حرکتی و چرخشی در CSS3، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.