המאפיין CSS הוא נכס חשוב מאוד לפריסה. זה מאפשר לך למקם את דף האינטרנט שלך עיצובים בדיוק כפי שאתה רוצה להציג אותם, אבל כדי להשתמש בו אתה צריך להבין איך זה עובד.
בגיליון סגנונות, המאפיין CSS float נראה כך:
.right {float: right; }
זה אומר לדפדפן כי כל דבר עם הכיתה של "ימין" צריך להיות צף בצד ימין.
היית מקצה את זה ככה:
class = "right" />
מה אתה יכול לצוף עם CSS לצוף נכס?
אתה לא יכול לצוף כל אלמנט בדף אינטרנט. אתה יכול רק לצוף ברמת בלוק אלמנטים. אלה הם האלמנטים שתופסים שטח בלוק בדף, כמו תמונות (), פסקאות (), מחלוקות () ורשימות ().
רכיבים אחרים המשפיעים על טקסט, אך אינם יוצרים תיבה בדף נקראים אלמנטים מוטבעים ולא ניתן להציגם. אלה הם אלמנטים כמו span (), מעברי שורה (), דגש חזק (), או נטוי ().
איפה הם צפים?
אתה יכול לצוף אלמנטים ימינה או שמאלה. כל אלמנט הבא את המרכיב הצף יזרם סביב אלמנט צף בצד השני.
לדוגמה, אם אני מרחף תמונה משמאל, כל טקסט או אלמנטים אחרים בעקבותיו יזרמו סביבו ימינה. ואם אני מרחף תמונה ימינה, כל טקסט או אלמנטים אחרים בעקבות זה יזרמו סביב זה שמאלה. תמונה שמוצבת בבלוק טקסט ללא כל סגנון צף שיוחל עליו תציג, אולם הדפדפן מוגדר להצגת תמונות. זה בדרך כלל עם השורה הראשונה של הטקסט הבא מוצג בתחתית התמונה.
כמה רחוק הם יצפו?
אלמנט שנצפה ינוע עד הסוף שמאלה או ימינה של אלמנט המכולה כפי שהוא יכול. התוצאה היא מספר מצבים שונים, בהתאם לאופן כתיבת הקוד. עבור דוגמאות אלה, אני יהיה צף קטן DIV אלמנט משמאל:
- אם אלמנט צף אין רוחב מוגדר מראש, זה ייקח שטח אופקי רב ככל הנדרש וזמין, ללא קשר לצוף. הערה: חלק מהדפדפנים מנסים להציב אלמנטים לצד אלמנטים צפים כאשר הרוחב אינו מוגדר - בדרך כלל נותן אלמנט שאינו צף רק כמות קטנה של שטח. אז כדי לך תמיד להגדיר רוחב על אלמנטים צפים.
- אם רכיב המכולה הוא אלמנט HTML, הצף
DIVיושבים בשוליים השמאליים של הדף. - אם אלמנט המכולה מכיל את עצמו במשהו אחר, צף
DIVיושבים על השוליים השמאליים של המכולה. - אתה יכול לקנן אלמנטים צף, וזה יכול לגרום לצוף מסתיים במקום מפתיע. לדוגמה, זה float הוא שמאל צף
DIVבתוך ימין צףDIV. - אלמנטים צפים יושבים זה ליד זה אם יש מקום במיכל. לדוגמה, מיכל זה מכיל רוחב של 100px
DIVאלמנטים צף בתוך מיכל רחב 400px.
אתה יכול אפילו להשתמש צף ליצור פריסת גלריה צילום. אתה שם כל תמונה ממוזערת (זה עובד הכי טוב כאשר הם כולם באותו גודל) ב DIV עם הכיתוב ואת לצוף DIV אלמנטים במיכל. לא משנה כמה רחב חלון הדפדפן, התמונות הממוזערות יהיה בשורה אחידה.
מכבה את Float
ברגע שאתה יודע איך להגיע אלמנט לצוף, חשוב לדעת איך לכבות את הצוף. אתה מכבה את הצוף עם המאפיין CSS ברור. אתה יכול לנקות משטחים שמאלה, צף ימינה או שניהם:
בהיר: משמאל;בהיר: מימין;תנקה את שניהם;
כל אלמנט שתגדיר את המאפיין הברור יופיע מתחת לאלמנט שצף בכיוון זה. לדוגמה, בדוגמה זו שתי הפסקאות הראשונות של הטקסט אינן מנוקות, אך השלישי הוא.
שחק עם הערך הברור של אלמנטים שונים במסמכים שלך כדי לקבל אפקטים פריסה שונים. אחת הפריסות המעניינות המעניינות ביותר היא סדרה של תמונות בעמודה הימנית או השמאלית ליד פסקאות של טקסט. גם אם הטקסט אינו ארוך מספיק כדי לגלול על פני התמונה, ניתן להשתמש ברורים על כל התמונות כדי לוודא שהם מופיעים בעמודה ולא ליד התמונה הקודמת.
HTML (חזור על הפסקה הזו):
דואיס aure irure dolor sed לעשות eiusmod זמני incididunt ב rerehenderit ב voluptate. קופידאט לא proident, לאבורה et dolore magna aliqua.
CSS (לצוף את התמונות משמאל):
img.float {float: left; בהיר: משמאל; שוליים: 5px;}
ובצד ימין:
img.float {float: right; בהיר: מימין; שוליים: 5px;}
באמצעות צפים עבור פריסה
ברגע שאתה מבין איך לצוף רכוש עובד, אתה יכול להתחיל להשתמש בו כדי לפרוס את דפי האינטרנט שלך. אלה הם הצעדים שאני לוקח כדי ליצור דף אינטרנט צף:
- לעצב את הפריסה (על נייר או בכלי גרפיקה או בראש שלי).
- לקבוע היכן חטיבות הדף יהיו.
- קביעת רוחב של מכולות שונות ואת האלמנטים שבתוכם.
- צף הכל. אפילו אלמנט המכולה החיצונית הוא צף שמאלה, כך שאני יודע איפה זה יהיה ביחס ליציאת תצוגת הדפדפן.
כל עוד אתה יודע את רוחב (באחוזים הם בסדר) של סעיפים הפריסה שלך, אתה יכול להשתמש לצוף רכוש לשים אותם שם הם שייכים בדף. וזה דבר נחמד, אתה לא צריך לדאוג הרבה על מודל התיבה להיות שונה עבור Internet Explorer או Firefox.
