CSS باکس سایزنگ کلاس
تعریف و استفاده
ویژگی box-sizing به شما اجازه میدهد تا به صورت خاص عنصری را برای تطابق با یک منطقه خاص تعریف کنید.
برای مثال، اگر میخواهید دو جعبه با حاشیه به صورت پارالل قرار گیرند، میتوانید box-sizing را به "border-box" تنظیم کنید. این کار باعث میشود مرورگر جعبهای با عرض و ارتفاع مشخص نشان دهد و حاشیه و فاصله داخلی در داخل جعبه قرار گیرند.
لطفاً به اینجا نیز مراجعه کنید:
آموزش CSS3:CSS3 یوزر انٹرفیس
دستورالعمل HTML DOM:ویژگی boxSizing
مثال
این دو جعبه با حاشیه قرار میگیرند:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
در پایین صفحه مثالهای بیشتری وجود دارد.
قوانین CSS
box-sizing: content-box|border-box|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| content-box |
این رفتار عرض و ارتفاع توسط CSS2.1 تعیین شده است. عرض و ارتفاع به ترتیب به جعبه محتوای عنصر اعمال میشود. حاشیه و لبههای درونی عنصر در خارج از عرض و ارتفاع رسم میشوند. |
| border-box |
عرض و ارتفاع تعیین شده برای عنصر، جعبه لبهدار عنصر را تعیین میکند. یعنی، هرگونه حاشیه و لبهای که برای عنصر تعیین شده است، در عرض و ارتفاع تعیین شده رسم میشود. عرض و ارتفاع محتوا از طریق کاستن پیکربندی حاشیه و فاصله داخلی از عرض و ارتفاع تعیین شده به دست میآید. |
| inherit | این تعریف میکند که باید مقدار box-sizing از عنصر والد به عنصر فعلی منتقل شود. |
جزئیات فنی
| مقدار پیشفرض: | content-box |
|---|---|
| ارث: | خیر |
| نسخه: | CSS3 |
| قوانین جاوااسکریپت: | object.style.boxSizing="border-box" |
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی میکند.
بجای -webkit- یا -moz- عدد اولین نسخهای که از پیشوند استفاده میکند را نشان میدهد.
| چروم | آئی ای / ایج | فائرفاکس | سافری | اوپرا |
|---|---|---|---|---|
| 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
