מבט לתוך CSS3 Box- שינוי גודל
לא כל כך מזמן, כאשר אנו יוצרים קופסא בדף אינטרנט, נניח עם div, אנו מציינים 100px הן רוחב והן גובה, ואחריו ריפוד ל 10px ואת גבולות של בערך 10px גם כן.
div width: 100px; גובה: 100px; ריפוד: 10px; border: 10px solid #eaeaea;
הדפדפנים ירחיבו את גודל התיבה ל -140 פיקסלים, כאשר סכום זה 140px מכלל רוחב / גובה מורכב של תוספת של ריפוד וה גבולות כדלהלן; 100px [width / height] + (2 x 10px [padding]) + (2 x 10px [border]).
עם זאת, לפעמים תוצאה זו היא לא מה שאנחנו מצפים שזה יהיה. לפעמים, אנחנו צריכים את התיבה כדי להיות תמיד 100px ללא קשר לריפוד או לגבולות שנוספו.
כדי להתגבר על בעיה חוזרת כזו בעת יצירת פריסת דף אינטרנט, אנו יכולים להשתמש ב- CSS3 גודל תיבת רכוש כדי לשלוט איך מודל תיבת CSS צריך לעבוד בדפדפנים.
שימוש בתיבת גודל
ה גודל תיבת רכוש יש שתי אפשרויות ערך, הראשון תיבת תוכן; שהוא ערך ברירת המחדל, כאשר משתמשים בערך זה, מודל הקופסא יתנהג כפי שתיארנו לעיל.
והשני הוא גבול הגבול, שבו יחושב גודל התיבה על ידי מחיקת גודל התוכן שצוין עם הריפוד ואת הגבולות הוסיף.
div width: 100px; גובה: 100px; ריפוד: 10px; border: 10px solid #eaeaea; box-sizing: border-box; -Moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
לדוגמה, כאשר יש לנו תיבה כמו מה שתיארנו לעיל (100px מרובע עם 10 פיקסלים עבור הריפוד ואת הגבולות), גודל התוכן יקטן ל 60px, ואת הגודל הכולל של תיבת נשאר 100px, שבו ניתן לתאר את משוואת החיסור כך: 100px [width / height] - ((2 x 10px [ריפוד]) + (2 x 10px [border])).
- הדגמה
- הורד מקור
תמיכה בדפדפן
ה גודל תיבת רכוש הוא נתמך בכל הדפדפנים; Firefox 3.6+, Safari 3, Opera 8.5+ ו- Internet Explorer 8 ומעלה.
אז, אם אתה יודע שרוב המבקרים שלך לא יהיה באמצעות גירסאות Internet Explorer מתחת 8, אתה יכול להשתמש בהמלצה זו שימושית (תודה פול אירי).
* box-sizing: border-box; -Moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
קטע הקוד לעיל יחול את הקטע גודל תיבת רכוש את כל האלמנטים בדף האינטרנט שלך.
דוגמא
בפרק זה, נציג לך דוגמה בחיים האמיתיים על איך אנחנו יכולים לנצל את זה גודל תיבת נכס. אנו ניצור ניווט פשוט, המבוסס על סימון HTML למטה, עם חמישה תפריט הקישור בו.
לאחר מכן, נוסיף כמה סגנונות דקורטיביים; כגון, להגדיר את הניווט רוחב תיקון עבור 500px ו רוחב הקישור של 100px כל אחד, ולאחר מכן לרשום את פריט הרשימה, ולתת רקע שונה עבור כל תפריט קישור, כך שתוכל לראות את ההבדל ביניהם.
nav width: 500px; שוליים: 50px אוטומטי 0; גובה: 50px; nav ul ריפוד: 0; שוליים: 0; nav li float: left; ניווט ב display: inline-block; רוחב: 100px; גובה: 100%; צבע רקע: #ccc; צבע: # 555; text-decoration: none; משפחת גופן: Arial, sans-serif; font-size: 12pt; גובה גובה: 300%; text-align: center; ניווט ב display: inline-block; רוחב: 100px; גובה: 100%; צבע: # 555; text-decoration: none; משפחת גופן: Arial, sans-serif; nav li: nth-child (1) a background-color: # E9E9E9; border-left: 0; nav li: nth-child (2) a background-color: # E4E4E4; nav li: nth-child (3) a background-color: #DFDFDF; nav li: nth-child (4) a background-color: # D9D9D9; nav li: nth-child (5) a background-color: # D4D4D4; border-right: 0;
בשלב זה, הניווט שלנו פשוט נראה רגיל.
עם זאת, הבעיה תבוא כאשר נוסיף גבולות שמאלה או ימינה לתפריט הקישור.
ניווט border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3;
התפריט יהיה לגלוש לתחתית, כמו רוחב הקישור כבר לא 100px. זה עכשיו 102px, שגורם לרוחב הכולל של הניווט להיות 10px זמן רב יותר שציינו לעיל (500px).
כדי להתגבר על בעיה זו, אנחנו צריכים ליישם את גודל תיבת רכוש, כדלקמן:
ניווט border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3; box-sizing: border-box; -Moz-box-sizing: border-box; -webkit-box-sizing: border-box;
- הדגמה
- הורד מקור
לקריאה נוספת
ולבסוף, אם אתה סוג הרפתקני, ואתה רוצה לחפור עמוק יותר לתוך הנושא הזה, יש לנו להרכיב כמה הפניות שנבחרו בשבילך:
- הבנת דגם Box Box - הרפובליקה הטכנולוגית
- תיבת בגודל שינוי גודל ב- Firefox - BugZilla
- תיבת גודל FTW - פול אירי
