מודל תיבת CSS מוסבר בדוגמאות

אם אתה מתכנן לבנות פריסת דפי אינטרנט מדהימה, תצטרך לדעת על שוליים, גבולות, ריפוד ותוכן. כל אלמנט בעיצוב אתרים, בין אם זה תמונה או טקסט, משתמש בתיבה עם מאפיינים אלה. אתה יכול לבנות פריסות מורכבות בקלות על ידי משחק עם דגם הקופסה. במאמר זה ננתח את מודל Box CSS ונראה לך כיצד להשתמש במאפיינים אלה עם דוגמאות מעשיות.

מהו דגם תיבת CSS?

מודל תיבת CSS הוא תקן שנוצר על ידי קונסורציום הרשת העולמית. הוא מתאר את כל האלמנטים במסמך HTML כתיבות מלבניות בעלות מידות משלהן. תיבות אלה מכילות שטח תוכן ואזורי שוליים, גבול וריפוד אופציונליים. אז בואו נחקור את החלקים של תיבת CSS.

בואו נחשוף את ארבע השכבות של דגם תיבת ה- CSS.

שכבה ראשונה: תוכן

אזור התוכן מכיל את התוכן העיקרי של האלמנט שיכול להיות תמונה, טקסט או כל סוג של תוכן מדיה. אתה יכול לשנות את הממדים של אלמנטים ברמת בלוק באמצעות גוֹבַה ו רוֹחַב נכסים.

שכבה שנייה: ריפוד

ריפוד הוא המרווח בין תיבת התוכן לתיבת הגבול שלה. למרות שהוא יושב סביב התוכן שלך כמרחב לבן, אתה יכול להשתמש בצבע רקע כדי להמחיש את ההבדל. אתה יכול להגיש מועמדות עליון ריפוד, ריפוד-ימינה, תחתית ריפוד, ו ריפוד-שמאל מאפיינים לשינוי החלל.

שכבה שלישית: גבול

הגבול עוטף את התוכן ואת אזור הריפוד. אתה יכול לשנות את הגודל ולעצב את הגבול באמצעות רוחב גבול, בסגנון גבול, ו צבע גבול נכסים.

שכבה רביעית: שוליים

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

הגדרת פרויקט לדגם CSS Box

בואו לבנות פרויקט מיני להדגמת מודל התיבה הבסיסי עם תיבת תוכן ומאפייני ריפוד, גבול ושוליים. אתה יכול ללכת עם תוכן טקסט, תמונה או מדיה. נתחיל בכך שנוודא שהוא בנוי כראוי.

מבנה עם HTML

תְפוּקָה:

תוכל להשתמש בתכונות מובנות של הדפדפן שלך, כגון כלי מפתחים של Chrome, כדי לראות מה קורה. אנו משתמשים בשתי תמונות מ- Unsplash. לשם הפשטות, נסתיר את תמונת הסמארטפון באמצעות אל תציג דבר; עד שנזדקק לזה אחר כך.

סטיילינג באמצעות CSS

/*************************
סגנון בסיסי
*************************/
* {
שוליים: 0 פיקסלים;
ריפוד: 0 פיקסלים;
}
גוף {
תצוגה: flex;
כיוון גמיש: שורה;
} 
.display {
תצוגה: אין! חשוב;
}

עכשיו, בואו לעצב את תיבת התוכן שלנו. ראשית, נגדיר את גוֹבַה ו רוֹחַב של התמונה. כמו כן, מתן צבע רקע מסייע בהדמיה טובה יותר. אז בואו נעשה את זה.

/*************************
תיבת תוכן
*************************/
.content-box {
תצוגה: flex;
כיוון גמיש: שורה;
justify-content: center;
יישור פריטים: מרכז;
/ * עיצוב תיבת התוכן באמצעות מאפייני גובה ורוחב */
צבע-רקע: #fdf;
גובה: 20 em;
רוחב: 30 em;
}

תנו לתוכן מקום לנשום בעזרת ריפוד

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

 /*************************
ריפוד
*************************/
/ * מריחת ריפוד */
למעלה ריפוד: 5 em;
ריפוד-ימינה: 2 em;
תחתית ריפוד: 8 em;
ריפוד-שמאל: 2 em;
/ * קיצור ריפוד */
/ * למעלה/ימין/תחתון/שמאל */
ריפוד: 5em 2em 8em 2em;
/ * למעלה/אופקי/תחתון */
ריפוד: 5em 2em 8em;

תְפוּקָה:

צייר קווים סביב ריפוד באמצעות גבול

בעת החלת נכס הגבול, וודא שאתה משתמש ב צבע גבול תכונה להעניק לגבול צבע מובהק מהרקע. אתה יכול לבחור את בסגנון גבול בנפרד או בבת אחת על ידי שימוש בנכס קצרנות. אותו דבר לגבי רוחב גבול תכונה.

אתה יכול גם להגדיר את רדיוס גבול כדי לתת לקופסא פינות מעוגלות עם רדיוס פנימי px, rem, em, או אחוזים.

 /*************************
גבול
*************************/
/ * החלת נכסי גבול */
/ * הגדר את צבע הגבול */
גבול-צבע: rgb (148, 234, 255);
/ * בחר סגנון גבול */
סגנון גבול-טופ: מוצק;
סגנון גבול-ימין: מקווקו;
בסגנון גבול-תחתון: חריץ;
בסגנון גבול-שמאל: רכס;
/ * קיצור בסגנון גבול */
/ * למעלה/ימין/תחתון/שמאל */
בסגנון גבול: רכס חריץ מקווקו מוצק;
/ * הגדר רוחב גבול */
גבול-רוחב למעלה: 4 em;
גבול-ימין-רוחב: 2 em;
גבול-תחתית-רוחב: 2 em;
גבול-שמאל-רוחב: 2 em;
/* קצרנות ברוחב הגבול*/
/ * למעלה/ימין/תחתון/שמאל */
רוחב הגבול: 4em 2em 2em 2em;
/ * למעלה/אופקי/תחתון */
רוחב הגבול: 4em 2em 2em;
/ * תמצית נכסי גבול */
/* גבול: 4em rgb מוצק (148, 234, 255); */
/ * הגדר רדיוס גבול */
רדיוס גבול: 5 em;
רדיוס גבול: 20%;

תְפוּקָה:

הוסף רווח בין קופסאות עם שוליים

אתה יכול למרכז תיבה אופקית באמצעות שוליים: 0 אוטומטי, בתנאי שיש לו רוחב מוגדר.

 /*************************
שולים
*************************/
/ * החלת נכסי שוליים */
שוליים למעלה: 4 em;
שוליים-ימין: 5 em;
שוליים-תחתונים: 3 em;
שוליים-שמאל: 5 em;
/ * קצרות שוליים */
/ * למעלה/ימין/תחתון/שמאל */
שוליים: 4em 5em 3em 5em;
/ * למעלה/אופקי/תחתון */
שוליים: 4em 5em 3em;
/ * שימוש בשוליים אוטומטיים */
שוליים: 3em אוטומטי;

תְפוּקָה:

ניתן לציין את מאפיין השוליים באמצעות ערך אחד, שניים, שלושה או ארבעה. הערכים יכולים להיות אורך, אחוז או מילת מפתח כמו אוטומטי. בואו להבין איך זה עובד:

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

שים לב שאתה יכול להשתמש בקיצורי דרך אלה גם למאפייני ריפוד וגבול.

ראה גם: גיליון הרמאות של מאפייני ה- CSS3 Essential

האם השתמשת פעם בשוליים שליליים? כדי לדמיין את זה בואו למחוק אל תציג דבר כדי להציג את התמונה השנייה שלנו, ולאחר מכן הגדר שוליים שליליים.

/* .display {
תצוגה: אין! חשוב;
} */
.content-box {
תצוגה: flex;
כיוון גמיש: שורה;
יישור פריטים: מרכז;
צבע-רקע: #fdf;
גובה: 20 em;
רוחב: 30 em;
ריפוד: 5em 2em 8em;
בסגנון גבול: רכס חריץ מקווקו מוצק;
רוחב הגבול: 4em 2em 2em;
רדיוס גבול: 20%;
/ * שימוש בשוליים שליליים */
שוליים: 3em -20em 3em 5em;
}

תְפוּקָה:

מודל הקופסה: הכנת אתר מושלם לפיקסל

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

עליך להבין שישנן שיטות אחרות לפריסת תוכן ב- CSS. אלה כוללים CSS Grid ו- CSS Flexbox. ברגע שאתה מרגיש בנוח עם מודל התיבה, עליך להמשיך ללמוד על חלופות אלה.

CSS Flexbox הדרכה: היסודות

מקם את רכיבי ה- HTML שלך בצורה מושלמת בעזרת CSS Flexbox.

קרא הבא

על הסופר