CSS - marginauto; - איך זה עובד

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

אבל קודם, מה אוטומטי למעשה לעשות?

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

"אוטומטי" תופסת שטח זמין

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

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

פו לצוף על ידי לקיחת מקום פנוי

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

שולי ימין או שמאל עם אוטומטי ייקח את כל שטח "זמין" עושה את האלמנט נראה כאילו זה כבר סומק ימינה או שמאלה.

“אוטומטי” מחושב ל- 0px

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

זה יהיה להביס את המטרה הראשונית של שימוש במשהו כמו לצוף. לפיכך אוטומטי יהיה ערך של 0px באותם רכיבים.

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

רוחב הערך אוטומטי יהיה 0px שוליים. רוחב אלמנט של בלוק מכסה בדרך כלל את המכל כאשר הוא נמצא אוטומטי או 100% ומכאן שולי אוטומטי יחושבו 0px במקרה כזה.

מה שקורה למרווחים אנכיים עם הערך אוטומטי?

אוטומטי בשני השוליים העליונים והתחתונים מחושבת תמיד ל -0 px (למעט אלמנטים מוחלטים). מפרט W3C אומר את זה כך:

“אם “שולי העליון” או “שולי תחתית” J “אוטומטי”, הערך המשומש שלהם הוא 0 "

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

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

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

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

מרכזים אלמנטים ממוצבים לחלוטין

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

זה המקום שבו מפרט W3C אחר מגיע:

"אם כל שלוש “שמאלה”, “רוחב”, ו “ימין” הם “אוטומטי”: תחילה הגדר כל “אוטומטי” ערכים עבור “שולי-שמאל” ו “שולי-ימין” כדי ... "

"אם אף אחד מהשלושה לא “אוטומטי”: אם שניהם “שולי-שמאל” ו “שולי-ימין” הם “אוטומטי”, לפתור את המשוואה תחת אילוץ נוסף כי שני השוליים לקבל ערכים שווים "

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

המפרט גם מזכיר משהו דומה בשוליים אנכיים.

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

“אם אף אחד מהם לא “אוטומטי”: אם שניהם “שולי העליון” ו “שולי תחתית” הם “אוטומטי”, לפתור את המשוואה תחת אילוץ נוסף כי שני השוליים לקבל ערכים שווים ... ”

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

עכשיו על ידי שילוב של כל אלה, זה מה שאנחנו”ll

סיכום

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

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