CSS הסביר את דוגמת התיבה באמצעות דוגמאות.

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

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

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

ראשית צור div ולהניח בתוכו את התווית "p",

הנה קצת תוכן ...

ואז תן לו כמה סגנונות.

div {רקע: # 666; רוחב: 300 פיקסלים; גובה: 250 פיקסלים; } p {רוחב: 200 פיקסלים; רקע: אדום; }

כנראה שלא שמנו מילוי או מגבלה על אלמנט ה- div, כך שלאלמנט ה- div אין עדיין תיבה או שדות למילוי, וכל התיבה היא תיבת תוכן.

כמוצג בתמונה למטה.

אתה יכול לפתוח את עצמך על ידי פתיחת תוכנת Chrome

עכשיו תן לחלל שטח של 50 פיקסלים מלמעלה, למטה, משמאל, ימינה.

div {רקע: # 666; רוחב: 300 פיקסלים; גובה: 250 פיקסלים; מילוי: 50px; // למלא את החלק העליון, התחתון, השמאלי, הימני}

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

עכשיו סוף סוף יש לנו קופסה של 50 פיקסלים

כעת הסר את הרוחב מאלמנט ה- p כך שייקח רוחב מלא של תיבת התוכן.

p {רקע: אדום; }

אתה יכול לראות את התוצאה בתמונה למטה.

אלמנט ה- P מתרחב לקבלת רוחב המלא של הרכיב

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

div {רקע: # 666 url ('https://bit.ly/2gzkSPX') אינו חוזר; גודל רקע: מכיל; גבול: 10px שחור מוצק; רוחב: 300 פיקסלים; גובה: 250 פיקסלים; מילוי: 50px; }

לאחר מכן זה ייראה כמו בתמונה למטה.

ניתן לבדוק זאת על ידי מעבר ליצרן התוכנה ולחץ על דגם התיבה כמוצג בתמונה

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

רקע: תיבת ריפוד; / * ערך ברירת מחדל * /

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

div {רקע: # 666 url ('https://bit.ly/2gzkSPX') אינו חוזר; גודל רקע: מכיל; קליפ רקע: תיבת תוכן; גבול: 10px שחור מוצק; רוחב: 300 פיקסלים; גובה: 250 פיקסלים; מילוי: 50px; }

ניתן לראות את התוצאות בתמונה למטה, מכיוון שרק חלק אחד מהתמונה בתיבת התוכן גלוי, אך התמונה מתחילה בתיבת המילוי מכיוון ש- "box-orgin" הוא ברירת המחדל.

ככל הנראה, רק החלק שבתמונה בתיבת התוכן גלוי והשאר מוסתר

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

div {רקע: # 666 url ('https://bit.ly/2gzkSPX') אינו חוזר; גודל רקע: מכיל; קליפ רקע: תיבת ריפוד; גבול: 10px שחור מוצק; רוחב: 300 פיקסלים; גובה: 250 פיקסלים; מילוי: 50px; }

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

כעת נוכל לראות גם את החלק בתמונה בתיבת התמונה

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

div {רקע: # 666 url ('https://bit.ly/2gzkSPX') אינו חוזר; גודל רקע: מכיל; מקור רקע: תיבת גבול; קליפ רקע: תיבת ריפוד; גבול: 20px שחור מוצק; / * רוחב עכשיו 20 פיקסלים * / רוחב: 300 פיקסלים; גובה: 250 פיקסלים; מילוי: 50px; }

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

כעת התמונה מתחילה בתיבת הסימון

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

div {רקע: # 666 url ('https://bit.ly/2gzkSPX') אינו חוזר; גודל רקע: מכיל; מקור רקע: תיבת גבול; קליפ רקע: תיבת ריפוד; גבול: 20px rgba מוצק (0,0,0,0,5); / * רוחב באמצעות rgba () * /: 300px; גובה: 250 פיקסלים; מילוי: 50px; }
כאן תוכלו לראות את התמונה מאחורי הגבול הקלוש

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

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

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