इस लेख में, आप सीखेंगे कि सीएसएस स्थिति का उपयोग कैसे करें: सापेक्ष और स्थिति: पर्याप्त मात्रा में डेमो और शिक्षण सहायता के माध्यम से।
सीएसएस |_+_| कभी-कभी इसे एक उन्नत विषय माना जाता है क्योंकि यह कुछ अप्रत्याशित चीजें कर सकता है। ठीक है, विशेषज्ञों को अपनी सीएसएस क्षमता में उत्कृष्टता हासिल करने से डरने न दें! एक बार जब आप कुछ अंतर्निहित विचारों से लैस हो जाते हैं तो यह एक बहुत ही सुलभ विषय होता है।
रेंडर फ्लो
सापेक्ष/पूर्ण स्थिति को समझने के लिए एक महत्वपूर्ण अवधारणा प्रवाह प्रस्तुत करना है।
यूआरएल roku.com/link
सामान्य विचार यह है कि HTML तत्व सभी कुछ जगह लेते हैं। आपके ब्राउज़र का रेंडरिंग इंजन हमेशा सब कुछ एक ग्रिड की तरह प्रस्तुत करता है, जो ऊपरी-बाएँ कोने से शुरू होता है और क्रमिक रूप से नीचे-दाएँ की ओर तब तक चलता रहता है जब तक कि यह आपकी सभी HTML सामग्री को पूरा नहीं कर लेता।
यदि आपके पास कभी धीमा इंटरनेट कनेक्शन है, और वेबपेज पर बड़ी सामग्री के रूप में देखा गया है तो सब कुछ सही और नीचे की ओर धकेल दिया जाएगा, जो अनिवार्य रूप से कार्रवाई में प्रवाह प्रदान करता है।
आप CSS |_+_| का उपयोग करके इस डिफ़ॉल्ट व्यवहार को बदल सकते हैं।
सीएसएस स्थिति
सीएसएस |_+_| कभी-कभी इसे एक उन्नत कौशल माना जाता है क्योंकि यह उतना सहज नहीं है जितना |_+_| या |_+_|, आदि, क्योंकि यह ब्राउज़र के प्राकृतिक रेंडर प्रवाह को बदल देता है।
CSS के लिए ये संभावित मान हैं |_+_|:
positionआज हम केवल |_+_| . देखने जा रहे हैं और |_+_|चूंकि वे शायद सबसे बहुमुखी हैं जो एक बार जब आप उनके साथ आत्मविश्वास महसूस करेंगे तो आपको बहुत लाभ मिलेगा।
पायथन में शतरंज कार्यक्रम
सापेक्ष स्थिति
जब आप एक HTML तत्व बनाते हैं |_+_|, तो यह लेआउट के प्रवाह में बना रहेगा लेकिन आप इसे इधर-उधर कर सकते हैं!
positionसाथ में |_+_| आप आमतौर पर |_+_|, |_+_|, |_+_|, या |_+_| को परिभाषित करना चाहेंगे ऑफसेट।
आप सापेक्ष स्थिति के बारे में सोच सकते हैं: जहां यह शुरू में स्थित था, उसके सापेक्ष। इस मामले में, हरा वर्ग अब है |_+_|, और |_+_| जहां यह शुरू में होने वाला था।
यह भी ध्यान देने योग्य है कि इसकी चौड़ाई और ऊंचाई वर्गाकार ग्रिड में संरक्षित है। इसका मतलब है कि इसे अभी भी लेआउट के प्रवाह में माना जाता है …
निरपेक्ष स्थिति
HTML तत्वों को इधर-उधर ले जाने के लिए निरपेक्ष स्थिति एक बहुत ही शक्तिशाली CSS नियम है। कभी-कभी अप्रत्याशित परिणाम देते हैं:
एटी मेल आईफोन पर काम नहीं कर रहा है
positionनारंगी वर्ग वास्तव में इन 25 वर्गों (ग्रिड के बीच में एक) में से 13 वां वर्ग है, लेकिन ऐसा लगता है कि यह अंतिम वर्ग है! अजीब। उपयोग |_+_|तत्वों को प्रवाह से बाहर ले जाता है जिससे इसका ग्रिड स्थान ढह जाता है।
हाँ, लेकिन यह सब वहाँ क्यों है ?!
मूल निर्देशांक
नारंगी वर्ग को 0x, 0y निर्देशांक (जैसे: ऊपरी-बाएँ कोने) पर रखा जाता है। ब्राउज़र प्रतिपादन हमेशा ऊपरी-बाएँ कोने पर कैसे शुरू होता है, |_+_| तत्व इसका उपयोग अपने प्रतिपादन मूल के रूप में भी करते हैं। आप उपयोग कर सकते हैं |_+_|/|_+_|/|_+_|/|_+_| गुण इसे वहां से ऑफसेट करने के लिए।
लेकिन, आप इसे अलग-अलग मूल निर्देशांक भी दे सकते हैं…
font-sizeउपरोक्त उदाहरण में, मूल तत्व (|_+_|) में |_+_| . है नियम जो नारंगी वर्ग को इसके प्रतिपादन मूल के रूप में लेने का कारण बनता है।
पायथन छवि का आकार प्राप्त करें
मैं
बहुत अजीब है अगर आपने इसे पहले नहीं देखा है। लगभग ६ वर्षों तक CSS का उपयोग करने के बाद २ साल पहले तक मैंने इसे सीखा भी नहीं था!
हालांकि यह सहज व्यवहार नहीं लग सकता है, यह वास्तव में जानबूझकर है! इसके लिए अनुमति देने से आपको इस पर बहुत नियंत्रण मिलता है कि आप HTML तत्वों को कहाँ/कैसे व्यवस्थित करते हैं… जैसा कि हम नीचे डेमो में देखेंगे।
डेमो समय!
यहाँ |_+_| . का उपयोग करने के कुछ उदाहरण दिए गए हैं और |_+_|कुछ दिलचस्प डिजाइन बनाने के लिए।
एक अद्भुत दुनिया में एलिस
यह एलिस इन वंडरलैंड का एक अंश है जहां कुछ अक्षरों को कुछ |_+_| नियम।
marginइनलाइन तत्व इस डेमो में ले जाया जाता है, लेकिन आप तत्वों को ब्लॉक करने के लिए भी ऐसा कर सकते हैं! निश्चिंत रहें: अन्य HTML तत्व अपना स्थान नहीं लेंगे, और इस प्रकार इस प्रभाव को बर्बाद कर देंगे।
अतिव्यापी HTML तत्व
जैसा कि हमने पहले कवर किया था, यदि आप अपेक्षाकृत स्थित तत्वों के अंदर पूरी तरह से स्थित तत्वों को रखते हैं तो आप उन्हें HTML तत्वों की परतों में प्रभावी ढंग से समूहित करने में सक्षम होते हैं।
प्रतिक्रिया-बूटस्ट्रैप स्लाइडर
माता-पिता के साथ इन दोनों बिल्कुल स्थित छवियों को लपेटना |_+_| यह अपेक्षाकृत स्थित है, हमें अपने पसंदीदा मगरमच्छ का यह शानदार चित्र मिलता है।
एक बार जब आप |_+_| . का उपयोग करके सहज हो जाएं और |_+_|एक साथ, आप सख्ती से 2D मानसिकता में सोचने के बजाय HTML तत्वों की रसीला परतें बनाने के बारे में सोचना शुरू कर देंगे। यह कुछ ऐसा है जो आपके CSS गेम को अगले स्तर पर ले जाएगा।
रंग गड्ढा
यह डेमो पिछले एक के समान है, लेकिन हम यहां 5 छवियों का उपयोग कर रहे हैं जो पूरी तरह से एक अपेक्षाकृत स्थित कंटेनर के अंदर स्थित हैं |_+_|।
अच्छी बात यह है कि एक बार जब आप |_+_| और |_+_|/|_+_| 5 छवियों में से प्रत्येक के लिए बिल्कुल सही मान, आप अनिवार्य रूप से इस चीज़ को एकल दृश्य तत्व के रूप में मान सकते हैं। इसे वेबपेज के चारों ओर ले जाएं, इसके बगल में अन्य HTML तत्व रखें, इसे एनिमेट करें ... यह इस सटीक रूप को बनाए रखेगा जैसे कि यह एक एकल छवि है।
निष्कर्ष
जब आप |_+_| . का उपयोग करना शुरू करते हैं और |_+_| यह डिजाइन संभावनाओं की एक नई दुनिया खोलता है। आप स्तरित दृश्य तत्व बना सकते हैं, और इस बारे में विश्वास की गहरी भावना महसूस कर सकते हैं कि ब्राउज़र कैसे प्रस्तुत करेंगे, और इस प्रकार उन दृश्य तत्वों को रखें जिन्हें आपने इतनी सावधानी से डिज़ाइन किया है।
#css #html #वेब-विकास
घड़ियाल.io
सीएसएस स्थिति सापेक्ष और निरपेक्ष का उपयोग करने के लिए व्यावहारिक मार्गदर्शिका
सीएसएस स्थिति सापेक्ष और निरपेक्ष का उपयोग करने के लिए व्यावहारिक मार्गदर्शिका - इस लेख में, आप सीखेंगे कि सीएसएस स्थिति का उपयोग कैसे करें: सापेक्ष और स्थिति: पर्याप्त मात्रा में डेमो, और सीखने के माध्यम से पूर्ण।