آموزش اندازه 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;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.