CSS3 के बॉक्स-आकार में एक लुक
बहुत समय पहले नहीं, जब हम ए डिब्बा एक वेब पेज में, चलो एक के साथ कहते हैं div, हम निर्दिष्ट करते हैं 100px चौड़ाई और ऊंचाई दोनों के लिए, उसके बाद गद्दी के लिये 10px और के बारे में सीमाओं 10px भी.
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; गद्दी: 10 पीएक्स; बॉर्डर: 10px ठोस #eaea;
ब्राउज़र बॉक्स के आकार को 140px तक विस्तारित करेंगे, जहाँ यह राशि कुल चौड़ाई / ऊँचाई के 140px के जोड़ से बनी है गद्दी और यह सीमाओं निम्नलिखित नुसार; 100px [चौड़ाई / ऊँचाई] + (2 x 10px [गद्दी]) + (2 x 10px [सीमा]).
हालांकि, कभी-कभी यह परिणाम वह नहीं होता है जिसकी हम अपेक्षा करते हैं। कभी-कभी, हमें हमेशा बॉक्स की आवश्यकता होती है 100px पेडिंग या बॉर्डर जोड़े जाने की परवाह किए बिना.
वेब पेज लेआउट बनाते समय ऐसी आवर्ती समस्या को दूर करने के लिए, हम CSS3 का उपयोग कर सकते हैं बॉक्स आकार कैसे नियंत्रित करने के लिए संपत्ति सीएसएस बॉक्स मॉडल ब्राउज़रों में काम करना चाहिए.
बॉक्स-आकार का उपयोग करना
बॉक्स आकार संपत्ति के दो मूल्य विकल्प हैं, पहला सामग्री बॉक्स; डिफ़ॉल्ट मान जो इस मूल्य का उपयोग करते समय बॉक्स मॉडल का व्यवहार करेगा जैसा कि हमने ऊपर वर्णित किया है.
और दूसरा है सीमा-बॉक्स, जहां बॉक्स के आकार की गणना की जाएगी निर्दिष्ट सामग्री के आकार को घटाकर पैडिंग और सीमाओं के साथ जोड़ा गया.
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; गद्दी: 10 पीएक्स; बॉर्डर: 10px ठोस #eaea; box-sizing: बॉर्डर-बॉक्स; -मोज़-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स; / * फ़ायरफ़ॉक्स 1-3 * / -webkit-box-sizing: बॉर्डर-बॉक्स; /* सफारी */
उदाहरण के लिए, जब हमारे पास एक बॉक्स होगा जैसा हमने ऊपर वर्णित किया है (गद्दी और सीमाओं के लिए 10 पिक्सेल के साथ 100px वर्ग), तो सामग्री का आकार घट जाएगा 60px, और बॉक्स का कुल आकार रहता है 100px, जहां घटाव के समीकरण को निम्नानुसार वर्णित किया जा सकता है; 100px [चौड़ाई / ऊंचाई] - ((2 x 10px [गद्दी]) + (2 x 10px [सीमा])).
- डेमो
- स्रोत डाउनलोड करें
ब्राउज़र का समर्थन
बॉक्स आकार संपत्ति है सभी ब्राउज़रों में समर्थित है; फ़ायरफ़ॉक्स 3.6+, सफारी 3, ओपेरा 8.5+ और इंटरनेट एक्सप्लोरर 8 और इसके बाद के संस्करण.
इसलिए, यदि आप जानते हैं कि आपके अधिकांश आगंतुक 8 से नीचे के इंटरनेट एक्सप्लोरर संस्करणों का उपयोग नहीं कर रहे हैं, तो आप इस उपयोगी अनुशंसा का उपयोग कर सकते हैं (पॉल के लिए धन्यवाद).
* बॉक्स-आकार: बॉर्डर-बॉक्स; -मोज़-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स; / * फ़ायरफ़ॉक्स 1-3 * / -webkit-box-sizing: बॉर्डर-बॉक्स; /* सफारी */
ऊपर स्निपेट लागू होगा बॉक्स आकार आपके वेब पेज पर सभी तत्वों के लिए संपत्ति.
उदाहरण
इस खंड में, हम आपको एक वास्तविक जीवन का उदाहरण दिखाएंगे कि हम इसका उपयोग कैसे कर सकते हैं बॉक्स आकार संपत्ति। हम नीचे HTML मार्कअप के आधार पर एक साधारण नेविगेशन बनाएंगे, जिसमें पांच लिंक मेनू होंगे.
फिर, हम कुछ सजावटी शैलियों को जोड़ेंगे; जैसे, नेविगेशन सेट करें के लिए चौड़ाई तय करें 500px तथा लिंक की चौड़ाई प्रत्येक 100px के लिए, फिर सूची आइटम को इनलाइन करें, और प्रत्येक लिंक मेनू के लिए अलग-अलग पृष्ठभूमि दें, ताकि आप उनके बीच अंतर देख सकें.
नौसेना चौड़ाई: 500 पीएक्स; मार्जिन: 50 पीएक्स ऑटो 0; ऊंचाई: 50 पीएक्स; नौसेना उल गद्दी: 0; मार्जिन: 0; nav li float: left; नेवी a डिस्प्ले: इनलाइन-ब्लॉक; चौड़ाई: 100px; ऊंचाई: 100%; पृष्ठभूमि-रंग: #ccc; रंग: # 555; पाठ-सजावट: कोई नहीं; font-family: Arial, sans-serif; फ़ॉन्ट-आकार: 12pt; लाइन-ऊँचाई: 300%; पाठ-संरेखण: केंद्र; नेवी a डिस्प्ले: इनलाइन-ब्लॉक; चौड़ाई: 100px; ऊंचाई: 100%; रंग: # 555; पाठ-सजावट: कोई नहीं; font-family: Arial, sans-serif; nav li: nth-child (1) a background-color: # E9E9E9; सीमा-वाम: 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; सीमा-दाएं: 0;
इस बिंदु पर, हमारा नेविगेशन सामान्य दिखता है.
हालाँकि, समस्या तब आएगी जब हम लिंक मेनू में बाएँ या दाएँ बॉर्डर जोड़ते हैं.
एक सीमा-वाम: 1px ठोस #aaa; बॉर्डर-राइट: 1px सॉलिड # f3f3f3;
लिंक की चौड़ाई नहीं रह जाने के कारण मेनू नीचे की ओर बह जाएगा 100px. यह अभी है 102px, नेविगेशन की कुल चौड़ाई के कारण 10px अब हम ऊपर निर्दिष्ट कर चुके हैं (500px).
इस समस्या को दूर करने के लिए, हमें इसे लागू करने की आवश्यकता है बॉक्स आकार संपत्ति, इस प्रकार है:
एक सीमा-वाम: 1px ठोस #aaa; बॉर्डर-राइट: 1px सॉलिड # f3f3f3; box-sizing: बॉर्डर-बॉक्स; -मोज़-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स; -webkit-box-sizing: बॉर्डर-बॉक्स;
- डेमो
- स्रोत डाउनलोड करें
आगे की पढाई
और अंत में, यदि आप साहसिक प्रकार के हैं, और इस विषय में गहराई से खुदाई करना चाहते हैं, तो हमने कुछ चुनिंदा संदर्भों को एक साथ रखा है:
- सीएसएस बॉक्स मॉडल - टेक रिपब्लिक को समझना
- फ़ायरफ़ॉक्स में बॉक्स-साइज़िंग बग - BugZilla
- बॉक्स-नौकरशाही का आकार घटाने FTW - पॉल आयरिश
