نموذج الصندوق — الفكرة التي تقوم عليها اللغة كلها

تخطّط CSS كل عنصر في أربع طبقات متراكزة، والصندوق الذي تراه هو width + padding + border.

• content (width × height) في المركز
• padding مساحة داخل الحدّ؛ وborder الحافة؛ وmargin الفجوة خارجها
• صندوق 200px بحشو 20px وحدّ 2px عرضه الحقيقي 244px
• box-sizing: border-box يجعل width يشمل الحشو والحدّ — اضبطه في كل مكان
• min/max-width تحدّ الحجم؛ وoverflow: hidden يقصّ، وoverflow: scroll يضيف شريط تمرير

الحدود والحشو والهوامش عمليًا

للحدّ ثلاث خصائص فرعية، ويأخذ الحشو والهامش قيمة لكل جهة أو اختصارًا باتجاه عقارب الساعة.

• border-style وborder-width وborder-color — أو اختصار border: 5px solid red
• border-radius يدوّر الزوايا
• الاختصار يسير مع عقارب الساعة من الأعلى: padding: 25px 50px 75px 100px هو أعلى، يمين، أسفل، يسار
• visibility: hidden يخفي الصندوق لكن يُبقي مساحته
• display: none يزيل الصندوق ومساحته تمامًا

القوائم والجداول

علامات القوائم وحدود الجداول تعيد استخدام أدوات تعرفها، مع قليل خاص بها.

• list-style-type (disc وsquare وdecimal وupper-roman…) وlist-style-image وlist-style-position
• اختصار list-style يضبط الثلاثة دفعة واحدة
• border-collapse: collapse يدمج الحدود المزدوجة في خطوط واحدة
• border-spacing يضبط الفجوة حين تبقى الحدود منفصلة
• empty-cells: hide يمنع الحدود حول الخلايا الفارغة
• tr:hover { background-color: … } يبرز الصف تحت المؤشر

النماذج والصور

حقول النماذج ما هي إلا صناديق، والصور يمكن تحجيمها وتعويمها.

• تأخذ الحقول font-size وbackground-color وborder وborder-radius و:hover
• أضف box-sizing: border-box كي لا يفيض حقل بـ width: 100%
• cursor يغيّر المؤشر — pointer وtext وmove وwait وhelp
• حجّم الصور بـ width/height؛ وfloat: left/right يجعل النص يلتفّ حولها
• background-image + background-repeat يبلّطان صورة؛ واختصار background يجمع اللون والصورة والتكرار