CSS को आप कितनी अच्छी तरह से जानते हैं? (+ मिनी-परीक्षण)

सीएसएस का सफलतापूर्वक उपयोग करने और इससे निपटने के दर्दनाक प्रयासों के बीच का अंतर अक्सर छोटे विवरणों पर निर्भर करता है। वास्तव में, CSS में बहुत सारी बारीकियाँ हैं। सबसे आम क्षेत्रों में से एक है जहां मैं अक्सर इस तरह के संघर्ष को नोटिस करता हूं स्टाइल लेआउट है। व्यक्तिगत रूप से, मुझे CSS पैटर्न सीखना पसंद है। मैंने देखा कि मैं लेआउट के साथ अधिकांश समस्याओं को हल करने के लिए उनमें से एक छोटी संख्या का उपयोग करता हूं। यह आलेख उन सीएसएस पैटर्न के बारे में है जो मैं लेआउट मुद्दों को दूर करने के लिए उपयोग करता हूं। सीएसएस का उपयोग सीएसएस कार्यप्रणाली की परवाह किए बिना किया जाएगा: यह SMACSS, BEM, या यहां तक ​​कि एक गर्म सीएसएस-इन-जेएस विषय हो, क्योंकि वे सभी सीएसएस गुणों पर ध्यान केंद्रित करते हैं, और वास्तुकला, संगठन या रणनीति पर नहीं।

---

मस्ती के लिए, आइए टेस्ट से शुरू करें।

हम विकसित किए गए प्लेटफ़ॉर्म का उपयोग करेंगे, जिन्हें Questionable.io कहा जाता है , और मैंने इसका उपयोग एक परीक्षण बनाने के लिए किया है, जिसे हम नीचे स्थानांतरित करेंगे। चिंता न करें, कोई भी व्यक्तिगत डेटा एकत्र नहीं किया गया है, परिणाम गुमनाम हैं और यह बिल्कुल मुफ्त है।

परीक्षण का उद्देश्य यह देखना है कि क्या आप पहले लेख को पढ़े बिना विशिष्ट सीएसएस व्यवहार और कुछ समस्याओं को पहचान सकते हैं। मैं परीक्षण करना मुश्किल नहीं था, लेकिन सीएसएस स्टाइल की बारीकियों को काफी जटिल किया जा सकता है। याद रखें, यह परीक्षण केवल मनोरंजन के लिए है। परीक्षण के परिणाम आपकी शीतलता को प्रदर्शित नहीं करते हैं, लेकिन मुझे आशा है कि वे अभी भी उपयोगी होंगे।

परीक्षण में 10 प्रश्न होते हैं और 10 मिनट से अधिक नहीं लेना चाहिए

अनुवादक से:

हैबर पर लेख के अंत में, परीक्षण में बनाए गए अंकों की संख्या के बारे में एक पोल जोड़ा जाता है।

टेस्ट पास करें

नोट: यदि आप समय बर्बाद नहीं करना चाहते हैं, तो यहां सही उत्तरों के साथ प्रश्नों की एक कड़ी है।

क्या आपने परीक्षा पास कर ली? बहुत बढ़िया! आइए एक-एक करके प्रश्नों के माध्यम से चलें ताकि परीक्षण में प्रभावित होने वाले स्टाइल पैटर्न का बेहतर अंदाजा लगाया जा सके।

प्रश्न 1: ब्लॉक मॉडल

ब्लॉक मॉडल का अध्ययन किसी भी फ्रंट डेवलपर की सूची में प्राथमिकता होना चाहिए। शायद लेख " सीएसएस बॉक्स मॉडल " थोड़ा पुराना है, आधुनिक सीएसएस के लिए इसके मूल्य और प्रासंगिकता को कम मत समझो। ब्लॉक मॉडल सीएसएस लेआउट से संबंधित लगभग हर मुद्दे का आधार है।

यह विशेष प्रश्न यह जांचता है कि ब्लॉक मॉडल के सिद्धांतों के आधार पर चौड़ाई का पता कैसे लगाया जाए। एक ब्लॉक की चौड़ाई के माध्यम से एक स्पष्ट चौड़ाई है width: 100px , लेकिन यह पता चलता है कि डिफ़ॉल्ट ब्लॉक मॉडल नियम इस ब्लॉक की "सामग्री" परत के लिए width गुण लागू करते हैं। परिणामी चौड़ाई (पृष्ठ पर ब्लॉक कितना चौड़ा है) सामग्री, गद्दी और सीमा परतों का योग है। इस कारण से, उत्तर 112px है।

 .box { width: 100px; /* Take this */ height: 50px; padding: 5px; /* Plus this x2 for left and right */ border: 1px solid red; /* Plus this x2 for left and right */ background-color: red; /* = 112px of computed width */ } 

यदि आपको ऐसी स्थिति का सामना करना पड़ता है जिसमें इंटरफ़ेस में अंतिम कॉलम या टैब को अगली पंक्ति में ले जाया जाता है, हालांकि आपने सभी width: 20%; लिए निर्दिष्ट किया है width: 20%; और यकीन था कि वे मूल तत्व के 100% में फिट होंगे, शायद यह एक समस्या बन रही थी। 20% की चौड़ाई वाले पांच स्तंभों को 100% में रखा गया है, लेकिन यदि उन्हें अतिरिक्त रूप से पेडिंग और / या बॉर्डर दिया जाता है, तो इससे अंतिम कॉलम के लिए वर्तमान पंक्ति में पर्याप्त स्थान न छोड़कर प्रत्येक की चौड़ाई बढ़ जाएगी।

जब CSS3 पेश किया गया था, तो box-sizing नामक एक नया उपकरण box-sizing । यह हमें नियंत्रित करने की अनुमति देता है कि हम किस ब्लॉक मॉडल की width संपत्ति पर लागू करना चाहते हैं। उदाहरण के लिए, हम box-sizing: border-box को निर्दिष्ट कर सकते हैं box-sizing: border-box । इसका मतलब यह है कि हम चाहते हैं कि कंटेंट लेयर की बजाय बाहरी बॉर्डर लेयर पर कोई भी चौड़ाई नियम लागू हो। परीक्षण से प्रश्न में, यदि box-sizing: border-box संपत्ति लागू की गई थी, तो परिणामस्वरूप ब्लॉक की चौड़ाई 100px थी।

आप में से कुछ के लिए, यह एक प्रसिद्ध तथ्य है, लेकिन फिर भी यह पेशेवरों और शुरुआती दोनों के लिए एक अच्छा अनुस्मारक होगा।

ब्लॉक मॉडल के बारे में कई लेख हैं और इसे पूरे प्रोजेक्ट पर तुरंत लागू करने के लिए रीसेट के रूप में बॉक्स-साइजिंग संपत्ति का उपयोग कैसे करें। बॉक्स साइज़िंग और इनहेरिटिंग बॉक्स-साइज़िंग शायद थोड़ा बेहतर तरीके से सबसे अच्छा-अभ्यास पढ़ने के लिए दो अच्छे सीएसएस-ट्रिक्स लेख हैं।

प्रश्न 2: तत्व सीमाएँ

दूसरे परीक्षण प्रश्न को पहले की निरंतरता के रूप में आंशिक रूप से देखा जा सकता है। याद रखें, यह पढ़ना एक बात है: "ब्लॉक मॉडल में परतें (सामग्री, पैडिंग, बॉर्डर) हैं और ये सभी तत्व की कुल चौड़ाई और ऊँचाई को प्रभावित करते हैं", दूसरी बात यह है कि ब्लॉक मॉडल की समस्याओं को वास्तविक स्थिति में पहचानने में सक्षम होना चाहिए। यह विशेष समस्या उन लोगों में से एक क्लासिक है जो सीएसएस के साथ कुछ समय से काम कर रहे हैं। यह इस तथ्य से अनुसरण करता है कि फ्रेम एक निश्चित अतिरिक्त स्थान पर कब्जा कर लेंगे और आसपास के तत्वों को दूर कर देंगे, क्योंकि वे ब्लॉक मॉडल का हिस्सा हैं। किसी तत्व की स्थिति को बदलते समय फ्रेम जोड़ना, जैसे :hover , इसका मतलब होगा कि ब्लॉक बड़े हो जाएंगे और फिर ब्लॉक करने वाले ब्लॉक नीचे धकेल दिए जाएंगे। यह कष्टप्रद हो सकता है :


परीक्षण प्रश्न में उल्लिखित सभी संभावित समाधानों में से, border: 2px solid transparent जोड़ते हुए border: 2px solid transparent मूल स्थिति के लिए border: 2px solid transparent (मूलक के बिना) border: 2px solid transparent समस्या का एकमात्र संभावित समाधान है। box-sizing इस समस्या को हल नहीं करता है, क्योंकि हम स्पष्ट रूप से ऊंचाई निर्धारित नहीं करते हैं। यदि हमने ऐसा किया, तो फ्रेम तत्व की समग्र ऊंचाई का हिस्सा बन जाएगा और बदलाव नहीं होगा, लेकिन यह हमारा मामला नहीं है।

ऐसे अन्य समाधान हैं जिनका हमने उत्तर विकल्पों में उल्लेख नहीं किया है। उनमें से एक box-shadow प्रॉपर्टी का उपयोग करके या border बजाय outline का उपयोग करते हुए एक छद्म बॉर्डर जोड़ रहा है। उनमें से प्रत्येक पूर्वाग्रह को जन्म नहीं देगा, क्योंकि यह ब्लॉक मॉडल की एक परत नहीं है। यहां एक और सीएसएस-ट्रिक्स लेख है जहां आप ऐसे समाधानों के बारे में अधिक पढ़ सकते हैं।

नोट:
याद रखें कि outline border-radius समर्थन नहीं करती है

प्रश्न 3: पोजिशनिंग - निरपेक्ष बनाम निश्चित

यह समझने के अलावा कि प्रत्येक प्रकार का उपयोग कब करना है और वे विज़ुअल प्रतिनिधित्व में कैसे भिन्न हैं , यह जानना भी बहुत महत्वपूर्ण है कि प्रत्येक स्थिति के तरीके शीर्ष, दाएं, नीचे, या बाएं गुणों का उपयोग करके मूल तत्व के लिए कैसे बाध्य हैं।

सबसे पहले, आइए युक्त ब्लॉक को देखें । एक संक्षिप्त परिभाषा यह है कि युक्त ब्लॉक सबसे अधिक बार प्रश्न में किसी भी तत्व के माता-पिता हैं। हालांकि, पूर्ण और निश्चित रूप से तैनात तत्वों के लिए युक्त ब्लॉक के नियम अलग हैं।

1) परम तत्वों के लिए । युक्त ब्लॉक निकटतम पूर्वज है जिसकी स्थिति static नहीं है। उदाहरण के लिए, जब कोई तत्व पूरी तरह से तैनात होता है और उसमें top , right , bottom या left गुण होते हैं, तो वे किसी भी माता-पिता के सापेक्ष तैनात किए जाएंगे, जिनके पास absolute , relative , fixed या sticky स्थिति होती है।
2) निश्चित तत्वों के लिए । static अलावा किसी भी मूल तत्वों की उपस्थिति के बावजूद, युक्त ब्लॉक व्यूपोर्ट है। इसके अलावा, स्क्रॉल व्यवहार बिल्कुल तैनात तत्वों से अलग है। निश्चित तत्व देखने के क्षेत्र में "निश्चित" रहते हैं, इसलिए नाम।

कई डेवलपर्स सोचते हैं कि पूरी तरह से तैनात तत्व केवल निकटतम पोजिशनिंग तत्व के लिए रिश्तेदार की स्थिति के साथ दिखते हैं position: relative । यह गलत धारणा केवल इसलिए व्यापक हो गई है क्योंकि position: relative position: absolute के साथ सबसे अधिक बार निर्दिष्ट है position: absolute युक्त ब्लॉक बनाने के लिए position: absolute । इसका उपयोग अक्सर इस कारण से किया जाता है कि मूल ब्लॉक की सापेक्ष स्थिति इसे धारा में छोड़ देती है, जिसे अक्सर पसंद किया जाता है। ऐसी स्थितियां हैं जब एक बिल्कुल तैनात तत्व के माता-पिता स्वयं बिल्कुल तैनात हैं। यह पूरी तरह से सामान्य है। यदि सभी माता-पिता स्थिर हैं, तो एक पूरी तरह से तैनात तत्व व्यूपोर्ट से जुड़ा होगा - लेकिन इतना है कि यह व्यूपोर्ट के साथ स्क्रॉल करता है।


ऊपर उल्लिखित नियमों के लिए एक अल्पज्ञात जोड़ है: ऐसी स्थितियों में जहां मूल तत्व में transform संपत्ति है ( दूसरों के बीच ) जिसमें none अलावा एक मूल्य है, यह बिल्कुल और निश्चित रूप से तैनात तत्वों के लिए एक युक्त ब्लॉक बन जाता है। इसकी पुष्टि कोडपेन में देखी जा सकती है, जहां पाठ "नोटिस!" एक निश्चित तत्व है, और माता-पिता के पास परिवर्तनशील संपत्ति है, लेकिन केवल तभी जब माउस कर्सर इसके ऊपर हो (राज्य में :hover )

प्रश्न 4: माता-पिता और बाल तत्वों का मार्जिन कम करें

यह उन सीएसएस छोटी चीजों में से एक है जो बहुत सारी समस्याओं का कारण बन सकती हैं यदि आपको नहीं पता कि यह कैसे काम करता है। एक अवधारणा है जिसे पतन मार्जिन कहा जाता है और कई लोग इसके प्रकट होने से परिचित होते हैं, जिसे निकटवर्ती भाई-बहन का पतन मार्जिन कहा जाता है। हालाँकि, एक और रूप है, जिसे माता-पिता का संक्षिप्त मार्जिन और पहला / अंतिम बच्चा कहा जाता है, जो कम ज्ञात है। निम्नलिखित दोनों मामलों का एक प्रदर्शन है:


प्रत्येक पैराग्राफ टैग में 1em के बराबर एक शीर्ष और निचला मार्जिन होता है, जिसे ब्राउज़र द्वारा स्टाइल किया जाता है। अब तक यह स्थिति का सबसे आसान हिस्सा है। लेकिन पैराग्राफों के बीच अंतर क्यों नहीं है 2em (ऊपर और नीचे का योग)? इसे समीपवर्ती भाई-बहनों का हाशिए का पतन कहा जाता है। मार्जिन इस तरह से ओवरलैप होता है कि दो मार्जिन में से बड़ा अंतर का आकार होगा, इसलिए इस मामले में अंतराल 1em होगा।

हालाँकि, कुछ और ही अजीब हो रहा है। क्या आपने देखा कि पहले पैराग्राफ का शीर्ष मार्जिन उसके और नीले कंटेनर डिव के बीच अंतर पैदा नहीं करता है? ब्रेकिंग के बजाय, यह पैरेंट डिव में मार्जिन एंबेड करता है, जैसे कि डिव में टॉप मार्जिन होता है। इसे माता-पिता और पहले / अंतिम बच्चों के Collapsing मार्जिन कहा जाता है। इस प्रकार का पतन मार्जिन कुछ परिस्थितियों में नहीं होगा यदि निम्नलिखित माता-पिता की विशेषता है:

• शून्य से अधिक ऊपरी / निचला पैडिंग है
  
• एक ऊपरी / निचली सीमा शून्य से अधिक है
  
• एक ब्लॉक प्रारूपण संदर्भ निर्दिष्ट किया जाता है जिसे overflow: hidden का उपयोग करके बनाया जा सकता है overflow: hidden या overflow: auto
  
• प्रदर्शन: प्रवाह-रूट संपत्ति सेट (खराब ब्राउज़र समर्थन)
  

जब मैं लोगों को इस छोटे सीएसएस विस्तार के बारे में समझाता हूं और इसे गद्दी या सीमा के साथ हल करता हूं, तो जवाब लगभग हमेशा होता है: "क्या पैडिंग या सीमा 0 के बराबर है?"। खैर, यह काम नहीं करता है, क्योंकि मूल्य एक सकारात्मक पूर्णांक होना चाहिए।

पिछले उदाहरण में, 1px पैडिंग हमें माता-पिता और बच्चे के हाशिए के पतन को रोकने और उपयोग करने के बीच स्विच करने की अनुमति देता है। पहले / अंतिम पैराग्राफ और माता-पिता के बीच दिखाई देने वाली जगह 1px पैडिंग है, लेकिन अब मार्जिन को कंटेनर के अंदर माना जाता है, क्योंकि पैडिंग परत हाशिये को ढहने से रोकने के लिए अवरोध पैदा करती है।

इस प्रश्न के लिए, मुझे यकीन है कि आप देख सकते हैं कि इस इंटरफ़ेस में क्या समस्या है:


.comment class ( .comment वर्ग के बिना) वाला पहला तत्व हाशिये को ध्वस्त कर देता है। यहां तक ​​कि कोड को देखे बिना, हम देख सकते हैं कि .moderator वर्ग वाले तत्व में एक फ्रेम है, और इस वर्ग के बिना तत्व नहीं है। इस सवाल पर वास्तव में तीन उत्तर दिए गए थे जिन्हें सही माना गया था। उनमें से प्रत्येक, वास्तव में, कोडपेन स्रोत में पहले से ही लागू है, उन्हें अभी टिप्पणी की गई है।

इस प्रकार के पतन के मार्जिन के कारणों में से एक व्यापक रूप से दूसरों के रूप में जाना नहीं जाता है क्योंकि कई परिस्थितियां हैं जिनमें हम गलती से इससे बच सकते हैं। फ्लेक्सबॉक्स और ग्रिड तत्व एक ब्लॉक प्रारूपण संदर्भ बनाते हैं, इसलिए उनका उपयोग करते समय हम इस प्रकार के पतन मार्जिन का सामना नहीं करते हैं। यदि हमारी टिप्पणियों का इंटरफ़ेस एक वास्तविक परियोजना थी, तो संभावना अच्छी है कि चारों ओर अंतरिक्ष छोड़ने के लिए सभी पक्षों पर पैडिंग सेट किए गए थे, और इसके बदले, हमारे लिए मार्जिन का पतन तय किया।

प्रश्न 5: प्रतिशत का क्या?

जब प्रतिशत इकाइयों का उपयोग किया जाता है, तो प्रतिशत युक्त ब्लॉक (आमतौर पर जनक) की चौड़ाई या ऊंचाई पर आधारित होते हैं। जैसा कि हमने पहले कहा था कि transform प्रॉपर्टी वाला एक तत्व एक ब्लॉक हो जाएगा, इसलिए जब तत्व ट्रांसफ़ॉर्म का उपयोग करता है, तो प्रतिशत में इकाइयां (केवल transform ) तत्व के स्वयं के आकार पर होती हैं, न कि मूल आकार पर।

नीचे दिए गए उदाहरण में, हम देख सकते हैं कि 50% संदर्भ के आधार पर दो अलग-अलग मूल्यों पर हैं। पहले रेड ब्लॉक में margin-left: 50% प्रॉपर्टी है margin-left: 50% , और दूसरा रेड ब्लॉक transform: translateX(50%) का उपयोग करता transform: translateX(50%) ।

प्रश्न 6: ब्लॉक मॉडल फिर से हमला करता है ...

केवल आपने सोचा था कि हम ब्लॉक मॉडल के बारे में बात कर रहे थे ...


समस्या इस तथ्य के कारण है कि हम width: 100% उपयोग करते हैं width: 100% फुटर के लिए width: 100% और उसी समय पैडिंग जोड़ें। कंटेनर की चौड़ाई 500px है, जिसका अर्थ है कि इस आकार में पैडिंग्स जोड़ने से पहले पाद सामग्री की परत (100% होना) भी 500px है।

समस्या दो सामान्य तकनीकों में से एक द्वारा तय की जा सकती है:

1. सीधे उल्लेखित या पहले बताए गए रीसेट के माध्यम से पाद लेख के लिए बॉक्स-आकार की संपत्ति का उपयोग करें
   
2. तत्व से width गुण निकालें और इसके बजाय left: 0 और right: 0 गुण का उपयोग करें। यह एक ही समय में left और right गुणों का उपयोग करने का एक अच्छा उदाहरण है। यह दृष्टिकोण ब्लॉक मॉडल की समस्याओं से बचा जाता है, क्योंकि width संपत्ति अपने डिफ़ॉल्ट मूल्य auto का उपयोग पैडिंग और बॉर्डर के बीच किसी भी उपलब्ध स्थान को भरने के लिए करेगी जब left: 0 और left: 0 और right:0 ।
   

नोट: एक विकल्प पाद से गद्दी को हटाने का था। तकनीकी रूप से, यह समस्या को ठीक करेगा, क्योंकि कंटेनर की चौड़ाई से परे विस्तार करने के लिए सामग्री परत 100% होगी और पैडिंग या सीमा नहीं होगी। लेकिन मुझे लगता है कि यह समाधान गलत दृष्टिकोण है, क्योंकि ब्लॉक मॉडल की समस्याओं के अनुकूल होने के लिए हमें अपना इंटरफ़ेस बदलने की आवश्यकता नहीं है, जो इसके बिना आसानी से तय हो जाते हैं।

मेरे लिए वास्तविकता यह है कि मेरे पास हमेशा box-sizing: border-box संपत्ति मेरे सामान्य शैली रीसेट के हिस्से के रूप में box-sizing: border-box । यदि आप भी ऐसा ही करते हैं, तो आप सबसे अधिक इस समस्या का सामना करते हैं। लेकिन मैं अभी भी left:0 और right:0 गुण सेट करने के साथ तकनीक को पसंद करता हूं, क्योंकि, जैसा कि समय दिखाता है, यह चौड़ाई के कारण उत्पन्न होने वाले ब्लॉक मॉडल की समस्याओं को हल करने की तुलना में अधिक विश्वसनीय (किसी भी मामले में, मेरे अनुभव को देखते हुए) है। 100%।

प्रश्न 7: निरपेक्ष और निश्चित तत्वों को केंद्रित करना

अब हम वास्तव में उपरोक्त सभी सामग्रियों को संयोजित करना शुरू कर रहे हैं, पूर्ण और निश्चित तत्वों के केंद्र के साथ:


चूंकि हमने इस परीक्षण प्रश्न की अधिकांश सामग्री को पहले ही कवर कर लिया है, इसलिए मैं केवल संकेत देता हूं कि पुरानी-स्कूल पद्धति का उपयोग नकारात्मक मार्जिन के माध्यम से किया जा सकता है, या नई रूपांतरित संपत्ति का उपयोग करके किया जा सकता है। मैं आपके ध्यान में एक उत्कृष्ट सीएसएस-ट्रिक्स तत्व केंद्रित गाइड भी लाता हूं।

नोट : कुछ समय पहले यह तर्क दिया गया था कि यदि हम ब्लॉक की चौड़ाई और ऊंचाई जानते हैं, तो हमें नकारात्मक मार्जिन का उपयोग करना चाहिए, क्योंकि वे नए परिवर्तन संपत्ति की तुलना में अधिक मजबूती से काम करते हैं। फिलहाल, परिवर्तन काफी महत्वपूर्ण है और मैं लगभग हमेशा इस संपत्ति का उपयोग करता हूं, जब तक कि मुझे ब्लॉक को एक में परिवर्तित करने से बचने की आवश्यकता नहीं है।

प्रश्न 8: एक सामान्य प्रवाह में तत्वों को केंद्रित करना

फ्लेक्सबॉक्स ने हमें जटिल लेआउट समस्याओं को हल करने के लिए कई अद्भुत उपकरण लाए। इसके जारी होने से पहले, यह बताया गया था कि ऊर्ध्वाधर केंद्रीकरण सबसे जटिल विशेषताओं में से एक थी जो सीएसएस में लागू की गई थी। फ्लेक्सबॉक्स के आगमन के साथ, ऊर्ध्वाधर केंद्र नियमित हो गया है:

 .parent { display: flex; } .child { margin: auto; } 

https://codepen.io/bradwestfall/pen/GPNmbM
नोट : ध्यान दें कि फ्लेक्स तत्वों के लिए, मार्जिन: ऑटो को शीर्ष और नीचे, दाईं और बाईं ओर लागू किया जाता है ताकि तत्व को लंबवत और क्षैतिज रूप से केंद्रित किया जा सके। पहले, ऊर्ध्वाधर केंद्रित ब्लॉक तत्वों के लिए काम नहीं करता था, इसलिए margin: 0 auto; काफी सामान्य है margin: 0 auto;

प्रश्न 9: विभिन्न इकाइयों के साथ गणना

कैल्क () फ़ंक्शन का उपयोग करना महान है जब आपको माप की दो इकाइयों के साथ काम करने की आवश्यकता होती है जिसे हम अपने दम पर नहीं जोड़ सकते हैं या जब हमें अंशों को समझने में आसान बनाने की आवश्यकता होती है। यह परीक्षण प्रश्न हमें यह पता लगाने के लिए प्रदान करता है कि अभिव्यक्ति calc(100% + 1em) का परिणाम कैसा दिखेगा, इस तथ्य से शुरू होता है कि div तत्व की चौड़ाई 100px है। यह थोड़ा भ्रामक हो सकता है, क्योंकि वास्तव में, यह कोई फर्क नहीं पड़ता कि div तत्व की चौड़ाई 100px है। प्रतिशत हमेशा माता-पिता की चौड़ाई से शुरू होते हैं, इसलिए सही उत्तर था: "युक्त (मूल) ब्लॉक का 100% प्लस 1em"।

ऐसी कई स्थितियां हैं जिनमें मैं नियमित रूप से calc() उपयोग करता हूं। सबसे पहले, जब भी मैं 100% से कुछ स्थानांतरित करना चाहता हूं, लेकिन अतिरिक्त स्थान की एक निश्चित राशि भी जोड़ें। ड्रॉपडाउन मेनू इसका एक अच्छा उदाहरण हो सकता है:


यहां की ख़ासियत यह है कि हम एक ड्रॉप-डाउन मेनू बनाना चाहते हैं जिसका उपयोग विभिन्न आकारों के कॉलिंग तत्वों (इस मामले में, दो अलग-अलग आकार के बटन) के साथ किया जा सकता है। हम नहीं जानते कि इस मेनू को कॉल करने वाले तत्व की ऊंचाई क्या होगी, लेकिन हम जानते हैं कि top: 100% कॉलिंग बटन के निचले किनारे पर ड्रॉप-डाउन मेनू के शीर्ष किनारे को जगह देगा। यदि प्रत्येक मेनू को संबंधित बटन के निचले किनारे, प्लस 0.5em में होना चाहिए, तो इसे calc(100% + 0.5em) साथ प्राप्त किया जा सकता है। बेशक, हम top: 110% उपयोग भी कर सकते हैं top: 110% , लेकिन ये अतिरिक्त 10% कॉलिंग बटन और कंटेनर की ऊंचाई पर निर्भर करेगा।

प्रश्न 10: नकारात्मक मार्जिन

भाई-बहनों को पीछे हटाने वाले सकारात्मक मार्जिन के विपरीत, नकारात्मक मार्जिन उन्हें भाई-बहनों को शिफ्ट किए बिना एक-दूसरे के करीब लाते हैं । यह अंतिम परीक्षण प्रश्न दो समाधान प्रदान करता है, जिसमें दोनों तकनीकी रूप से हमारे बटन समूह में दोहरी सीमा को समाप्त करते हैं, लेकिन मैं नकारात्मक मार्जिन तकनीक को दृढ़ता से पसंद करता हूं, क्योंकि फ़्रेम को हटाने से माउसओवर प्रभाव जैसी कुछ तकनीकों को निष्पादित करना अधिक कठिन हो जाएगा।


परिणामी प्रभाव एक "सामान्य सीमा" है जो बटनों के बीच प्रदर्शित होता है। वास्तव में, बटन में एक सामान्य सीमा नहीं हो सकती है, इसलिए हमें एक नकारात्मक मार्जिन तकनीक का उपयोग करने की आवश्यकता है ताकि एक फ्रेम दूसरे को ओवरलैप कर सके। फिर मैं माउस होवर की स्थिति के आधार पर, किस फ्रेम को दूसरे के ऊपर फिट करना चाहता हूं, इसके लिए z-index का उपयोग करता हूं। ध्यान दें कि z-index पूर्ण स्थिति का उपयोग किए बिना भी यहां उपयोगी है, लेकिन आपको position: relative निर्धारित करना था position: relative । अगर मैंने दूसरे बटन के बाएं फ्रेम को हटाने की तकनीक का उपयोग किया, तो यह प्रभाव लागू करने में अधिक कठिन होगा।

यह सब समझ में आता है।

मैं आपको एक और नवीनतम डेमो दिखाना चाहता हूं जिसमें बहुत सारे ट्रिक्स का उपयोग किया गया है जिसकी हमने पहले चर्चा की थी। कार्य टाइल बनाने के लिए है जो कंटेनर के बाएं और दाएं किनारों तक फैलता है, इंडेंटेशन को ध्यान में रखता है। टाइलों से मेरा मतलब है कि उन ब्लॉकों की एक सूची रखने की क्षमता है जो चौड़ाई में पर्याप्त जगह नहीं होने पर अगली पंक्ति में लपेटते हैं। परिणाम देखने के लिए टाइल्स पर होवर करें:


इस कार्य को करने में एक बाधा है आक्रोश। पैडिंग के बिना, कंटेनर के बाएं और दाएं किनारों से सटे टाइलों को प्राप्त करना आसान होगा। समस्या यह है कि मार्जिन का उपयोग करके इंडेंट बनाए जाएंगे, और जब हम टाइल के सभी किनारों पर मार्जिन जोड़ते हैं, तो हम दो समस्याएं पैदा करते हैं:

1. मार्जिन के साथ 33.33% की चौड़ाई के साथ तीन टाइलों की उपस्थिति एक पंक्ति में फिट नहीं हो पाएगी। यद्यपि box-sizing हमें .tile तत्व पर पैडिंग और बॉर्डर रखने की अनुमति देता है और 33.33% में फिट होता है, इससे हमें मार्जिन के मामले में मदद नहीं मिलेगी - जिसका अर्थ है कि तीन टाइलों की गणना की गई चौड़ाई 100% से अधिक होगी, जो अंतिम टाइल को अगले पर जाने के लिए मजबूर करेगी। लाइन।
   
2. बाएं और दाएं टाइलें अब कंटेनर के किनारे के खिलाफ झूठ नहीं बोलेंगी।
   

पहली समस्या के साथ हल किया जा सकता है calc((100% / 3) - 1em)। जिसका अर्थ है कि प्रत्येक टाइल के बाएं और दाएं मार्जिन का 33.33% घटा। आसन्न बहन तत्वों का पतन यहां नहीं होगा, क्योंकि यह केवल ऊपरी और निचले मार्जिन पर संभव है। नतीजतन, दो टाइलों के बीच की क्षैतिज दूरी दो मार्जिन (1em) का योग है। इस मामले में, पतन ऊपरी और निचले मार्जिन पर भी लागू नहीं होता है, क्योंकि पहली और आखिरी टाइल तकनीकी रूप से आसन्न नहीं हैं, भले ही नेत्रहीन एक दूसरे के नीचे हो।

साथ लेकरcalc()तीन टाइलें एक पंक्ति में फिट हो सकती हैं, लेकिन वे अभी भी कंटेनर के किनारों को नहीं छूते हैं। ऐसा करने के लिए, हम प्रत्येक टाइल के बाएं और दाएं मार्जिन के बराबर आकार में नकारात्मक मार्जिन का उपयोग कर सकते हैं। उदाहरण में हरे रंग की बिंदीदार रेखा एक कंटेनर है जहां हम आसपास की सामग्री के किनारे के अनुरूप टाइल खींचने के लिए नकारात्मक मार्जिन लागू करते हैं। हम देख सकते हैं कि वे मूल तत्व के पैडिंग क्षेत्र में कैसे फिट होते हैं। यह सामान्य है क्योंकि नकारात्मक मार्जिन पड़ोसी तत्वों के आसपास नहीं फटकारते हैं।

नतीजतन, हमें ऐसी टाइलें मिलती हैं जिनमें पर्याप्त स्थान होते हैं जो किनारे से किनारे तक विस्तारित होते हैं ताकि वे टाइल के बाहर आसन्न पैराग्राफ टैग के साथ संरेखित हों।

टाइल बनाने के कई तरीके हैं (और आमतौर पर उनके फायदे और नुकसान हैं)। उदाहरण के लिए, एक बहुत ही सुंदर सीएसएस ग्रिड समाधान है जिसके बारे में हेडन पिकरिंग ने बात की। यह समाधान एक तकनीक का उपयोग करके कार्यान्वित किया जाता है जो कंटेनरों के लिए अनुरोधों का अनुकरण करता है (लेकिन ग्रिड जादू का उपयोग करके)। अंततः, ग्रिड का उपयोग करने वाला उसका समाधान फ्लेक्सबॉक्स से बेहतर है, जिसका मैंने प्रदर्शन किया लेकिन इसमें ब्राउज़र का बदतर समर्थन है।

सारांश

शुरुआत में, मैंने कहा कि मैं समस्याओं को सुलझाने में पैटर्न की तलाश में था। यह लेख ऊपर प्रदर्शित परिदृश्यों के बारे में इतना नहीं है; यह उन उपकरणों के एक सेट के बारे में अधिक है जिनका उपयोग इन और कई अन्य प्रकार की समस्याओं को हल करने के लिए किया जा सकता है जो हम सभी का सामना कर सकते हैं। मुझे उम्मीद है कि ये उपकरण आपकी मदद करेंगे।

वैसे, कई उत्कृष्ट संसाधन हैं जो ब्लॉक मॉडल के विषय की सावधानीपूर्वक जांच करते हैं। सबसे पहले, राहेल एंड्रयू और जेन सीमन्स के लेख, जो निश्चित रूप से पढ़ने लायक हैं।

• बॉक्स संरेखण धोखाशीट दृश्य तत्वों के साथ एक महान सामग्री है जो विभिन्न गुणों पर जोर देती है जो प्रभावित करती है कि कैसे तत्व या तो स्वयं या अन्य तत्वों के सापेक्ष संरेखित करते हैं।
  
• Jen Simmons Labs — , .