सीएसएस गुण: प्रदर्शन बनाम दृश्यता

Question

प्रदर्शन बनाम दृश्यता गुणों के बीच क्या अंतर है?

Answer 1

visibility संपत्ति केवल ब्राउज़र को बताती है कि कोई तत्व दिखाना है या नहीं। यह या तो दृश्यमान है (visible - आप इसे देख सकते हैं), या अदृश्य (hidden - आप इसे नहीं देख सकते हैं)। क्या यह एक inline तत्व के रूप में प्रदर्शित किया जाना चाहिए (यानी यह पाठ और अन्य इनलाइन तत्वों के साथ बहती है) या एक block स्तर के तत्व -

display संपत्ति ब्राउज़र कैसे आकर्षित और एक तत्व को दिखाने के लिए, अगर सब पर बताता है (यानी इसमें ऊंचाई और चौड़ाई गुण हैं जिन्हें आप सेट कर सकते हैं, यह फ्लोट करने योग्य, आदि) है, या inline-block (यानी यह ब्लॉक बॉक्स की तरह कार्य करता है लेकिन इसके बजाय इनलाइन रखी जाती है) और कुछ अन्य (list-item, table, table-row, table-cell, flex, आदि)।

आप display: block लेकिन के एक तत्व के लिए सेट करते भी सेट visibility: hidden, ब्राउज़र अभी भी एक ब्लॉक तत्व के रूप में व्यवहार करता है, सिवाय इसके कि आप इसे नहीं देखते हैं। जैसा कि आप एक अदृश्य बॉक्स के शीर्ष पर एक लाल बॉक्स को ढेर करते हैं: लाल बॉक्स ऐसा लगता है कि यह मध्य हवा में तैर रहा है जब वास्तव में यह एक भौतिक बॉक्स के शीर्ष पर बैठा है जिसे आप नहीं देख सकते हैं।

दूसरे शब्दों में, इसका अर्थ है display के साथ तत्व none अभी भी किसी पृष्ठ में तत्वों के प्रवाह को प्रभावित नहीं करेगा, भले ही वे दिखाई दे या नहीं। display: none के साथ किसी तत्व के आस-पास के बॉक्स इस तरह व्यवहार करेंगे जैसे कि तत्व कभी नहीं था (हालांकि यह डीओएम में रहता है)।

Answer 2

डिस्प्ले: कोई भी HTML के प्रवाह से तत्व को हटा देता है जबकि दृश्यता: छुपा नहीं जाता है।

Answer 3

प्रदर्शन: कोई नहीं; डीओएम तत्वों को डीओएम से दृश्य शैली/भौतिक स्थान को हटा देगा, जबकि दृश्यता: छुपा; तत्व को नहीं हटाएगा, लेकिन इसे आसानी से छुपाएं। इसलिए दृश्यता पर सेट होने पर आपके डीओएम में 300 पीएक्स लंबवत स्थान पर कब्जा करने वाला एक div लंबवत चौड़ाई पर 300px पर कब्जा करेगा: छुपा; लेकिन जब प्रदर्शित करने के लिए सेट: कोई नहीं; यह दृश्य शैली है और जिस स्थान पर यह कब्जा है वह छुपा हुआ है और अंतरिक्ष को बेहतर शब्द की कमी के लिए "मुक्त" किया जाता है।

[संपादित करें] - यह कुछ समय पहले मैंने लिखा था, और क्या मैं पर्याप्त जानकारी नहीं दे रहा था या बुरा दिन था, मुझे नहीं पता, लेकिन वास्तविकता यह है कि तत्व कभी भी हटा नहीं जाता है डोम पदानुक्रम। डिस्प्ले का उपयोग करते समय सभी ब्लॉक स्तर डिस्प्ले 'शैलियों' पूरी तरह से 'छुपा' होते हैं: कोई नहीं, जबकि दृश्यता के साथ: छुपा; तत्व स्वयं छिपा हुआ है लेकिन यह अभी भी डोम में दृश्य स्थान पर है।मैं इस अप

Answer 4

दृश्यता चीजों को साफ करता है आशा: छिपा हुआ;

• तत्व चित्रित नहीं किया जाएगा और क्लिक करें/घटनाओं स्पर्श प्राप्त नहीं है, लेकिन अंतरिक्ष लेता अभी भी
• पर कब्जा कर लिया है, क्योंकि यह अभी भी वहाँ लेआउट उद्देश्यों के लिए है, तो आप यह आकलन कर सकते हैं यह किया जा रहा बिना दृश्य
• बदलती सामग्री को अभी भी पृष्ठ
• दृश्यता विरासत में मिली है, इसलिए इसका मतलब है कि आप उन्हें दृश्यता देकर उपचुनाव बना सकते हैं: दृश्यमान;

प्रदर्शन: कोई नहीं;

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

अतिरिक्त नोट्स: छिपी हुई सामग्री में

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