CSS Layout – width and max-width

توضیح درباره ویژگی‌های width و max-width در CSS به همراه ترجمه فارسی:

—

1. width

* مشخص می‌کند که عرض یک عنصر چقدر باشد.

* می‌تواند مقدار ثابت مثل `px`، درصد `%`، یا واحدهای دیگر مثل `em`، `rem` و… بگیرد.

* مثال:

css
div {
width: 300px;
}

یعنی عرض `div` برابر ۳۰۰ پیکسل است.

* اگر مقدار `width` به درصد داده شود، عرض عنصر نسبتی از عرض عنصر والد خواهد بود.

—

2. max-width

* حداکثر عرضی که یک عنصر می‌تواند داشته باشد را تعیین می‌کند.
* از این ویژگی برای محدود کردن بیشترین عرض یک عنصر استفاده می‌شود.
* کاربرد خیلی مهم دارد وقتی می‌خواهیم عنصر در صفحه‌های خیلی بزرگ بزرگ‌تر از حد مشخص نشود.

* مثال:

css
div {
max-width: 600px;
}

یعنی عرض `div` نمی‌تواند از ۶۰۰ پیکسل بیشتر شود، حتی اگر مقدار `width` بزرگ‌تر باشد یا صفحه بزرگ‌تر باشد.

—

 نکته مهم درباره ترکیب width و max-width

* اگر هر دو با هم استفاده شوند، مرورگر ابتدا مقدار `width` را می‌گیرد اما اگر این مقدار بزرگ‌تر از `max-width` باشد، مقدار `max-width` اعمال می‌شود و عرض عنصر به آن محدود می‌شود.
* این به شما اجازه می‌دهد که عرض انعطاف‌پذیر داشته باشید ولی حد بالایی برای آن تعریف کنید.

—

مثال ترکیبی:

css
.container {
width: 80%;
max-width: 1200px;
}

* این یعنی `.container` عرضی برابر ۸۰٪ از عرض والد دارد، اما هرگز از ۱۲۰۰ پیکسل بیشتر نمی‌شود.