HTML तत्वों को रखने के लिए CSS का उपयोग करना

• मई 8, 2024

CSS नियम आपको HTML तत्वों को रखने की क्षमता प्रदान करते हैं, जहाँ आप उन्हें चाहते हैं। आप समायोजित कर सकते हैं कि वे अपने आस-पास बैठे अन्य तत्वों पर कैसे प्रतिक्रिया देते हैं, या यहां तक ​​कि उन्हें पूरी तरह से छिपाते हैं। यहां CSS प्लेसमेंट संपत्तियों पर एक ब्रेकडाउन है।

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

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

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

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

स्पष्ट: यह संपत्ति "फ्लोट" संपत्ति के साथ मिलकर काम करती है। यह तय करता है कि तत्व अन्य तत्वों को अपने आसपास कैसे तैरने देगा - "स्पष्ट: बाएं" इसका मतलब है कि कोई अन्य तत्व इसके बाईं ओर तैर नहीं सकता है; "स्पष्ट: दाएं" दाएं तरफ से ब्लॉक होता है और "स्पष्ट: दोनों" का अर्थ है कि कोई भी तत्व दोनों तरफ नहीं तैर सकता है। डिफ़ॉल्ट सेटिंग "स्पष्ट: कोई नहीं" है (जिसका अर्थ है कि अन्य तत्व दोनों तरफ तैर सकते हैं)।

वीडियो निर्देश: 4. Building Web Applications: Installing and Using Visual Studio Code | HTML For Beginners ???? (मई 2024).