جلسه ۵۹ : ویژگی Box Sizing در CSS

• جزئیات
• نوع مطلبآموزشی

مقدمه

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

در مطالب آموزشی  css ، در این سایت به مطالب آموزشی پرکاربرد افکت گذاری در css با موضوعات آموزشی کار با افکت های سایه در css ، کار با ویژگی Transitions در css و … پرداختیم.

همچنین در بحث آشنایی با ویژگی Responsive ، موضوعات مهم و کارآمد  استفاده از تنظیمات viewport در css ، استفاده از grid-view در css و… را نیز ارائه کردیم.

در این آموزش نیز به موضوع استفاده و کار با ویژگی box-sizing در css می پردازیم.

کار با ویژگی box-sizing در css

کار با ویژگی box-sizing در css

این ویژگی به ما اجازه می دهد که یک عرض وارتفاع  منظم و یکنواخت برای تمامی عناصر قرار بدهیم.

استفاده نکردن از ویژگی box-sizing

اگر از ویژگی box-sizing استفاده نکنید، عرض و ارتفاع هر عنصر بصورت زیر محاسبه می شود:

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

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

اگر شما عرض و ارتفاع را برای یک عنصر تعیین کنید، نتیجه این می شود که عنصر html اغلب موارد اندازه ای بزرگتر از آنچه شما تعیین کرده اید ، پیدا می کند.

مثال: دو عنصر زیر (<div1> و <div2> )  دارای عرض و ارتفاع یکسان هستند ، اما در زمان اجرا ، اندازه <div2> بسیار بزرگتر از اندازه ی <div1> مشاهده خواهد شد.

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

استفاده از ویژگی box-sizing

با استفاده از این ویژگی می توانید ویژگی های padding و border را از عرض و ارتفاع عنصر متمایز کنید.

اندازه واقعی عرضی که تعیین کرده اید را به عنصر بدهید.

فقط کافیست که کد box-sizing: border-box; را در style عنصر مورد نظر قرار دهید.

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

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

بسیاری از توسعه دهندگان و طراحان وب سعی می کنند که از این ویژگی در طراحی و style تمام عناصر وب خود استفاده کنند.

شما نیز می توانید این ویژگی را همانند مثال زیر ، در تمام عناصر html قالب وب سایت خود لحاظ کنید:

کلام آخر

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