٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش اندازه CSS جعبه

اندازه CSS جعبه box-sizingویژگی CSS به ما اجازه می دهد تا padding و حاشیه را در عرض و ارتفاع کل یک عنصر قرار دهیم. بدون ویژگی CSS اندازه اندازه به طور پیش فرض ، عرض و ارتفاع یک عنصر به این صورت…

محمد یوسفی

14 جولای 2021

اندازه CSS جعبه

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


بدون ویژگی CSS اندازه اندازه

به طور پیش فرض ، عرض و ارتفاع یک عنصر به این صورت محاسبه می شود:

عرض + بالشتک + حاشیه = عرض واقعی
ارتفاع یک عنصر + بالشتک + حاشیه = ارتفاع واقعی یک عنصر

این بدان معنی است: وقتی عرض / ارتفاع یک عنصر را تنظیم می کنید ، عنصر اغلب بزرگتر از آنچه تعیین کرده اید به نظر می رسد (زیرا حاشیه و بالشتک عنصر به عرض / ارتفاع مشخص شده عنصر اضافه می شود).

تصویر زیر دو عنصر <div> را با عرض و ارتفاع مشخص مشخص نشان می دهد:

در نتیجه دو عنصر <div> بالا با اندازه های مختلف به نتیجه می رسند (زیرا div2 یک بالشتک مشخص کرده است):

مثال

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

box-sizingاموال این مشکل را حل میکند.


با ویژگی CSS اندازه اندازه

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

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

در اینجا همان مثال فوق وجود دارد که box-sizing: border-box; به هر دو عنصر <div> اضافه شده است:

مثال

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

از آنجا که نتیجه استفاده از box-sizing: border-box;بسیار بهتر است ، بسیاری از توسعه دهندگان می خواهند همه عناصر موجود در صفحات خود به این ترتیب کار کنند.

کد زیر اطمینان حاصل می کند که اندازه همه عناصر به این روش شهودی تر است. بسیاری از مرورگرها در حال حاضر box-sizing: border-box;برای بسیاری از عناصر فرم استفاده می کنند (اما نه همه – به همین دلیل ورودی ها و مناطق متنوع از نظر عرض متفاوت هستند: 100٪؛).

استفاده از این مورد برای همه عناصر ایمن و عاقلانه است:

مثال

* {
  box-sizing: border-box;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها