box-sizing

از ویژگی box-sizing برای تغییر روش اندازه دهی به یک عنصر بر اساس مدل قسمت بندی آن استفاده می شود.

هر عنصر از لحاظ مدل قسمت بندی دارای چهار ناحیه است که این نواحی شامل ناحیه محتوا (content-box), ناحیه فاصله داخلی (padding-box) و ناحیه حاشیه (border-box) و در نهایت ناحیه فاصله خارجی یا (margin-box) هستند.

box-areas.png

در حالت عادی و پیشفرض زمانی که عرض و ارتفاع یک عنصر تعیین می شود این اندازه ها به ناحیه محتوا (content-box) تعلق پیدا می کنند. حال فرض کنید می خواهیم متنی را در همان عنصر قرار دهیم. قطعا نیاز به یک فاصله داخلی (padding) برای ایجاد یک فضا بین حاشیه عنصر و متن داریم. زمانی که این فاصله داخلی را اعمال کنیم عرض و ارتفاع عنصر تحت تاثیر قرار گرفته و دیگر آن مقادیری که ما تعیین کرده بودیم, نخواهند بود. مثال زیر را در نظر بگیرید.


div {
  width: 250px;
  height: 200px;
  padding: 50px;
}

در این مثال ما در واقع عرض عنصر را 250 و ارتفاع آن را 200 در نظر گرفته ایم اما در مدل پیشفرض به دلیل اضافه شدن padding که از هر طرف 50px می باشد در نهایت عنصر ما دارای عرض 350px و ارتفاع 300px خواهد بود.
حال فرض کنید بخواهیم یک border هم به این عنصر اضافه کنیم, داریم:


div {
  width: 250px;
  height: 200px;
  padding: 50px;
  border: 10px solid red;
}

اندازه این border هم به عرض و ارتفاع عنصر اضافه می شود و در نهایت عرضی به اندازه 370px و ارتفاع 320px خواهیم داشت.

در روش های قدیمی صفحه آرایی که اندازه ها محدود و ثابت بودند غالبا با این روش و مدل مشکلی در پیاده سازی نبود اما امروزه که صفحات پویا طراحی می شوند پیروی از این مدل سختی های خاص خود را دارد.

box-sizing

خوشبختانه در CSS3 ویژگی ای وجود دارد به نام box-sizing که به ما این اجازه را می دهد که در نحوه اعمال اندازه ها بر روی عناصر کنترل داشته باشیم. مقادیری که می توان به این ویژگی داد شامل content-box و padding-box و border-box می باشد. که مقدار پیشفرض آن content-box می باشد که عملکردش را در بالا در قالب یک مثال بررسی کردیم.

حال فرض کنید box-sizing را روی مقدار padding-box تنظیم کنیم و مثال بالا را دوباره با همان اندازه ها تکرار کنیم.


div {
  box-sizing: padding-box;
  width: 250px;
  height: 200px;
  padding: 50px;
}

این بار عرض نهایی عنصر همان 250px و ارتفاع هم 200px بدون تغییر باقی خواهد ماند در واقع مقدار عرض و ارتفاع شامل اندازه padding هم می شود. تصویر زیر نتیجه این مثال را در دو مدل content-box و padding-box نشان می دهد.

padding-box

حال اگر مقدار border به اندازه 10px به این عنصر اضافه کنیم این مقدار دوباره باعث افزایش اندازه نهایی عنصر می شود اما اگر بخواهیم اندازه border هم مانند اندازه padding موجب افزایش اندازه نهایی عنصر نشود کافی است مقدار ویژگی box-sizing را border-box قرار دهیم.


div {
  box-sizing: border-box;
  width: 250px;
  height: 200px;
  padding: 50px;
  border: 10px solid red;
}

تصویر زیر گویای مساله خواهد بود:

border-box

امروزه برای طراحی راحتر و عدم وجود نگرانی برای محاسبه مقادیر border و padding از این روش بیشتر استفاده می شود:


  box-sizing: border-box;

توجه داشته باشید که برای شروع یک پروژه, یکی از اولین کارها در CSS تعیین مدل box-sizing می باشد که بنا به تجربه و حتی با توجه به معروف ترین فریمورک های سمت کلایت مثل foundation و bootstrap بهترین روش استفاده از border-box برای تمام عناصر صفحه می باشد.

نکته خیلی مهم

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


  * {
    box-sizing: border-box;
  }

اگر بخواهیم کمی با امنیت بیشتری کار کنیم انتخابگرهای after و before را هم برای تمام عناصر بر روی این مدل تنظیم می کنیم.


  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

فریمورک bootstrap از این روش استفاده کرده است که این موضوع جزو نقاط ضعف این فریمورک محسوب می شود.
فرض کنید قرار است ماژول یا کامپوننتی را که از روش پیشفرض یعنی همان content-box استفاده کرده است را به پروژه ای اضافه کنید که آن پروژه به روش بالا و همان روش bootstrap عمل می کند. در اینجا شما مجبور خواهید بود یا برای تمامی عناصر مقدار box-sizing خود که همان content-box هست را تعیین کنید و یا مدل صفحه آرایی ماژول خود را به کلی تغییر داده و به روش border-box کار کنید که تمامی اندازه های شما تحت تاثیر قرار خواهد گرفت که این یک کابوس در زمان قرار دادن یک ماژول در یک پروژه محسوب می شود.

روش صحیح که فریمورک foundation هم از آن استفاده می کند روش زیر است. پس بهترین روش این است که در اول فایل CSS هر پروژه خطوط زیر را قرار دهید.


html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

با این روش اگر قرار باشد ماژولی یا کامپوننتی که از روش متفاوتی در مورد box-sizing استفاده کرده است را وارد پروژه خود کنید کافی است مقدار box-sizing بالاترین عنصر را در آن ماژول تعیین کنید و فرزندان آن عنصر از مقدار box-sizing آن عنصر ارث خواهند برد و دیگر نیازی به تعیین box-sizing برای تک تک آن ها و یا تغییر اندازه های آن ها نخواهد بود.

مقدار padding-box به مدت کوتاهی توسط فایرفاکس پشتیبانی شد که در نسخه 50 حذف شد. پس از این مقدار استفاده نکنید.

پشتیبانی مرورگرها

IE7 قادر به تشخیص این ویژگی نیست. IE8 این ویژگی را پشتیبانی می کند فقط زمانی که عرض و ارتفاع یک عنصر به صورت min یا max تعیین شوند IE8 box-sizing را روی آن عنصر اعمال نمی کند. در کل بهتر است برای پشتیبانی بهتر مرورگرها از prefix استفاده کنید:


html {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
     -moz-box-sizing: inherit;
          box-sizing: inherit;
}

همچنین می توانید از این پلیفیل برای پشتیبانی این ویژگی در مرورگرهای ie7 و حتی ie6 استفاده کنید.

برای یادگیری بهتر این ویژگی یک زمین بازی در لینک زیر آماده شده است. این محیط در این مطلب معرفی شده است.

24 دیدگاه برای “box-sizing

    1. بحث های clearfix و boxsizing دو مبحث جدا هستند. یک نگاه سریع به این http://css-tricks.ir/after-… داشته باشید.

      خلاصه بخوام بگم اینکه شما باید توجه داشته باشید که after , before هم تاحدودی کاراییشون شبیه به بقیه عناصر هست پس در اینجا وقتی ما در شروع هر پروژه تمام عناصر(*) رو به حالت border-box تبدیل می کنیم نیازه که برای یک پارچه سازی after , before تمام عناصر هم به حالت border-box تبدیل بشن.

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

          1. من از border-box و after, before استفاده میکنم ولی وقتی با هم باشن رو درک نمیکنم!

            ببخشید من بد نوشتم؛ ببخشید دوباره میپرسم، این دستور یعنی قبل و بعد عنصر حالا * ، یه عنصر کاذب ایجاد کن و border-box ش کن؟ یعنی چی؟ اصلا درک نمیکنم!

            در رابطه با فلکس آشنایی عملی ندارم واسه همین ابهام داشتم؛ آموزش هایی از lynda گرفتم درآینده نگاه میکنم. ممنون

          2. یعنی اینکه “اگر” عنصری after و before داشت after و beforeش رو هم به مدل border-box تبدیل کن.

          3. شما در مثالتون عناصر after و before رو نساختید فقط گفتید اگر ساخته شد مدلشون border-box باشه.

            حالا این مثال رو چک کنید که در اون after ساخته شده و به دو نوع مختلف box-sizing که بتونید خوب مقایسه کنید نمایش داده شده. http://jsbin.com/pawatuluxe

            دوست عزیز حتما مقاله after و before رو یک بار دیگه نگاه کنید. اگر باز هم مشکلی بود من در خدمتم.

          4. چیزهای جدید یادگرفتم، مثال رو هم درک کردم اما هنوز متوجه دستور بالا نمیشم!
            یعنی، دستور بالا وقتی عمل میکنه که ما عنصری رو با after,before ایجاد کزده باشیم؟! آخه جه لزومتی داره!

          5. اون دستور واسه اینه که ما در اول کار تعیین کنیم که در هرجای طراحی ما
            از عناصر after , before استفاده شد مدل border-box روشون اعمال بشه. که
            دیگه هر دفعه نگران مدل باکسشون نباشیم. و فقط یه بار بنویسیم. این بحث یکم
            نیاز به تجربه کاری داره که من مطمئنم بعد یه مدت کاملا واستون روشن میشه.

    1. بحث های clearfix و boxsizing دو مبحث جدا هستند. یک نگاه سریع به این http://css-tricks.ir/after-… داشته باشید.

      خلاصه بخوام بگم اینکه شما باید توجه داشته باشید که after , before هم تاحدودی کاراییشون شبیه به بقیه عناصر هست پس در اینجا وقتی ما در شروع هر پروژه تمام عناصر(*) رو به حالت border-box تبدیل می کنیم نیازه که برای یک پارچه سازی after , before تمام عناصر هم به حالت border-box تبدیل بشن.

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

          1. من از border-box و after, before استفاده میکنم ولی وقتی با هم باشن رو درک نمیکنم!

            ببخشید من بد نوشتم؛ ببخشید دوباره میپرسم، این دستور یعنی قبل و بعد عنصر حالا * ، یه عنصر کاذب ایجاد کن و border-box ش کن؟ یعنی چی؟ اصلا درک نمیکنم!

            در رابطه با فلکس آشنایی عملی ندارم واسه همین ابهام داشتم؛ آموزش هایی از lynda گرفتم درآینده نگاه میکنم. ممنون

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