سایز جعبه CSS

سایز جعبه CSS نحوه محاسبه عرض و ارتفاع کل عناصر HTML را تعیین می کند.

نکات اصلی سایز جعبه CSS:

• خاصیت اندازه گیری جعبه CSS اطمینان حاصل می کند که padding و حاشیه ها باعث افزایش عرض و ارتفاع عناصر نمی شوند.
• اندازه جعبه را روی CSS border-box تنظیم کنید تا تضمین شود که اندازه عنصر شامل حاشیه ها و padding است.
• با استفاده از ویژگی تغییر اندازه می توانید به کاربران اجازه دهید اندازه عناصر خاص را کنترل کنند.

بدون سایز جعبه

مدل جعبه از این اصول پیروی می کند:

• CSS عرض عناصر را با افزودن عرض ، padding و حاشیه با هم محاسبه می کند.
• CSS با افزودن ارتفاع ، پدینگ و حاشیه با هم ، ارتفاع عناصر را محاسبه می کند.

در نتیجه ، توسعه دهندگان باید مقادیر را هنگام تنظیم عرض و ارتفاع تنظیم کنند تا فضای لازم برای حاشیه ها و پدینگ ها فراهم شود

در این مثال ، دو عنصر <div> وجود دارد:

• اولی دارای ارتفاع ، عرض و حاشیه CSS است.
• پارامتر دوم همان پارامترهای اختصاص داده شده را دارد اما از CSS padding نیز برخوردار است.
• در نتیجه ، عنصر دوم بزرگتر از عنصر اول ظاهر می شود.

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

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

با اندازه جعبه

از آنجا که مدل جعبه مسائل زیادی را برای توسعه دهندگان ایجاد کرد ، CSS3 اندازه جعبه را معرفی کرد.

اندازه گیری جعبه CSS اطمینان حاصل می کند که عرض و ارتفاع کل عناصر شامل padding و حاشیه ها باشد. در نتیجه ، عناصر بزرگتر از آنچه باید به نظر نمی رسند.

حاشیه جعبه

CSS حاشیه جعبه محبوب ترین انتخاب برای تعیین اندازه اندازه جعبه است. این تضمین می کند که جعبه محتوا کوچک می شود تا فضای لازم برای پر کردن و حاشیه ها فراهم شود.

بنابراین ، اگر عرض عنصر خود را روی 200 پیکسل تنظیم کنید ، border-box اطمینان حاصل می کند که محتوا ، پد و حاشیه ها در این عدد قرار دارند.

در این مثال ، اندازه جعبه: border-box؛ به هر دو عنصر <div> اضافه می شود:

.div1 {
    width: 400px;
    height: 200px;
    border: 2px solid red;
    box-sizing: border-box;
}

.div2 {
    width: 400px;
   height: 200px;
   padding: 30px;
   border: 2px solid green;
   box-sizing: border-box;
}

نکته: جعبه حاشیه بهترین انتخاب برای طراحی طرح بندی و مدیریت اندازه عناصر HTML است.

نیازی نیست که این ویژگی را برای هر عنصر به صورت جداگانه تنظیم کنید. در عوض ، از انتخابگر ستاره (*) برای انتخاب همه عناصر استفاده کنید.

در این مثال ، ما اندازه جعبه را اعمال می کنیم: border-box؛ به همه عناصر موجود در یک سند HTML:

* {
    box-sizing: border-box;
}

محتوای جعبه

box-box رفتار منظم افزودن padding و حاشیه ها را به عناصر جداگانه تنظیم می کند.

اگر عرض عنصر را روی 200 پیکسل تنظیم کنید ، با افزودن padding و حاشیه ها ، مورد بزرگتر به نظر می رسد.

قابلیت تغییر اندازه توسط عناصر توسط کاربران

ویژگی تغییر اندازه برای نشان دادن تغییر اندازه مجدد یک عنصر توسط کاربران است. این می تواند چهار مقدار داشته باشد: افقی ، عمودی ، هر دو و هیچ.

مثال زیر نشان می دهد که چگونه می توانید به کاربران اجازه دهید عرض یک ظرف را تغییر دهند:

div {       
    resize: horizontal;  /* This allows to resize the div's width */     
    overflow: auto;  
}

ظرف در مثال زیر دارای ارتفاع قابل تغییر مجدد است:

div {
    resize: vertical; /* This allows to resize the div's height */
    overflow: auto;  
}

این مثال به کاربران امکان می دهد اندازه عرض و ارتفاع یک ظرف را تغییر اندازه دهند:

div {       
    resize: both;    /* This allows to resize both of the div's size properties */   
    overflow: auto;  
}

نکات مهم سایز جعبه CSS:

• padding-box برای اعمال عرض و ارتفاع عناصر به لایه و محتوای آنها استفاده می شود. مرورگرها دیگر از این ویژگی پشتیبانی نمی کنند.
• بیشتر مرورگرهای مدرن از ویژگی اندازه جعبه پشتیبانی می کنند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.