کادرها در css :
کادرها یا باکس ها در CSS ابزاری هستند که به ما امکان می‌دهند تا عناصر HTML را در یک صفحه وب قرار دهیم و آن‌ها را بصورت موردنظر طراحی کنیم. با استفاده از کادرها، می‌توانیم اندازه، رنگ، حاشیه، پس زمینه و سایر ویژگی‌های ظاهری عناصر را تنظیم کنیم.
در CSS، کادرها به دو نوع تقسیم می‌شوند: کادرهای بلاکی و کادرهای شناور. کادرهای بلاکی (Block Boxes) عناصری هستند که در یک خط نمی‌توانند قرار بگیرند و همیشه در خط جداگانه قرار می‌گیرند. برخی از عناصر بلاکی شناخته شده در HTML شامل تگهای div، p، h1 تا h6 و غیره هستند. اما عناصر مانند span، a، strong و غیره که در ابتدا بلاکی نیستند، با استفاده از CSS قابل تبدیل به کادرهای بلاکی می‌باشند.
کادرهای شناور (Inline Boxes) عناصری هستند که در یک خط قرار می‌گیرند و در عرض خط قرار می‌گیرند. برخی از عناصر شناخته شده در HTML شامل تگهای span، a، img و غیره هستند. اما عناصر مانند div، p، h1 تا h6 که در ابتدا بلاکی هستند، با استفاده از CSS قابل تبدیل به کادرهای شناور می‌باشند.
در CSS، ما می‌توانیم کادرها را با استفاده از ویژگی‌هایی مانند اندازه (width و height)، حاشیه (margin)، پرش (padding)، حاشیه داخلی (border)، رنگ (background-color) و سایر ویژگی‌های دیگر سفارشی کنیم.
یکی از ویژگی‌های مهم کادرها در CSS، مدل جعبه (Box Model) است. مدل جعبه شامل چهار عنصر اصلی است: حاشیه (Margin)، حاشیه داخلی (Padding)، حاشیه مرزی (Border) و محتوا (Content). حاشیه، فاصله بین کادر و عناصر دیگر است و با استفاده از ویژگی margin قابل تنظیم است. حاشیه داخلی فاصله بین مرز کادر و محتوا را تعیین می‌کند و با استفاده از ویژگی padding قابل تنظیم است. حاشیه مرزی محدوده مشخص کننده کادر است و با استفاده از ویژگی border قابل تنظیم است. محتوا، محتوای داخل کادر است و می‌تواند شامل متن، تصویر، ویدئو و غیره باشد.
به عنوان مثال، با استفاده از CSS می‌توانیم یک کادر بلاکی با عرض 300 پیکسل، ارتفاع 200 پیکسل، حاشیه بالا 10 پیکسل، حاشیه راست 20 پیکسل، حاشیه پایین 10 پیکسل و حاشیه چپ 20 پیکسل ایجاد کنیم. همچنین، می‌توانیم پرش کادر را با استفاده از ویژگی padding تنظیم کنیم و رنگ پس زمینه کادر را با استفاده از ویژگی background-color تغییر دهیم.
کادرها در CSS به ما اجازه می‌دهند تا صفحات وب را به صورت دقیق و زیبا طراحی کنیم. با استفاده از ویژگی‌های مختلف کادرها، می‌توانیم ظاهر و استایل عناصر را به دلخواه خود تغییر دهیم و برخی از اصول طراحی وب را پیاده سازی کنیم.
