1.2 מודל הקופסה תרגול

תרגול - מודל הקופסה

תרגיל 1 - ניסוי עם padding, margin, border

צרו דף HTML עם שלושה div-ים שכל אחד מכיל טקסט כלשהו. לכל div תנו class שונה ועצבו:

• div ראשון: padding של 10px, border של 1px solid black, בלי margin
• div שני: padding של 30px, border של 3px dashed blue, margin של 20px
• div שלישי: padding של 50px, border של 5px double red, margin של 40px

פתחו את ה-DevTools (F12) ובדקו את הויזואליזציה של מודל הקופסה לכל div. שימו לב להבדלים.

תרגיל 2 - מרכוז div

צרו div עם רוחב 500px וגובה 300px, עם רקע צבעוני כלשהו. מרכזו אותו אופקית בדף באמצעות margin: auto.

לאחר מכן:
- הוסיפו עוד div קטן יותר (300px רוחב) בתוך ה-div הראשון ומרכזו גם אותו
- עכשיו שנו את הdiv החיצוני ל-max-width: 500px במקום width: 500px ובדקו מה קורה כשמקטינים את חלון הדפדפן

תרגיל 3 - כרטיס (card component)

בנו כרטיס מוצר עם:
- תמונה (אפשר להשתמש ב-https://via.placeholder.com/300x200)
- שם מוצר
- תיאור קצר
- מחיר
- כפתור "Add to Cart"

הכרטיס צריך:
- רוחב מקסימלי 350px
- גבול עדין עם פינות מעוגלות (border-radius)
- padding פנימי
- margin בין הכרטיס לאלמנטים סביבו
- להיות ממורכז בדף

תרגיל 4 - הדגמת margin collapse

צרו שלושה div-ים אחד מתחת לשני:
- div ראשון עם margin-bottom: 30px
- div שני עם margin-top: 20px ו-margin-bottom: 40px
- div שלישי עם margin-top: 25px

בדקו ב-DevTools:
- מה המרחק בפועל בין div ראשון לשני? (צריך להיות 30px, לא 50px)
- מה המרחק בין div שני לשלישי? (צריך להיות 40px, לא 65px)

עכשיו תקנו את ה-margin collapse באחת הדרכים:
- עטפו את ה-div-ים בקונטיינר עם display: flex ו-flex-direction: column
- או הוסיפו border/padding להורה

תרגיל 5 - overflow

צרו div עם:
- רוחב 300px
- גובה 150px
- הכניסו לתוכו טקסט ארוך מאוד (כמה פסקאות)

נסו את כל ארבעת ערכי ה-overflow ובדקו מה קורה:
1. overflow: visible
2. overflow: hidden
3. overflow: scroll
4. overflow: auto

לאחר מכן, נסו overflow-x: hidden עם overflow-y: auto ובדקו את ההבדל.

תרגיל 6 - חישוב מודל הקופסה

ענו על השאלות הבאות בלי להריץ קוד (חשבו ובדקו אחר כך):

שאלה א: מה הרוחב הכולל של האלמנט הזה (ב-content-box)?

.box {
    width: 200px;
    padding: 15px;
    border: 5px solid black;
    margin: 10px;
}

שאלה ב: מה הרוחב הכולל של האלמנט הזה (ב-border-box)?

.box {
    box-sizing: border-box;
    width: 200px;
    padding: 15px;
    border: 5px solid black;
    margin: 10px;
}

שאלה ג: מה הגובה הכולל של האלמנט?

.box {
    box-sizing: border-box;
    width: 300px;
    height: 100px;
    padding: 20px 10px;
    border: 3px solid gray;
    margin: 15px 5px;
}

שאלה ד: שני div-ים אנכיים, האחד עם margin-bottom: 25px והשני עם margin-top: 35px. מה המרחק ביניהם?

תרגיל 7 - קונטיינר תוכן

צרו layout בסיסי של דף:
- קונטיינר מרכזי עם max-width: 960px שממורכז בדף
- header בתוך הקונטיינר עם padding ורקע כהה
- אזור תוכן עם כמה כרטיסים (אפשר להשתמש בכרטיס מתרגיל 3)
- footer עם padding ורקע כהה

ודאו ש:
- הכל ב-border-box
- הדף נראה טוב גם כשמקטינים את החלון (בזכות max-width)
- יש מרווחים נכונים בין האלמנטים