ابعاد - dimensions در css

ویژگی های مربوط به ابعاد، اندازه یک عنصر و کوچکترین و بزرگ ترین ابعاد مربوط به عنصر را تنظیم می کند. این ویژگی ها، خصوصیات خود را از عنصر والد به ارث نمی برند و فقط به عناصر بلوک و جایگزین شده inline اعمال می شوند.

Width & height

با استفاده از ویژگی های width و height می توانیم عرض و ارتفاع محدوده محتوای مربوط به یک عنصر را تنظیم کنیم. این دو ویژگی را می توانیم با یک مقدار طولی یا درصد مشخص کنیم، که درصد به نسبت ابعاد عنصر والد تعیین می شود.

width | height: auto | <length> | <percentage>

مقدار پیش فرض برای این ویژگی، مقدار auto است. در حالت معمولی یک عنصر از نوع بلوک تا لبه های ظرف نگهدارنده خود کشیده می شود. در مقابل آن ارتفاع عنصر کم می شود تا با محتوا تنظیم شود. با استفاده از ویژگی های width و height می توان این رفتارهای پیش فرض را تغییر داد. در مثال زیر در عناصری که این کلاس به آنها اعمال شده است، عرض به اندازه 100 پیکسل و ارتفاع به اندازه 50 پیکسل تعیین می شود. پس از آنکه این اندازه ها به یک عنصر اعمال شد، آن عنصر این اندازه را پیدا می کند و حتی اگر اندازه صفحه تغییر کند بازهم اندازه عنصر تغییر نخواهد کرد.

این نکته را به خاطر داشته باشید که مقادیر مربوط به height و width شامل padding، border و margin نمی شود. این ویژگی ها عرض و ارتفاع فضای داخلی عنصر را مشخص می کنند.

.mybox{
width : 100px;
height : 50px;
}

ویژگی های min-width و min-height

این ویژگی ها، کمترین و بیشتری ابعاد یک عنصر را مشخص می کنند. با استفاده از این ویژگی ها بازهم طول و ارتفاع عنصر تا جایی گسترش پیدا می کند که با محتوا هماهنگ شود، اما عرض یا ارتفاع عنصر تا مقداری کمتر از کمترین ابعاد تعیین شده تنظیم نمی شود. همانطور که قبلا هم گفته شد این مقدار شامل padding, border & margin نمی شود.

min-width| min-height : <length> | <percentage>

مقادیر معتبر برای این دو ویژگی یک مقدار طولی یا یک مقدار بر اساس درصد است، که در آن درصد به نسبت ابعاد بلوک نگهدارنده محتوا محاسبه می شود. به عنوان مثال، در کلاس زیر مشخص می کنیم که یک عنصر حداقل 50درصد عرض و ارتفاع موجود را اشغال کند:

.half{
min-width : 50%;
min-height : 50%;
}

ویژگی های max-width و max-height

با استفاده از ویژگی های max-width و max-height می توانیم بیشترین ابعاد منطقه محتوای مربوط به یک عنصر را تعیین کنیم. این مقدار را می توان بر اساس یک مقدار طولی یا درصد مشخص کنیم؛ با استفاده از کلیدواژه none می توانیم مقداری که قبلا تعیین شده است را پاک کنیم.

max-width | max-height : none | <length> | <percentage>

با تنظیم کردن مقدار کمترین و بیشترین عرض و طول، شما می توانید یک فاصله را تعیین کنید که عرض یک عنصر چگونه تغییر کند. یک عنصر از نوع بلوک با استفاده از کلاسی که در زیر تعریف کرده ایم سعی می کند اگر امکان داشته باشد عرضی به اندازه 500 پیکسل داشته باشد. زمانی که فضای افقی محدود باشد، این کلاس عنصر را وادار می کند عرضش کمتر از 200 پیکسل نباشد.
در حالت عادی ممکن است عرض صفحه بیشتر از عرض تعریف شده توسط css باشد و در این حالت مرورگر به صورت خودکار یک نوار پیمایش ایجاد می کند. برای جلوگیری از این مساله، از این دو ویژگی استفاده می کنیم. در این صورت دیگر نگران ایجاد یک نوار پیمایش نخواهیم بود و مرورگر به صورت خودکار عرض را تنظیم می کند:

max-width : 500px;
min-width : 200px;

ویژگی max-width نسبت به ویژگی min-width دارای اولویت است. با این وجود این مساله در مورد ارتفاع متفاوت است، به خاطر اینکه ویژگی min-height دارای اولویت بیشتری نسبت به ویژگی max-height است. بنابراین در مثال زیر، عنصری که دارای کلاس تعریف شده زیر است دارای ارتفاع 5em خواهد بود مگر اینکه محتوای داخل عنصر به ارتفاع بیشتری نیاز داشته باشد. در این حالت عنصر به صورت عمودی تا بیشترین مقداری که اجازه داده شده است (20em) گسترش پیدا می کند.

.mybox{
max-height : 20em;
min-height : 5em;
}

این نکته را در نظر داشته باشید که مقادیر ثابت مربوط به طول و عرض را نباید با مقادیر min و max به صورت همزمان استفاده کنیم. چهار ویژگی مربوط به min و max که در بالا به آنها اشاره شد در بیشتر مرورگرهای معتبر مورد پشتیبانی قرار می گیرند؛ این مرورگرها شامل این موارد هستند:
Chrome 1+, Firefox1+, IE7+, Safari1+, Opera8+. از این ویژگیها به همراه قوانین مربوط به media برای طراحی صفحات برای نمایش در صفحه های با اندازه های مختلف استفاده می شود. ویژگی box-sizing ویژگی های مربوط به ابعاد معمولا به محدوده محتوا اشاره می کنند، و با محدوده padding یا border کاری ندارد. بنابراین برای اطلاع از عرض و ارتفاع واقعی که یک عنصر در مدل box model اشغال می کند، میزان padding و border که آن عنصر اشغال می کند نیز باید محاسبه شود.

/* یک عنصر با عرض 100 پیکسل */
.mybox{
padding : 3px;
border : 2px solid black;
width : 90px;
}

در css3 یک ویژگی با نام box-sizing در اختیار طراحان وب قرار گرفته است که به آنها اجازه می دهد این انتخاب را داشته باشند که عرض و طول ها چگونه محاسبه شوند. مقدار پیش فرض برای این ویژگی content-box است و به این نکته اشاره می کند که ویژگی های ابعاد فقط به محدوده محتوا اشاره می کند. مقدار جایگزین دیگر border-box است که padding و border را نیز در این اندازه گیری دخیل می کند.

box-sizing : content-box | border-box;

با تغییردادن مقدار مربوط به box-sizing به border-box می توانید یک طرح بندی شبکه ای (grid layout) را بهتر ایجاد کنید به خاطر اینکه دیگر لازم نیست که خودتان مقدار مربوط به padding و border را محاسبه کنید.

/* یک عنصر با عرض 100 پیکسل */
.mybox{
box-sizing : border-box;
padding : 3px;
border : 2px solid gray;
width : 100px
}

ویژگی border-box خصوصیات خود را از عنصر والدش به ارث نمی برد، اما این ویژگی تمام خصوصیات خود را به تمام عناصری که در وب سایت از انتخاب کننده universal استفاده می کند نسبت می دهد. برای افزایش میزان پشتیبانی مرورگرهای وب از این ویژگی باید از پیشوندهای –webkit و –moz استفاده کنید:

/* استفاده از border-boxبرای تمام عنصر ها */
*{
/* Chrome 1-8, Safari 3-5 */
-webkit-box-sizing: border-box;
/* Firefox 1-28 */
-moz-box-sizing: border-box;
/* Chrome9+, Firefox29+, IE8+, Safari5.1+, Opera9.5+ */
box-sizing: border-box;
}

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