डिस्प्ले और नॉर्मल फ्लो

docs.scrimba.com

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

नॉर्मल फ्लो

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

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

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

इसे नाम देने का कारण यह है कि लेआउट टूल इसके विचलन के रूप में परिभाषित हैं। जब आप किसी कंटेनर पर display: flex सेट करते हैं, तो आप ब्राउज़र को बता रहे हैं कि उस कंटेनर के बच्चों को नॉर्मल फ्लो के बजाय फ्लेक्स नियमों के अनुसार लेआउट करें। डिफ़ॉल्ट कभी नहीं गायब होता; आप व्यक्तिगत कंटेनर को इससे बाहर निकालते हैं। यह भी है कि एक अस्टाइल्ड डॉक्यूमेंट अभी भी पठनीय क्यों है: नॉर्मल फ्लो एक वास्तविक लेआउट है, एक का अभाव नहीं।

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

इसे सटीक रूप से नाम देना महत्वपूर्ण है क्योंकि पूरी लेआउट प्रणाली इसके विकल्पों के एक सेट के रूप में बनाई गई है। display: flex और display: grid एक कंटेनर के आंतरिक लेआउट को फ्लेक्स या ग्रिड नियमों से बदल देते हैं, और position: absolute या एक float एक बॉक्स को नॉर्मल फ्लो से पूरी तरह से निकाल देता है ताकि आसपास की सामग्री ऐसे लेआउट हो जैसे यह वहां न हो। हर मामले में नॉर्मल फ्लो वह बेसलाइन है जिससे आप विचलन कर रहे हैं, और एक बॉक्स जो स्पष्ट रूप से इससे बाहर नहीं किया गया है या दूसरे लेआउट मोड को सौंपा गया है वह अभी भी फ्लो कर रहा है। यह है कि एक स्टाइलशीट-मुक्त दस्तावेज बिल्कुल सही क्रम में क्यों प्रदान करता है: ब्लॉक-और-इनलाइन फ्लो डिफ़ॉल्ट है, फॉलबैक नहीं।

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

Junoनॉर्मल फ्लो नॉर्मल फ्लो ब्राउज़र का डिफ़ॉल्ट है: ब्लॉक सोर्स ऑर्डर में ऊपर से नीचे तक स्टैक होते हैं, इनलाइन बॉक्स लाइन के साथ चलते हैं और लपेटते हैं। फ्लेक्स, ग्रिड, और पोजिशनिंग सभी तरीके हैं कि एक कंटेनर को इससे बाहर निकाला जाए, कहीं भी एक प्रतिस्थापन नहीं। एक अस्टाइल्ड पेज अच्छी तरह पढ़ता है क्योंकि नॉर्मल फ्लो एक वास्तविक लेआउट है, एक का अभाव नहीं।

Junoनॉर्मल फ्लो नॉर्मल फ्लो ब्लॉक लेआउट है जो लंबवत स्टैक होता है साथ ही इनलाइन लेआउट जो लाइन के साथ चलता है, डिफ़ॉल्ट रूप से लागू होता है इससे पहले कि कुछ और बॉक्स को छुए। display: flex और display: grid एक कंटेनर के आंतरिक लेआउट को स्वैप करते हैं, और float या position: absolute एक बॉक्स को फ्लो से निकाल देते हैं ताकि भाई-बहन इसे अनदेखा करें। जो कुछ भी आप विचलित नहीं करते वह फ्लो में रहता है, जो है कि एक स्टाइलशीट-मुक्त दस्तावेज अभी भी सही क्रम में क्यों प्रदान करता है।

ब्लॉक बॉक्स और इनलाइन बॉक्स

तत्व नॉर्मल फ्लो में दो मुख्य प्रकार के होते हैं। एक ब्लॉक बॉक्स अपने कंटेनर की पूरी चौड़ाई लेता है और अपनी स्वयं की लाइन पर स्टैक होता है, अगले तत्व को नीचे धकेलता है। एक पैराग्राफ <p>, एक हेडिंग <h1>, और एक <div> सभी ब्लॉक हैं, जो है कि वे एक दूसरे के नीचे एक पंक्ति में क्यों खड़े होते हैं।

एक इनलाइन बॉक्स अलग होता है। यह टेक्स्ट की एक लाइन के अंदर बैठता है और केवल उतनी ही जगह लेता है जितनी उसकी सामग्री को चाहिए, इसलिए कई एक लाइन साझा कर सकते हैं। एक <span> या एक लिंक <a> इनलाइन होता है, जो है कि एक वाक्य के अंदर एक लिंक शब्दों के प्रवाह में क्यों रहता है बजाय अपनी स्वयं की लाइन पर कूदने के।

<!-- यह पैराग्राफ एक ब्लॉक है, इसलिए यह अपनी स्वयं की लाइन पर बैठता है -->
<p>This paragraph is a block, so it sits on its own line.</p>
<!-- लिंक इनलाइन है, इसलिए यह वाक्य के अंदर रहता है -->
<p>Read the <a href="/css/box-model">box model</a> for more.</p>

नॉर्मल फ्लो में हर बॉक्स को ब्लॉक-लेवल या इनलाइन-लेवल के रूप में लेआउट किया जाता है, और दोनों अलग-अलग नियमों का पालन करते हैं। एक ब्लॉक बॉक्स एक नई लाइन पर शुरू होता है, डिफ़ॉल्ट रूप से उपलब्ध चौड़ाई भरता है, और लंबवत स्टैक होता है। <div>, <p>, <h1>, और <section> डिफ़ॉल्ट रूप से ब्लॉक हैं। एक इनलाइन बॉक्स एक लाइन के भीतर टेक्स्ट के साथ बहता है, केवल इसकी सामग्री की चौड़ाई लेता है, और जब तक लाइन लपेटता है तब तक अपने पड़ोसियों के बगल में बैठता है। <span>, <a>, और <strong> डिफ़ॉल्ट रूप से इनलाइन हैं।

जो अंतर लोगों को पकड़ता है वह है कि इनलाइन बॉक्स क्या अनदेखा करते हैं। एक इनलाइन बॉक्स width, height, और ऊपर और नीचे के मार्जिन को अनदेखा करता है। एक <span> पर width: 200px सेट करें और कुछ नहीं होता है, क्योंकि एक इनलाइन बॉक्स अपनी सामग्री के आधार पर आकार दिया जाता है, आपके द्वारा नहीं। बाएं और दाएं पैडिंग और मार्जिन लागू होते हैं, लेकिन लंबवत दूरी आसपास की लाइनों को उस तरह से अलग नहीं करती है जैसे यह एक ब्लॉक पर होता है।

.tag {
  width: 200px;        /* अनदेखा: एक span इनलाइन है, सामग्री के आधार पर आकार दिया गया */
  padding: 0 8px;      /* क्षैतिज पैडिंग काम करता है */
  margin-top: 40px;    /* अनदेखा: इनलाइन बॉक्स पर कोई लंबवत मार्जिन नहीं */
}

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

सटीक हिस्सा यह है कि कौन सी प्रॉपर्टी एक इनलाइन बॉक्स छोड़ता है। width और height एक गैर-प्रतिस्थापित इनलाइन बॉक्स जैसे <span> या <a> पर लागू नहीं होते हैं, क्योंकि इसका आकार इसकी सामग्री और आसपास की लाइन से आता है। ऊपर और नीचे के मार्जिन की गणना की जाती है लेकिन लाइन ऊंचाई पर कोई प्रभाव नहीं पड़ता है, इसलिए वे कभी भी आसपास की लाइनों को अलग नहीं करते हैं, और ऊपर और नीचे की पैडिंग दृश्य रूप से प्रदान करती है लेकिन लाइन बॉक्स की ऊंचाई में परिवर्तन नहीं करती है, इसलिए यह पड़ोसी लाइनों के साथ ओवरलैप कर सकता है। बाएं और दाएं मार्जिन और पैडिंग लागू होते हैं और इनलाइन पड़ोसियों को स्थानांतरित करते हैं। प्रतिस्थापित इनलाइन तत्व जैसे <img> अपवाद हैं: वे आंतरिक आयाम ले जाते हैं, इसलिए width और height उन पर लागू होते हैं भले ही वे इनलाइन-लेवल हों।

.badge {              /* .badge एक <span> है, डिफ़ॉल्ट रूप से इनलाइन */
  width: 120px;       /* कोई प्रभाव नहीं: width इनलाइन बॉक्स पर लागू नहीं होता */
  height: 40px;       /* समान कारण के लिए कोई प्रभाव नहीं */
  padding: 12px;      /* बाएं/दाएं पड़ोसियों को स्थानांतरित करते हैं; ऊपर/नीचे लाइनों के साथ ओवरलैप कर सकते हैं */
  margin: 8px 0;      /* लंबवत 8px को अनदेखा किया जाता है, क्षैतिज 0 लागू होगा */
}

Junoब्लॉक बॉक्स और इनलाइन बॉक्स<p> और <div> जैसे ब्लॉक बॉक्स पूरी चौड़ाई लेते हैं और अपनी स्वयं की लाइनों पर स्टैक होते हैं। <span> और <a> जैसे इनलाइन बॉक्स एक लाइन के अंदर बैठते हैं और केवल उतनी ही जगह लेते हैं जितनी उन्हें चाहिए। यह है कि एक लिंक आपके वाक्य के अंदर क्यों रहता है बजाय अपनी स्वयं की पंक्ति पर टूटने के।

Junoब्लॉक बॉक्स और इनलाइन बॉक्स ब्लॉक बॉक्स चौड़ाई भरते हैं और स्टैक होते हैं; इनलाइन बॉक्स लाइन के साथ बहते हैं और अपनी सामग्री में आकार देते हैं। जाल यह है कि एक इनलाइन बॉक्स width, height, और लंबवत मार्जिन को अनदेखा करता है, इसलिए <span> पर width सेट करना कुछ नहीं करता है। क्षैतिज पैडिंग और मार्जिन अभी भी काम करते हैं, जो है कि यह लोगों को पकड़ता है।

Junoब्लॉक बॉक्स और इनलाइन बॉक्स एक इनलाइन बॉक्स अपनी सामग्री और इसके लाइन बॉक्स के आधार पर आकार दिया जाता है, इसलिए width और height लागू नहीं होते हैं, और लंबवत मार्जिन और पैडिंग आसपास की लाइनों को अलग नहीं करते हैं। क्षैतिज मार्जिन और पैडिंग लागू होते हैं और पड़ोसियों को स्थानांतरित करते हैं। अपवाद <img> जैसे प्रतिस्थापित तत्व हैं, जो अपने स्वयं के आयाम ले जाते हैं और इसलिए इनलाइन होने पर भी width और height स्वीकार करते हैं।

डिस्प्ले प्रॉपर्टी

हर तत्व का एक डिफ़ॉल्ट प्रकार होता है, ब्लॉक या इनलाइन, लेकिन आप इस तक सीमित नहीं हैं। डिस्प्ले प्रॉपर्टी आपको यह बदलने देती है कि कोई तत्व कैसे व्यवहार करता है। एक लिंक पर display: block सेट करें और यह अब अपनी स्वयं की लाइन लेता है; एक सूची आइटम पर display: inline सेट करें और यह एक पंक्ति में बैठता है।

एक तीसरा मान है जो एक सामान्य समस्या को हल करता है: display: inline-block। यह इनलाइन बॉक्स की तरह लाइन में बहता है, लेकिन यह एक चौड़ाई, एक ऊंचाई, और लंबवत पैडिंग स्वीकार करता है जैसे एक ब्लॉक। यह है कि आप क्या चाहते हैं किसी चीज़ के लिए जैसे एक बटन या एक नाव गोली जो अपने पड़ोसियों के बगल में बैठनी चाहिए फिर भी एक सेट आकार लें।

.nav-link {
  display: inline-block;   /* लाइन में बहता है, लेकिन चौड़ाई और पैडिंग स्वीकार करता है */
  padding: 8px 16px;       /* लंबवत पैडिंग अब काम करता है, सादे इनलाइन के विपरीत */
}

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

inline-block उपयोगी संकर है: बॉक्स इनलाइन बॉक्स की तरह लाइन में बहता है, इसलिए कई एक दूसरे के बगल में बैठते हैं, लेकिन यह एक ब्लॉक की तरह width, height, और लंबवत पैडिंग और मार्जिन स्वीकार करता है। इसे तब तक पहुंचें जब आप चाहते हैं कि चीजें एक पंक्ति में हों जिन्हें अभी भी वास्तविक आयाम चाहिए, बटन या नाव लिंक का एक सेट, फ्लेक्सबॉक्स में जाने के बिना। जब आपको एक पूरी पंक्ति या संरेखण और दूरी के साथ वस्तुओं की ग्रिड को लेआउट करना है, फ्लेक्सबॉक्स में display: flex बेहतर उपकरण है; inline-block एक पंक्ति में कुछ आकार दिए गए बॉक्स के छोटे मामले के लिए है।

.stat {
  display: inline-block;   /* अपने भाई-बहनों के साथ एक पंक्ति में बैठता है */
  width: 120px;            /* लेकिन एक निर्धारित चौड़ाई लेता है, जो इनलाइन को अनदेखा करेगा */
  padding: 12px;           /* पूरी पैडिंग लागू होती है, ऊपर और नीचे शामिल है */
}

display किसी बॉक्स के लिए लेआउट मोड का चयन करता है, और तीन मान जो इसे नॉर्मल फ्लो में रखते हैं वे block, inline, और inline-block हैं। block एक बॉक्स देता है जो पहले और बाद में टूटता है और अपने कंटेनर ब्लॉक की इनलाइन आकार भरता है; inline एक बॉक्स देता है जो एक लाइन बॉक्स में जुड़ता है और width, height, और लंबवत मार्जिन को छोड़ता है। display सेट करना कभी भी शब्दार्थ को नहीं छूता है, केवल लेआउट: एक <div> display: inline पर सेट करना DOM और सहायक तकनीक के लिए अभी भी एक <div> है, यह केवल इनलाइन लेआउट करता है।

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

.pill {
  display: inline-block;   /* इनलाइन-लेवल बॉक्स, ब्लॉक-लेवल अंदरूनी */
  width: 96px;             /* लागू होता है, क्योंकि अंदरूनी एक ब्लॉक के रूप में लेआउट करता है */
  padding: 10px 14px;      /* सभी चार पक्ष लेआउट स्पेस लेते हैं */
  margin: 0 4px;           /* लंबवत मार्जिन अब भी लागू होता है */
}

Junoडिस्प्ले प्रॉपर्टीdisplay प्रॉपर्टी यह बदलती है कि कोई तत्व ब्लॉक के रूप में या इनलाइन बॉक्स के रूप में व्यवहार करता है। block अपनी स्वयं की लाइन लेता है, inline टेक्स्ट लाइन में बैठता है। सहज मध्य विकल्प inline-block है, जो लाइन में बहता है फिर भी चौड़ाई और पैडिंग स्वीकार करता है, इसलिए यह है कि आप बटन और नाव लिंक के लिए क्या चाहते हैं।

Junoडिस्प्ले प्रॉपर्टीdisplay लेआउट निर्धारित करता है, अर्थ नहीं: block, inline, या संकर inline-block। inline-block का उपयोग करें जब आप कुछ आकार दिए गए बॉक्स चाहते हैं एक पंक्ति में बैठे हों, क्योंकि यह इनलाइन बहता है लेकिन width, height, और पूरी पैडिंग स्वीकार करता है। एक पूरी पंक्ति के लिए जिसे संरेखण और दूरी चाहिए, फ्लेक्सबॉक्स के बजाय तक पहुंचें।

Junoडिस्प्ले प्रॉपर्टीdisplay लेआउट मोड चुनता है और कभी शब्दार्थ नहीं, इसलिए एक इनलाइन <div> DOM के लिए अभी भी <div> है। inline-block एक इनलाइन-लेवल बॉक्स है जिसमें ब्लॉक-लेवल अंदरूनी हैं, इसलिए यह एक लाइन में बैठता है लेकिन width, height, और सभी चार मार्जिन सम्मानित करता है। इसे एक मुट्ठी भर आकार दिए गए बॉक्स के लिए रखें और एक वास्तविक पंक्ति को फ्लेक्सबॉक्स को सौंपें, और आसन्न बॉक्स के बीच की जगह की खाई का ध्यान रखें।

चीजों को छिपाना: डिस्प्ले नोन बनाम दृश्यमानता छिपी

कभी-कभी आप चाहते हैं कि एक तत्व न दिखे। दो तरीके हैं, और वे अलग तरीके से व्यवहार करते हैं। display: none तत्व को पूरी तरह से हटा देता है: यह गायब हो जाता है और कोई अंतर नहीं छोड़ता है, जैसे कि यह पेज पर बिल्कुल न हो। visibility: hidden इसे अदृश्य बनाता है लेकिन इसकी जगह रखता है, इसलिए वहां एक खाली छेद होता है जहां यह हुआ करता था।

कौन सा आप चाहते हैं यह इस बात पर निर्भर करता है कि आप जगह वापस चाहते हैं या नहीं। display: none का उपयोग करें कुछ को पूरी तरह से छोड़ने के लिए, एक बंद मेनू की तरह। visibility: hidden का उपयोग करें जब आप कुछ को लेआउट कूदने के बिना छिपाना चाहते हैं, क्योंकि इसका बॉक्स आरक्षित रहता है।

.closed-menu {
  display: none;          /* चला गया, और कोई अंतर नहीं छोड़ा गया */
}
.placeholder {
  visibility: hidden;     /* अदृश्य, लेकिन अभी भी अपनी जगह लेता है */
}

एक तत्व को छिपाने के दोनों तरीके विनिमेय नहीं हैं। display: none तत्व को नॉर्मल फ्लो से पूरी तरह से ले जाता है: यह कोई बॉक्स उत्पन्न नहीं करता है, कोई स्पेस नहीं लेता है, और इसके चारों ओर के तत्व बंद हो जाते हैं जैसे कि यह कभी न हो। visibility: hidden बॉक्स को फ्लो में रखता है और इसकी जगह आरक्षित करता है, इसलिए लेआउट स्थानांतरित नहीं होता है; तत्व केवल अदृश्य चित्रित होता है।

एक पहुंच अंतर है जो दृश्य की तरह ही महत्वपूर्ण है। display: none के साथ एक तत्व पहुंच पेड़ से भी हटा दिया जाता है, इसलिए स्क्रीन रीडर इसे छोड़ते हैं, जो उन सामग्री के लिए सही है जो बिल्कुल न हो, एक बंद पैनल की तरह। visibility: hidden स्क्रीन रीडर से सामग्री को भी छिपाता है जबकि स्पेस रखता है। यदि आप चाहते हैं कि कुछ दृश्य रूप से चला गया हो लेकिन अभी भी सहायक तकनीक द्वारा घोषित किया जाए, तो न तो ये सही है; यह वह है जो एक दृश्य-छिपी उपयोगिता वर्ग है, जिसे आप कैसे CSS काम करता है में शब्दार्थ के साथ पढ़ सकते हैं।

.tab-panel[hidden] {
  display: none;          /* फ्लो और पहुंच पेड़ से हटा दिया गया */
}
.spacer {
  visibility: hidden;     /* अपनी जगह रखता है, स्क्रीन रीडर से अभी भी छिपा */
}

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

पहुंच और व्यावहारिक परिणाम चुनने के कारण हैं। display: none और visibility: hidden दोनों पहुंच पेड़ से तत्व को हटाते हैं, इसलिए स्क्रीन रीडर न तो की घोषणा नहीं करेगा। यह उन सामग्री के लिए गलत बनाता है जिसे आप दृश्य रूप से चला जाना चाहते हैं लेकिन अभी भी पढ़ा जाए, मास्टर केस एक "सामग्री में छोड़ें" लिंक या स्क्रीन-रीडर-केवल लेबल हो; जो एक दृश्य-छिपी पैटर्न की जरूरत है जो बॉक्स को पिक्सल में क्लिप करता है जबकि पहुंच पेड़ में रखता है, न कि यहां प्रॉपर्टी। दो और व्यावहारिक नोट: display: none को states के बीच transitioned या animated नहीं किया जा सकता जैसे opacity और visibility कर सकते हैं, और display: none के लिए सेट एक तत्व focusable नहीं है और इसके फॉर्म कंट्रोल submit नहीं किए जाते हैं, जबकि visibility: hidden नियंत्रण भी छोड़ा जाता है लेकिन इसकी जगह रखी जाती है। display: none को पूरी तरह से हटाने के लिए चुनें, visibility: hidden को लेआउट को रखते हुए छिपाने के लिए, और जब सहायक तकनीक को अभी भी पहुंचना चाहिए तो एक क्लिपिंग उपयोगिता।

.dropdown[aria-expanded="false"] .menu {
  display: none;          /* पूरी तरह से हटा दिया गया: कोई बॉक्स नहीं, कोई स्पेस नहीं, focusable नहीं */
}
.avatar-slot {
  visibility: hidden;     /* बॉक्स और स्पेस रखा गया, चित्रण दबा दिया गया */
}

Junoचीजों को छिपाना: डिस्प्ले नोन बनाम दृश्यमानता छिपी छिपाने के दो तरीके: display: none तत्व को हटाता है और कोई अंतर नहीं छोड़ता है, visibility: hidden इसे अदृश्य बनाता है लेकिन इसकी जगह रखता है। display: none चुनें जब आप जगह को भी चला जाना चाहते हैं, एक बंद मेनू की तरह। visibility: hidden चुनें जब आप नहीं चाहते कि लेआउट कूदे।

Junoचीजों को छिपाना: डिस्प्ले नोन बनाम दृश्यमानता छिपीdisplay: none तत्व को फ्लो से बाहर ले जाता है इसलिए कुछ भी इसकी जगह आरक्षित नहीं करता है; visibility: hidden बॉक्स को रखता है और इसकी जगह और केवल चित्रण को छिपाता है। दोनों भी पहुंच पेड़ से तत्व को छिपाते हैं, इसलिए यदि आप कुछ दृश्य रूप से चला जाना चाहते हैं लेकिन अभी भी घोषित किया जाए, न तो सही है। यह उपयोगिता वर्ग का काम है।

Junoचीजों को छिपाना: डिस्प्ले नोन बनाम दृश्यमानता छिपीdisplay: none कोई बॉक्स उत्पन्न नहीं करता है और कोई स्पेस नहीं लेता है; visibility: hidden बॉक्स और स्पेस को रखता है और केवल चित्रण को दबाता है, और एक बच्चा फिर से दिखाई देने के लिए visibility: visible सेट कर सकता है। दोनों पहुंच पेड़ से बाहर निकलते हैं, इसलिए एक छोड़ें लिंक या स्क्रीन-रीडर लेबल को क्लिपिंग उपयोगिता की आवश्यकता है, न कि कोई भी। याद रखें display: none animatable नहीं है और इसके नियंत्रण focusable या submitted नहीं हैं।

डिस्प्ले कैसे आंतरिक लेआउट को बदलता है

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

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

display वास्तव में एक बार में दो चीजों को नियंत्रित करता है: बॉक्स कैसे अपने भाई-बहनों के बीच बैठता है, और बॉक्स अपने स्वयं के बच्चों को कैसे लेआउट करता है। display: block और display: inline ज्यादातर पहले को बोलते हैं। display: flex और display: grid दूसरे को बदलते हैं: कंटेनर अभी भी नॉर्मल फ्लो में ब्लॉक के रूप में भाग लेता है, लेकिन इसके अंदर, बच्चे ब्लॉक-और-इनलाइन फ्लो के बजाय फ्लेक्स या ग्रिड नियमों द्वारा लेआउट किए जाते हैं।

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

display मान वास्तव में एक बार में दो प्रकार होते हैं: एक बाहरी प्रकार जो कहता है कि बॉक्स अपने माता-पिता के लेआउट में कैसे भाग लेता है, और एक आंतरिक प्रकार जो कहता है कि बॉक्स अपने बच्चों को कैसे लेआउट करता है। display: block बाहरी ब्लॉक है, आंतरिक फ्लो; display: flex बाहरी ब्लॉक है, आंतरिक फ्लेक्स; display: inline-flex बाहरी इनलाइन है, आंतरिक फ्लेक्स। यह दो-भाग मॉडल है कि फ्लेक्स कंटेनर नॉर्मल फ्लो में एक ब्लॉक बैठे हुए भी क्यों अपने बच्चों को फ्लेक्स नियमों का पालन करते हैं: आपने आंतरिक प्रकार को बदला है, बाहरी को नहीं।

एक और मान यहाँ जगह अर्जित करता है: display: flow-root। यह एक बॉक्स को एक सामान्य आंतरिक फ्लो देता है लेकिन इसे एक नया ब्लॉक फॉर्मेटिंग संदर्भ (एक BFC: एक आत्मनिर्भर लेआउट क्षेत्र जिसके अंदर के इसके बाहर के साथ बातचीत नहीं करते, इसलिए अंदर floats निहित हैं और अंदर मार्जिन इसके किनारे के माध्यम से पतन नहीं करते हैं) स्थापित करने के लिए मजबूर करता है। flow-root से पहले मौजूद होने से, लोगों ने overflow: hidden या एक clearfix हैक के साथ एक BFC ट्रिगर किया floated बच्चों को निहित करने के लिए; flow-root स्पष्ट, साइड-इफेक्ट-मुक्त तरीका है कहने के लिए "इसे निहित करें"। यह भी बॉक्स मॉडल में वर्णित माता-पिता-और-बच्चा मार्जिन पतन को रोकता है। जब आप फ्लेक्सबॉक्स में एक कंटेनर को display: flex या display: grid में ले जाते हैं, तो आप समान रूप से एक नए फॉर्मेटिंग संदर्भ को स्थापित कर रहे हैं, जो भाग है कि मार्जिन आधुनिक लेआउट के अंदर फ्लोट-युग वाले की तुलना में अधिक अनुमानित रूप से व्यवहार क्यों करते हैं।

.media {
  display: flow-root;     /* किसी भी floated बच्चों को निहित करता है, कोई clearfix हैक नहीं */
}
.gallery {
  display: flex;          /* नॉर्मल फ्लो में बाहरी ब्लॉक, बच्चों के लिए आंतरिक फ्लेक्स */
}

Junoडिस्प्ले कैसे आंतरिक लेआउट को बदलता है वही display प्रॉपर्टी जो ब्लॉक और इनलाइन को स्विच करता है वह भी है जो फ्लेक्सबॉक्स या ग्रिड में बच्चों को व्यवस्थित करने के लिए एक कंटेनर को बदलता है। लेआउट एक स्विच नहीं है जिसे आप एक बार फ्लिप करते हैं; आप display को कंटेनर पर बदलते हैं जिन्हें इसकी आवश्यकता है और बाकी को नॉर्मल फ्लो में छोड़ते हैं। फ्लेक्सबॉक्स और पोजिशनिंग अध्याय यहां से चलते हैं।

Junoडिस्प्ले कैसे आंतरिक लेआउट को बदलता हैdisplay दोनों को नियंत्रित करता है कि एक बॉक्स अपने भाई-बहनों के बीच कैसे बैठता है और यह अपने बच्चों को कैसे व्यवस्थित करता है। display: flex और display: grid दूसरे को बदलते हैं, इसलिए फ्लेक्स कंटेनर अभी भी नॉर्मल फ्लो में ब्लॉक होता है जबकि इसके बच्चे फ्लेक्स नियमों में स्विच करते हैं। यह है कि फ्लेक्सबॉक्स सीखना फ्लो को प्रतिस्थापित करने के बजाय बनाता है।

Junoडिस्प्ले कैसे आंतरिक लेआउट को बदलता हैdisplay मान एक बाहरी प्रकार ले जाता है, कैसे बॉक्स अपने माता-पिता में जुड़ता है, और एक आंतरिक प्रकार, कैसे यह बच्चों को लेआउट करता है, जो है कि फ्लेक्स कंटेनर फ्लो में ब्लॉक रहते हुए भी अपने बच्चों को फ्लेक्स करते हैं। display: flow-root सामान्य आंतरिक फ्लो रखता है लेकिन एक नई ब्लॉक फॉर्मेटिंग संदर्भ शुरू करता है, इसलिए यह floats को निहित करता है और पुरानी overflow या clearfix हैक के बिना मार्जिन पतन को रोकता है। फ्लेक्स और ग्रिड कंटेनर भी अपने संदर्भ को स्थापित करते हैं, जो भाग है कि मार्जिन आधुनिक लेआउट के अंदर अधिक अनुमानित रूप से व्यवहार क्यों करते हैं।