CSS שיבוץ למעלה: תוכן ודירוג

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

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

כללי מיצוב בסיסיים

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

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

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

• margin: 10px;
• ריפוד: 10px20px;
• ריפוד: 10px20px30px40px.

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

בכל המקרים הללו, ה- CSS השולי העליון הוא 10 פיקסלים.

קביעת כללים המשנים את עמדת אלמנטים

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

אם נגדיר את השוליים העליונים של רכיב CSS scCurrInfo מושגת, ואם ברמת li - אין.

בדוגמא זו, שימוש כללי padding: 40 פיקסלים; זה דורש כללים נאותים לצמצם את הרוחב והגובה כדי 80px. אחרת גודל בלוק scCurrInfo יוצא מעבר ליחידה החיצונית.

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

באופן טבעי, כגון שימוש כללים הזחה לחול על כל li אלמנט.

עיצוב תוכן תרגול כללי

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

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

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

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

מיקום מוחלט

; עמד כלל בלוק: absolute; זה יהיה ממוקם במקום המיועד על ידי הקואורדינטות שלה ביחס לבלוק בו הוא ממוקם.

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

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

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