العرض والتموضع

1التدفّق العادي (Normal Flow)

حتى إلا ما كتبتي حتى CSS، المتصفح كيرتّب العناصر حسب Normal Flow. عناصر block بحال div وp وh1 كيجيو واحد تحت واحد وكيشدو العرض. عناصر inline بحال a وspan وimg كيبقاو فنفس السطر حتى يعمّر.

2display

الخاصية display كتحدد نوع الصندوق ديال العنصر، وكيفاش كيتنظمو العناصر اللي داخلو.

display: none vs visibility: hidden vs opacity: 0

3نموذج الصندوق (Box Model)

كل عنصر بحال صندوق فيه أربع طبقات: content فالنص، من بعد padding (المسافة الداخلية)، border (الإطار)، وmargin (المسافة الخارجية).

ديما استعمل box-sizing: border-box

إلا كتبتي width: 300px وpadding: 20px، العرض النهائي يقدر يوصل 340px. هادشي كيخلّق تجاوز العرض. مع border-box، الـ padding والـ border كيتحسبو داخل العرض اللي حددتي.

*, *::before, *::after { box-sizing: border-box; }

الاختصارات ديال Margin

margin: 10px;              /* all four sides */
margin: 10px 20px;         /* vertical | horizontal */
margin: 10px 20px 30px;    /* top | horizontal | bottom */
margin: 10px 20px 30px 40px; /* top right bottom left (clockwise) */
margin: 0 auto;            /* centers a block that has a width */
margin-left: auto;         /* pushes an element to the far right */

4position

position كتحدد واش العنصر غادي يبقى فـ Normal Flow ولا لا. top وright وbottom وleft كيعونوك تحركو ولا تثبتو.

جرّب

بدّل الأب لـ static وشوف كيفاش الهدف كيتحسب من الصفحة الخارجية. مع relative، العناصر اللي حداك ما كيتحركوش. أما مع absolute، العناصر كيسدّو البلاصة اللي تخلّات.

اختصارات التموضع

inset: 0;                 /* top, right, bottom, left all 0: stretch to fill the parent */
position: absolute; top: 0; right: 0;     /* pin to top-right corner */
position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; /* centered */

fixed

.chat-button { position: fixed; right: 20px; bottom: 20px; }

العنصر fixed كيبقى فبلاصتو وانت كتهبط فالصفحة. غير شي خصائص فالآباء بحال transform ولا filter ولا perspective تقدر تبدّل المرجع ديالو.

sticky

باش sticky يخدم، خاصو حدّ بحال top: 0 وبلاصة كافية يتحرك فيها. جرّب السكرول فالصندوق اللي لتحت.

header { position: sticky; top: 0; z-index: 10; background: #fff; }

5z-index وتراكب العناصر

z-index كيتحكم شكون كيبان فوق شكون ملي العناصر كيتراكبو. الرقم الكبير كيغلب، ولكن غالباً خاص العنصر يكون positioned ولا عنصر داخل Flex/Grid.

/* a simple scale that avoids chaos */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-toast: 400;

6Flexbox

Flexbox كينظّم العناصر فاتجاه واحد: Navbar ولا أزرار ولا Cards حدّا حدّا. دير display: flex فالعنصر الأب، وغادي يولي ولادو Flex Items.

.row { display: flex; gap: 16px; }

عندنا جوج ديال المحاور: Main Axis هو اتجاه العناصر، وCross Axis هو اللي مقاطع معاه. justify-content كيخدم على الأول، وalign-items على الثاني. ملي كتدير flex-direction: column، كيتبدلو.

جرّب

خصائص الأب

خصائص العناصر الداخلية

7Grid

Grid مزيان ملي بغيتي السطور والأعمدة فـ نفس الوقت: Gallery ولا Dashboard ولا Form. دير display: grid فالأب وحدّد الأعمدة.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;   /* three columns, middle twice as wide */
  gap: 16px;
}
.wide { grid-column: 1 / 3; }           /* from line 1 to line 3 = 2 columns */

Cards Responsive بلا Media Query

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

كل Card عرضها على الأقل 240px، والمتصفح كيدير اللي قدر عليه فكل سطر.

Layout بمناطق مسمّاة

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: footer; }

8توسيط العناصر

/* 1. Center anything, horizontally and vertically (best default) */
.parent { display: grid; place-items: center; }

/* 2. Same with flex */
.parent { display: flex; justify-content: center; align-items: center; }

/* 3. Center a block horizontally only */
.box { width: 600px; max-width: 100%; margin: 0 auto; }

/* 4. Center text */
.text { text-align: center; }

/* 5. Center an absolutely positioned element */
.box { position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; }

/* 6. Center on the full screen */
.parent { min-height: 100vh; display: grid; place-items: center; }

9كيفاش ندير…؟

<nav class="nav"><a class="logo">DECT</a><ul class="links">…</ul></nav>

.nav   { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; }
.links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }

.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav .cta { justify-self: end; }

.nav { position: sticky; top: 0; z-index: 100; background: #fff; }

.links { display: flex; gap: 16px; }
.links .login { margin-left: auto; }

.card  { position: relative; padding: 24px; }
.close { position: absolute; top: 12px; right: 12px; }

.icon  { position: relative; display: inline-block; }
.badge { position: absolute; top: -6px; right: -6px; }

.fab { position: fixed; right: 20px; bottom: 20px; z-index: 50; }

.item     { position: relative; }
.dropdown { position: absolute; top: 100%; left: 0; display: none; min-width: 180px; z-index: 100; }
.item:hover .dropdown { display: block; }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; z-index: 300; }
.modal   { background: #fff; padding: 24px; width: min(480px, 92vw); border-radius: 8px; }

body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
main { flex: 1; }   /* takes all leftover space, footer is pushed down */

.layout  { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.sidebar { position: sticky; top: 16px; align-self: start; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card  { display: flex; flex-direction: column; }
.card .btn { margin-top: auto; }

.actions { display: flex; gap: 12px; }

.hero { min-height: 100vh; display: grid; place-items: center; text-align: center; }

.row { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .row { flex-direction: row; } .row > * { flex: 1; } }

.burger { display: none; }
@media (max-width: 767px) { .links { display: none; } .burger { display: block; } }

.hero { position: relative; }
.hero img { width: 100%; display: block; }
.hero .text { position: absolute; left: 24px; bottom: 24px; color: #fff; }

10مشاكل كيتلاقاو بزاف

كيفاش تقلّب على المشكل

/* 1. Show every box */
* { outline: 1px solid rgba(255,0,0,.4); }

/* 2. In the browser: right-click → Inspect → hover the element
      The colors show margin, border, padding and content.
   3. Check the "Computed" tab for the real display and position. */

11الوحدات والقياسات

width: min(1100px, 92%);               /* never wider than 1100px, never touching the edges */
font-size: clamp(1rem, 2.5vw, 1.5rem); /* min | preferred | max */
.container { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
img { max-width: 100%; height: auto; }  /* images never overflow */

12ورقة مرجعية