display संपत्ति एक वेबपेज के लेआउट का अभिन्न अंग है। प्रदर्शन गुण यह निर्धारित करता है कि किसी तत्व को उसके आस-पास के तत्वों के संबंध में कैसे प्रदर्शित किया जाता है। इस सीएसएस संपत्ति के लिए कई मूल्य हैं; सबसे अधिक उपयोग किए जाने वाले मानों में शामिल हैं inline , block , और inline-block . इस लेख में हम इन तीन सीएसएस प्रदर्शन मूल्यों के बीच कार्यान्वयन और अंतर पर चर्चा करेंगे।
वाक्यविन्यास
प्रदर्शन के किसी भी सीएसएस मूल्य को लागू करने के लिए वाक्यविन्यास, वाक्यविन्यास इस प्रकार है:
प्रदर्शन:मान;
इस लेख में, तीन मान इनलाइन, ब्लॉक और इनलाइन-ब्लॉक हैं, इसलिए सिंटैक्स होगा:
प्रदर्शन:इनलाइन;
प्रदर्शन:ब्लॉक;
प्रदर्शन:इनलाइन-ब्लॉक;
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
इनलाइन, ब्लॉक और इनलाइन-ब्लॉक डिस्प्ले के बीच अंतर
इनलाइन-ब्लॉक तत्वों की तुलना कैसे होती है, यह देखने से पहले, आइए इनलाइन तत्वों और ब्लॉक तत्वों की समीक्षा करके शुरुआत करें।
इनलाइन
इनलाइन-स्तरीय तत्वों को इनलाइन प्रदर्शित किया जाता है, जिसका अर्थ है कि इस तत्व और पैरेंट या पिछले तत्व के बीच कोई लाइन ब्रेक या अलगाव नहीं है। यह केवल आवश्यक चौड़ाई लेता है; यदि आप तत्व में कस्टम चौड़ाई और ऊंचाई गुण जोड़ने का प्रयास करते हैं, तो गुणों को अनदेखा कर दिया जाएगा।
डिफ़ॉल्ट रूप से इनलाइन प्रदर्शित होने वाले HTML तत्वों में निम्नलिखित शामिल हैं:<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button> <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>
ब्लॉक करें
ब्लॉक-स्तरीय तत्वों को एक नई लाइन पर प्रदर्शित किया जाता है, और जब तक कि चौड़ाई की संपत्ति नहीं लिखी जाती है, तब तक सभी चौड़ाई संभव हो जाती है। इनलाइन तत्वों के विपरीत, यदि आप कस्टम चौड़ाई और ऊंचाई गुण जोड़ते हैं, तो उन गुणों का सम्मान किया जाएगा।
डिफ़ॉल्ट रूप से ब्लॉक प्रदर्शित एचटीएमएल तत्वों में निम्नलिखित शामिल हैं:<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>...<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
इनलाइन-ब्लॉक
इसे ध्यान में रखते हुए, इनलाइन-ब्लॉक तत्व इनलाइन और ब्लॉक दोनों तत्वों का सबसे अच्छा संयोजन करते हैं:इनलाइन-ब्लॉक कस्टम चौड़ाई और ऊंचाई गुणों को जोड़ने की क्षमता के साथ इनलाइन प्रदर्शित होते हैं। यह उन्हें आदर्श बनाता है जब आप किसी साइट के प्रदर्शन को स्टाइल करना चाहते हैं, और तत्वों को एक साथ बैठना चाहते हैं।
निष्कर्ष
इस लेख में, हमने चर्चा की कि CSS डिस्प्ले प्रॉपर्टी के लिए तीन मानों को कैसे लागू किया जाए:इनलाइन, ब्लॉक और इनलाइन-ब्लॉक, और इनलाइन-लेवल और ब्लॉक-लेवल डिस्प्ले का उपयोग करने के पक्ष और विपक्ष। अगर आपको यह लेख मददगार लगा, तो अन्य लेख देखें:सीएसएस सीखें:कैस्केडिंग स्टाइल शीट सीखने के लिए एक गाइड, या सीएसएस सीखने के लिए हमारी शुरुआती गाइड।
यदि आप फ्रंट-एंड वेब डेवलपमेंट के बारे में अधिक जानना चाहते हैं, तो सर्वश्रेष्ठ प्रशिक्षण कार्यक्रम खोजने के लिए आज ही हमारे किसी कोच से बात करें।