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

ویژگی های بعد در CSS برای کنترل ارتفاع و عرض یک عنصر استفاده می شود.

ویژگی های ابعاد CSS

CSS چندین ویژگی مانند width (عرض)، height (ارتفاع)، max-width (حداکثر عرض) و max-height (حداکثر ارتفاع) و … را ارائه می دهد که به شما امکان می دهد ابعاد یک جعبه را کنترل کنید. در بخش زیر شیوه استفاده از این ویژگی ها برای ایجاد طرح بندی بهتر صفحه وب توضیح داده می شود.

ویژگی های عرض و ارتفاع

ویژگی های width و height، عرض و ارتفاع ناحیه محتوای یک عنصر را مشخص می کنند. مقادیر width و height شامل حاشیه ها، paddingها یا marginها نیست. شیوه محاسبه عرض و ارتفاع موثر در بخش مدل جعبه ای در CSS توضیح داده شده است.

ویژگی های width و height، می توانند مقادیر طول (px، pt، em و ..)، درصد یا کلمه کلیدی auto را بگیرد. مقادیر طول منفی مجاز نیستند.

مثال

div {

width: 300px;

height: 200px;

}

قوانین سبک تعریف شده در مثال بالا، عرض ثابت را ۳۰۰ پیکسل و ارتفاع را ۲۰۰ پیکسل برای عنصر

توجه: مقدار خاص auto  به مرورگرها امکان می دهد تا عرض را به طور خودکار برای عنصر محاسبه کندن. مقادیر درصد (٪) به عرض بلوک حاوی عنصر اشاره دارد.

ویژگی max-height

ویژگیmax-height  اجازه می دهد تا حداکثر ارتفاع محتوای یک جعبه را مشخص کنید. این حداکثر ارتفاع شامل حاشیه ها paddingها یا marginها نیست.

عنصری که ویژگیmax-height  را دارد، ارتفاعش هرگز از مقدار مشخص شده بلندتر نخواهد شد، حتی اگر ویژگیheight  روی مقدار بزرگتر تنظیم شده باشد. به عنوان مثال، اگر مقدار ویژگیheight  برابر با ۲۰۰ پیکسل و مقدار ویژگیmax-height  برابر با ۱۰۰ پیکسل تنظیم شود، ارتفاع واقعی عنصر ۱۰۰ پیکسل است.

مثال

div {

height: 200px;

max-height: 100px;

}

ویژگیmax-height  معمولاً همراه با ویژگی min-height  برای تعیین محدوده ارتفاع برای عنصر مورد نظر استفاده می شود.

توجه: یک قاعده استثنا وجود دارد – اگر ویژگی min-height بزرگتر از ویژگی max-height  باشد، در این حالت، در واقع مقدار ویژگیmin-height  اعمال خواهد شد.

ویژگی min-height

ویژگیmin-height  اجازه می دهد تا حداقل ارتفاع محتوای یک بلوک را مشخص کنید. این حداقل ارتفاع شامل حاشیه ها paddingها یا marginها نیست.

یک عنصر که ویژگی min-height  به آن اعمال می شود، هرگز از حداقل ارتفاع مشخص شده کوچکتر نخواهد شد. به عنوان مثال، اگر مقدار ویژگیheight  برابر با ۲۰۰ پیکسل و مقدار ویژگی min-height  برابر با ۳۰۰ پیکسل تنظیم شود، ارتفاع واقعی عنصر ۳۰۰ پیکسل است.

مثال

div {

height: 200px;

min-height: 300px;

}

از ویژگی min-height  معمولاً همراه با ویژگی max-height  استفاده می شود تا محدوده ارتفاع را برای عنصر مورد نظر تعیین کند.

توجه: از ویژگیmin-height  معمولاً استفاده می شود تا اطمینان حاصل شود که یک عنصر حداقل یک کمینه ارتفاع را حتی در صورت عدم وجود محتوا دارد. با این وجود اگر عنصری بیش از حداقل ارتفاع تعیین شده گسترش یابد، به طور نرمال می تواند رشد کند.

ویژگی max-width

ویژگی max-width این امکان را می دهد تا حداکثر عرض محتوای یک بلوک را مشخص کنید. این حداکثر عرض شامل حاشیه ها paddingها یا marginها نیست.

عنصری که ویژگی max-width به آن اعمال شده است هرگز از مقدار تعیین شده، عریض تر نخواهد شد، حتی اگر ویژگی width بزرگتر تنظیم شده باشد. به عنوان مثال، اگر مقدار ویژگی widthبرابر با ۳۰۰ پیکسل و مقدار ویژگی max- width برابر با ۲۰۰ پیکسل تنظیم شود، عرض واقعی عنصر ۲۰۰ پیکسل خواهد بود.

مثال

div {

width: 300px;

max-width: 200px;

}

ویژگی max-width اکثرا همراه با ویژگی min-width برای تعیین محدوده دامنه عرض عنصر مورد نظر استفاده می شود.

توجه: یک قانون استثنا وجود دارد؛ اگر ویژگی min-width با مقدار بیشتری از ویژگی max-width مشخص شود، در این حالت مقدار ویژگی min-width در واقع همان مقدار حقیقی خواهد بود.

ویژگی min-width

ویژگی min-width این امکان را می دهد تا حداقل عرض محتوای یک بلوک را مشخص کنید. این حداقل عرض شامل حاشیه ها paddingها یا marginها نیست.

عنصری که ویژگی min-width به آن اعمال شده است هرگز از مقدار تعیین شده، باریک تر نخواهد شد. به عنوان مثال، اگر مقدار ویژگی widthبرابر با ۳۰۰ پیکسل و مقدار ویژگی min- width برابر با ۴۰۰ پیکسل تنظیم شود، عرض واقعی عنصر ۴۰۰ پیکسل خواهد بود.

مثال

div {

width: 300px;

min-width: 400px;

}

ویژگی min-width اکثرا همراه با ویژگی max-width برای تعیین محدوده دامنه عرض عنصر مورد نظر استفاده می شود.

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

ویژگی Box-Sizing (تغییر رفتار پیش‌فرض ابعاد)

همان‌طور که در ابتدای متن اشاره شد، به‌طور پیش‌فرض ویژگی‌های width و height تنها عرض و ارتفاع ناحیه محتوا (Content Area) را مشخص می‌کنند. این یعنی اگر به عنصر خود padding یا border اضافه کنید، این مقادیر به عرض و ارتفاع نهایی عنصر افزوده شده و باعث بزرگ‌تر شدن آن از حد انتظار (و به هم ریختن چیدمان صفحه) می‌شوند.

برای حل این مشکل در طراحی‌های مدرن وب، از ویژگی box-sizing با مقدار border-box استفاده می‌شود. وقتی این ویژگی را اعمال می‌کنید، عرض و ارتفاع مشخص شده، شامل محتوا، padding و حاشیه‌ها (border) خواهد بود. 

مثال:

div {
 width: 300px;
 padding: 20px;
 border: 5px solid black;
 box-sizing: border-box;
}

توجه: در مثال بالا، با وجود ۲۰ پیکسل پدینگ و ۵ پیکسل حاشیه، عرض نهایی عنصر همچنان دقیقاً ۳۰۰ پیکسل باقی می‌ماند و محتوای داخلی برای جا دادن آن‌ها فشرده‌تر می‌شود.

واحدهای اندازه‌گیری Viewport (vw و vh)

علاوه بر واحدهایی مانند پیکسل (px) و درصد (%)، CSS واحدهای قدرتمند دیگری بر اساس ابعاد پنجره مرورگر کاربر (Viewport) ارائه می‌دهد که برای طراحی واکنش‌گرا بسیار پرکاربرد هستند:

• vw (Viewport Width): هر 1vw برابر با ۱ درصد از کل عرض صفحه نمایش کاربر است.

• vh (Viewport Height): هر 1vh برابر با ۱ درصد از کل ارتفاع صفحه نمایش کاربر است.

مثال:

header {
 width: 100vw;
 height: 100vh;
}

این کد باعث می‌شود که بخش header فارغ از اینکه کاربر با موبایل وارد سایت شده یا مانیتور کامپیوتر، دقیقاً کل عرض و کل ارتفاع صفحه نمایش او را پوشش دهد.

استفاده از توابع CSS برای محاسبه ابعاد (calc و clamp)

در طراحی وب مدرن، گاهی نیاز داریم ابعاد را به صورت پویا و ترکیبی محاسبه کنیم. CSS برای این کار توابع بسیار مفیدی را در اختیار ما قرار می‌دهد:

تابع calc(): این تابع به شما اجازه می‌دهد عملیات ریاضی (جمع، تفریق، ضرب و تقسیم) را روی واحدهای مختلف به‌طور هم‌زمان انجام دهید. مثال: فرض کنید می‌خواهید عرض یک عنصر کل صفحه را بگیرد اما ۵۰ پیکسل برای منوی کناری جا بگذارد:

div {
 width: calc(100% - 50px);
}

تابع clamp(): این تابع به شما اجازه می‌دهد یک «حداقل»، یک «مقدار ایده‌آل» و یک «حداکثر» را هم‌زمان برای یک ویژگی تعریف کنید. این کار نیاز به نوشتن هم‌زمان min-width، width و max-width را برطرف کرده و کدنویسی را بسیار تمیزتر می‌کند. مثال:

div {
 /* حداقل 200px، در حالت ایده آل 50% از عرض والد، حداکثر 600px */
 width: clamp(200px, 50%, 600px);
}

ویژگی‌های ابعاد منطقی (Logical Properties)

در CSS مدرن، ویژگی‌های جدیدی به نام inline-size و block-size معرفی شده‌اند. ویژگی‌های width و height به جهت فیزیکی صفحه (چپ به راست یا بالا به پایین) وابسته‌اند، اما ویژگی‌های منطقی بر اساس جهت جریان متن (Direction) کار می‌کنند. به عنوان مثال، در زبان‌های راست‌چین (مثل فارسی و عربی) یا چپ‌چین (مثل انگلیسی)، inline-size همیشه معادل عرض (متن در همان خط) و block-size معادل ارتفاع خواهد بود. استفاده از این ویژگی‌ها برای سایت‌های چندزبانه به شدت توصیه می‌شود.