مفاهیم پایه عرض (Width) به بعد افقی یک عنصر در فضای دو بعدی اشاره دارد. این مفهوم در طراحی رابط کاربری، گرافیک کامپیوتری و پردازش تصویر نقش اساسی ایفا می کند و معمولاً بر حسب پیکسل، درصد یا واحدهای نسبی اندازه گیری می شود. انواع اندازه گیری عرض 1- مطلق: پیکسل (px)، نقطه (pt)، اینچ (in) 2- نسبی: درصد (%)، viewport width (vw) 3- محتوامحور: auto، min-content، max-content 4- انعطاف پذیر: fr (در CSS Grid) 5- شرطی: بر اساس رسانه (Media Queries) کاربردها - تعیین اندازه عناصر در صفحه - طراحی واکنش گرا (Responsive Design) - محاسبات چیدمان (Layout) - پردازش و تحلیل تصاویر - کنترل جریان متن (Text Wrapping) پیاده سازی در CSS .container { width: 100%; /* نسبی */ max-width: 1200px; /* محدودیت */ min-width: 320px; /* حداقل */ }
.item { width: calc(50% - 20px); /* محاسباتی */ } مفاهیم پیشرفته - Box Model: محاسبه عرض کل با padding و border - Flexbox: توزیع عرض انعطاف پذیر - Grid: کنترل عرض ستون ها - Aspect Ratio: حفظ نسبت عرض به ارتفاع - Clip Path: تغییر شکل عرض ظاهری چالش ها - تفاوت در مرورگرها - تطبیق با دستگاه های مختلف - مدیریت محتوای با عرض متغیر - عملکرد در عناصر پیچیده - دسترسی پذیری و بزرگنمایی
