מדריך בסיסי | CSS - חלק ה' | -- מודל הקופסא. --

[Men770]

ב"ה.

---

#guide(מודל הקופסא - Box model.)

היום אדבר בעז"ה על אחד הדברים הכי חשובים בעיצוב אתר - מודל הקופסא. (ועל עוד כמה תוספות קטנטנות וחשובות.)
אז דבר ראשון, מי זה מודל הקופסא?
מודל הקופסא זה מה שמגדיר איך האתר יראה.
איך אפשר להגדיר שהאתר יראה מרווח ולא צפוף, כל דבר יעמוד במקום, ועוד.

---

אז איך זה עובד?
מודל הקופסא מורכב מ-4 דברים:

• position - המיקום בדף. (זה לא באמת חלק מהמודל. זו התוספת שדיברתי עליה…)
• margin - שטח מחוץ למסגרת, הגדרות כמו רקע לא חלים עליו.
• border - מסגרת.
• padding - שטח בתוך המסגרת, הגדרות כמו רקע חלות עליו.

position

את position מגדירים כך:
left: מרחק מצד שמאל.
right: מרחק מצד ימין.
top: מרחק מלמעלה.
bottom: מרחק מלמטה.
position לא עובד ללא הגדרת ההגדרה שנקראת “position”.
2 האפשרויות הנפוצות שלה הן:

• relative - המיקום משפיע באופן יחסי למיקום הנוכחי (ניתן להשתמש במינוס.)
• absolute - המיקום משפיע ללא כל קשר למקום ההתחלתי, אלא ביחס לתחילת הדף.

margin

את margin מגדירים כך:
margin-left: מרחק מצד שמאל.
margin-right: מרחק מצד ימין.
margin-top: מרחק מלמעלה.
margin-bottom: מרחק מלמטה.

border

הגדרת מסגרות היא שונה מכל השאר, ולכן אסביר עליה בעוד 2 פרקים בעז"ה.

padding

את padding מגדירים כך:
padding-left: מרחק מצד שמאל.
padding-right: מרחק מצד ימין.
padding-top: מרחק מלמעלה.
padding-bottom: מרחק מלמטה.

---

בכל ההגדרות (חוץ מ-position), אפשר להגדיר הגדרה זהה לכל הצדדים כך:
שם ההגדרה: ערך;
לדוגמא:

margin: 1px;
padding: 1px;

---

יש עוד 2 דברים, height ו-width.
height - גובה.
width - רוחב.
איתם מגדירים את רוחב האלמנט.

---

והנה דוגמא לאתר מהפרק הקודם, אבל עם מה שלמדנו היום.

---

בהצלחה!