عرض وارتفاع وفيضان CSS

<style>
.box {
  width: 300px;
  height: 200px;
  background: #f0f0f0;
}
</style>
<div class="box">عنصر صندوق يُظهر نطاق الأبعاد</div>

<style>
.pixel {
  width: 300px;
  background: #e3f2fd;
}
.percent {
  width: 50%;
  background: #fce4ec;
}
.vw-vh {
  width: 50vw;
  height: 100vh;
  background: #e8f5e9;
}
.auto-width {
  width: auto;
  background: #fff3e0;
}
</style>
<div class="pixel">وحدة بكسل: عرض ثابت 300px</div>
<div class="percent">وحدة النسبة: عرض 50%</div>
<div class="vw-vh">وحدة منفذ العرض: عرض 50vw</div>
<div class="auto-width">عرض تلقائي: يحدده المحتوى</div>

<style>
.container {
  width: 80%;
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto;
  background: #e8eaf6;
  padding: 10px;
}
</style>
<div class="container">حاوية مع قيود عرض متجاوبة</div>

<style>
.card {
  min-height: 200px;
  max-height: 400px;
  background: #fff3e0;
  border: 1px solid #ccc;
}
</style>
<div class="card">مكون بطاقة بارتفاع أدنى/أقصى. المحتوى الذي يتجاوز الارتفاع الأقصى سيفيض وسيتطلب خاصية overflow للمعالجة.</div>

<style>
.layout {
  width: calc(100% - 300px);
  background: #e3f2fd;
  padding: 16px;
}

.sidebar {
  width: 300px;
  float: left;
  background: #fce4ec;
  padding: 16px;
  box-sizing: border-box;
}
</style>
<div class="layout">المحتوى الرئيسي: عرض = 100% - 300px</div>

<style>
.visible {
  overflow: visible;
  background: #fce4ec;
  height: 50px;
}
.hidden {
  overflow: hidden;
  background: #e8f5e9;
  height: 50px;
}
.scroll {
  overflow: scroll;
  background: #fff3e0;
  height: 50px;
}
.auto {
  overflow: auto;
  background: #e3f2fd;
  height: 50px;
}
</style>
<div class="visible">منطقة مرئية (الفيضان يظهر خارج الصندوق)</div>
<div class="hidden">المحتوى يُقص عند التجاوز (overflow hidden)</div>
<div class="scroll">شريط التمرير مرئي دائماً حتى لو容纳 المحتوى</div>
<div class="auto">شريط التمرير يظهر فقط عندما يفيض المحتوى</div>

<style>
.box {
  overflow-x: hidden;
  overflow-y: auto;
  width: 200px;
  height: 80px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}
</style>
<div class="box">عنصر صندوق بفيضان أفقي مخفي وتمرير عمودي تلقائي لعرض جميع المحتوى</div>

<style>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  border: 1px solid #ccc;
  padding: 8px;
  background: #f9f9f9;
}
</style>
<div class="ellipsis">هذا نص طويل سيتم حذفه بعلامة القطع عند تجاوز عرض الحاوية</div>

<style>
.avatar {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  background: #e0e0e0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<div class="avatar">حاوية الصورة الرمزية (قص دائري)</div>

<style>
.scroll-box {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  background: #fafafa;
}
</style>
<div class="scroll-box">
  <p>السطر 1: حاوية التمرير يمكنها عرض محتوى كبير</p>
  <p>السطر 2: شريط التمرير يظهر عندما يتجاوز المحتوى الارتفاع</p>
  <p>السطر 3: مرّر لعرض المحتوى المخفي</p>
  <p>السطر 4: تم تنفيذه بـ overflow-y: auto</p>
  <p>السطر 5: محتوى أكثر يعني تمرير أكثر</p>
  <p>السطر 6: مناسب لأقسام التعليقات والإعلانات وما إلى ذلك</p>
</div>

<style>
.clearfix {
  overflow: hidden;
  background: #e8eaf6;
  padding: 10px;
}
</style>
<div class="clearfix">حاوية مسح الطفو (overflow: hidden يُشعل BFC)</div>

<style>
.image-container {
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  border: 2px dashed #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<div class="image-container">حاوية الصورة (استبدل بالصورة الفعلية)</div>

<style>
.calc-demo {
  width: calc(100% - 40px);
  height: calc(50vh - 60px);
  background: #e3f2fd;
  border: 1px solid #90caf9;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<div class="calc-demo">العرض يطرح تلقائياً 40px، الارتفاع نصف منفذ العرض ناقص 60px</div>