خصوصیت box-sizing
مثال (خصوصیت box-sizing)
چهار <div> با اندازه یکسان و خروجی های متفاوت:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
خودتان امتحان کنید »{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
پشتیبانی مرورگرها
مرورگرهای Internet Explorer، Opera، Chrome و Safari، خصوصیت box-sizing را پشتیبانی می کنند.
مرورگر Firefox از خاصیت جایگزین moz-box-sizing- پشتیبانی می کند.
تعریف و کاربرد
با استفاده از خصوصیت box_sizing می توانید عناصر را در یک ناحیه fit کنید.
در واقع با استفاده از خصوصیت های Width و Height تنها اندازه محتوا (Content) تعیین می شود و برای محاسبه اندازه واقعی Box، اندازه (Padding و Border و Margin) نیز باید به این اندازه اضافه شوند.
برای مثال، اگر بخواهید دو box که دارای حاشیه هستند کنار هم قرار گیرند، می توانید خاصیت box-sizing را "border-box" تنظیم کنید. این کار مرورگر را وادار می کند، تا box را با طول مشخص شده render کند و border , padding را داخل box قرار می دهد.
| مقدار پیشفرض | content-box |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.boxSizing="border-box" |
نحوه استفاده
box-sizing: content-box|border-box|inherit:
| مقدار | توضیحات |
|---|---|
| content-box | اندازه عنصر فقط شامل Content می شود و Padding و Border و Margin محاسبه نمی شود. (مقدار پیشفرض) |
| border-box | اندازه عنصر شامل Content و Padding و Border می شود اما Margin محاسبه نمی شود. (این مدل در IE8 و نسخه های قبلی آن اعمال می شود) |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
بیاموزهای مرتبط
CSS3 User Interface (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 10488
دیدگاه‌ها
سلام خسته نباشید ممنون از سایت خوبتون
ببخشیذ box-sizing:bord er-box این چه تغییری ایجاد میکنه
روی کار ؟ممنونم
سلام. سلامت باشید.
از فرمول width + padding + border برای محاسبه ی عرض یک جعبه یا عنصر استفاده می شود. و از فرمول height + padding + border برای محاسبه ی ارتفاع یک جعبه استفاده میشه.
در مثال زیر، width و height و border هر دو جعبه یکسان است. اما عنصر دوم padding دارد. و همان طور که مشاهده می کنید، بزرگ تر است و padding در عرض و ارتفاع آن اثر گذاشته است.
https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-sizing_old
اما در مثال زیر، با همان اطلاعات قبلی، برای عنصر دوم از box-sizing: border-box استفاده شده است، بنابراین padding یا شاید border در نظر گرفته نشده اند در اندازه ی بندی div، و سایز هر دو جعبه یکسان است.
https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-sizing_new