מה שאתה לא יודע על חישוב אחוזים שוליים ב CSS

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

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

השאלה מתמצה בכך: איך אתה חישוב אחוזים שוליים?

השאלה

נניח שהאתר שלך מכיל מכולה div, ובתוך זה, תוכן divYou

עכשיו, בואו לתת את התוכן div שולי עליון:

.תוכן margin-top: 10%;  

אוקיי, אז זה 10% ... אבל 10% מה? זאת השאלה רק 13.8% מהאנשים יכולים לענות בצורה נכונה. זכור: לאנשים האלה יש גישה ל- Google!

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

אז מה אם אני לצמצם את זה בשבילך מאז השאלה במבחן הוא למעשה בחירה מרובה. הנה האפשרויות שלך:

• 10% מגובה תוכן ה- div
• 10% מגובה הדיו של מכולה
• 10% מהרוחב של תוכן ה- div
• 10% רוחב של מכולה div

זכור, רק 13.8% מהאנשים יכולים לבחור את התשובה הנכונה מרשימה זו. זה הרבה יותר גרוע מהמקרה!

תסתכל מקרוב על התשובות; אתה תראה יש באמת רק שני דברים שאתה צריך לדעת:

מכולה או תוכן?

ראשית, הוא את גודל השוליים על פי גודלו של התוכן עצמו, או על גודל הדיו המכיל?

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

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

רוחב או גובה?

שנית, הוא גודל השוליים על פי רוחב או גובה של אלמנט זה?

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

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

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

אל תרגיש רע אם אתה חושב שזה צריך להיות גובה. כמעט 80% מהאנשים שעושים את המבחן מסכימים איתך:

זה הגיוני ... לא, באמת!

עדיין לא מאמין בזה? הנה ציטוט ממפרט ה- W3C CSS:

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

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

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

עקביות אנכית ואנכית

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

שוליים: 10%;

זה מתרחב ל:

margin-top: 10%; שוליים-ימין: 10%; שולי תחתית: 10%; שוליים-שמאל: 10%;

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

הימנעות תלות מעגלית

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

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

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

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

אייס הכיתה

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

בינתיים, אני מחפש את השאלה הקשה ביותר! איזה פרט של CSS אתה חושב שאף אחד לא יודע?

הערת העורך: זה נכתב עבור Hongkiat.com על ידי קווין ינק. קווין כתב על האינטרנט מאז 1999, עם ספרים על PHP, CSS ו- JavaScript על שמו. הוא גם אירח פודקאסטים, דיבר בכנסים, והפיק הדרכה וידאו, הכל על האינטרנט. עכשיו הוא מוביל את צוות הפיתוח ב לשבת מבחן, יישום אינטרנט לביצוע בדיקות מקוונות.

עוד על הונגקיאט:

• עיצוב אתרים: גובה עמודה שווה עם CSS
• 6 טריקים CSS כדי ליישר תוכן אנכית
• מבט לתוך יחידות CSS: פיקסלים, EM ואחוז
• מבט לתוך: CSS3 Box- שינוי גודל

עכשיו קרא: 10 מוסתרים CSS3 מאפיינים אתה צריך לדעת