cssblog.ir logo
P

box-sizing

محاسبه سایز جعبه

محاسبه سایز عرض و ارتفاع عناصر در CSS دارای نکاتی است که بدلیل دخیل شدن ضخامت حاشیه و میزان padding مطرح می‌شوند. مشخصه box-sizing روی این محاسبات تاثیر می گذارد

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

آن یک ویژگی آزاردهنده

وقتی شما بصورت با تنظیمات پیشفرض شروع به نوشتن CSS می‌کنید ممکن است یک ویژگی در همان ابتدای کار بدلیل رفتارهای ناخواسته ای که منجر می‌شود به سرعت شما را اذیت کند و مدام درگیر کلنجار رفتن با عرض ها و میزان padding ها و… شوید و این ویژگی آن است که در حالت پیشفرض اگر شما به یک عنصر 200px عرض بدهید و آن عنصر padding راست و چپ 10px داشته باشد، آنچه که نهایتا روی صفحه دیده خواهد شد یک عنصر 220px خواهد بود که این نتیجه شاید چندان دلخواه و دلچسب نباشد. چون اگر قرار باشد عرض عنصرها یا padding آنها تغییر کند، ما درگیر محاسبات گاها دشوار خواهیم شد. پس باید چاره ای اندیشید…

همان قَد بمان که من می گویم!

با استفاده از مشخصه box-sizing می‌توانیم مشکلی که از آن صحبت کردیم را به شکل بسیار راحت و خوبی حل کنیم. اگر ما box-sizing یک عنصر را برابر با border-box تعیین کنیم، عرضی که برای آن عنصر تعیین می شود دیگر تحت تاثیر padding و ضخامت border آن نخواهد بود و وقتی مثلا می گوییم عرض عنصری ۱۰۰ پیکسل باشد، در صورتی که حتی ۳۰ پیکسل هم از چپ و راست padding داشته باشد و border آن ضخامت ۴ پیکسلی، بازهم عرض آن همان ۱۰۰ پیکسلی خواهد بود که ما گفته ایم! چه خوب!

کلید نحوه کار کردن آنچه که در قسمت GRID فریم ورک‌هایی مانند بوت‌استرپ (Bootstrap) مشاهده می کنیم همین است.

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

*, :before, :after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

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

مقادیر قابل قبول box-sizing

content-box

مقدار پیشفرض مرورگرها. عرض و ارتفاع عنصر فقط برای محتوا در نظر گرفته می شوند و paddingها و ضخامت border به بیرون از عرض تعیین شده اضافه می شوند. 

padding-box

عرض و ارتفاع برای محتوا و padding در نظر گرفته می شوند و ضخامت border از بیرون به آنها اضافه می شود.

این مقدار تنها توسط مرورگر فایرفاکس پشتیبانی می‌شد که در نسخه‌های جدید حذف شده است.  

border-box

عرض و ارتفاع با درنظر گرفتن محتوا، میزان padding و ضخامت border خواهد بود.

 

inherit

به ارث بردن این خصلت از والدین

border-box خوب است اما در اول پروژه

نکته مهمی که لازم می‌دانم به آن اشاره کنم این است که خوب است تا از مشخصه box-sizing در ابتدای هر پروژه‌ای (در قسمتی نزدیک به کد ریست) استفاده کنیم وگرنه اگر پروژه‌ای تا درصدی پیشرفت کرده باشد و ما در آن لحظه چنین مشخصه خانِمان‌بَراندازی را به کل عناصر صفحه تعیین کنیم، اندکی کار را سخت خواهد کرد و باعث بهم ریختگی های احتمالی خواهد شد.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند