שימוש ב- CSS להצבת אלמנטים של HTML

• אַפּרִיל 27, 2024

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

תצוגה: מאפיין זה מגדיר כיצד מוצג אלמנט. הגדרת התצוגה ל"אין "מסתירה את האלמנט לחלוטין, בעוד שערכים אחרים יכולים לשנות את האופן שבו אלמנט מגיב לתכונות ואלמנטים אחרים. לדוגמה, divs מוגדרים להצגה כברירת מחדל כ"חסימה ", כלומר היא פועלת כאובייקט מלבני, אך אתה יכול להשתמש ב"תצוגה: inline" בכדי להכריח div לנהוג כמו פסקה במקום זאת. לחלופין, אתה יכול לעשות את ההפך ולהשתמש ב"תצוגה: חסום "כדי לאלץ פסקה לפעול כמו div.

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

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

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

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

הוראות וידאו: טקסט ב פסקאות HTML CSS (אַפּרִיל 2024).