ویژگی Style boxSizing
- صفحه قبلی boxShadow
- صفحه بعدی captionSide
- بازگشت به طبقه بالاتر صورت Style HTML DOM
تعریف و استفاده
boxSizing ویژگی‌ای است که به شما اجازه می‌دهد تا به صورت خاص عنصر خاصی را در یک منطقه مشخص تعریف کنید.
مثلاً اگر می‌خواهید دو جعبه با لبه‌ها به صورت پارالل قرار دهید، می‌توانید box-sizing را به "border-box" تنظیم کنید. این کار باعث می‌شود که مرورگر جعبه‌هایی با عرض و ارتفاع مشخص نشان دهد و لبه‌ها و فضاهای داخلی در داخل جعبه قرار گیرند.
لطفاً به
دستورالعمل‌های CSS:box-sizing 属性
مثال
تغییر ویژگی boxSizing:
document.getElementById("myDIV").style.boxSizing = "border-box";
قانون‌نویسی
نتیجه ویژگی boxSizing:
object.style.boxSizing
تنظیم ویژگی boxSizing:
object.style.boxSizing = "content-box|border-box|initial|inherit"
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| content-box |
مقدار پیش‌فرض. این رفتار عرض و ارتفاع CSS2.1 است. عرض و ارتفاع تعیین شده (و ویژگی‌های min/max) به عرض و ارتفاع جعبه محتوای عنصر اعمال می‌شود. فضای داخلی و لبه‌های یک عنصر خارج از عرض و ارتفاع تعیین شده قرار می‌گیرند. |
| border-box |
عرض و ارتفاع تعیین شده یک عنصر تعیین‌کننده جعبه لبه‌دار عنصر است. یعنی، هرگونه فضای داخلی و لبه‌ای که برای یک عنصر تعیین شده است، در عرض و ارتفاع تعیین شده قرار می‌گیرد. برای دستیابی به عرض و ارتفاع محتوای یک عنصر، باید عرض و ارتفاع تعیین شده آن را از لبه‌ها و فضاهای داخلی کم کنید. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | content-box |
|---|---|
| نتیجه | کلمه‌ای است که نشان‌دهنده box-sizing 属性. |
| نسخه CSS: | CSS3 |
پشتیبانی از مرورگر
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
- صفحه قبلی boxShadow
- صفحه بعدی captionSide
- بازگشت به طبقه بالاتر صورت Style HTML DOM
