display वास्तवमा दुई कुरा सेट गर्छ: बक्स बाहिरी (block/inline) को रूपमा कसरी व्यवहार गर्छ र यसले भित्री (flow/flex/grid) को अपने बच्चाहरूलाई कसरी लेआउट गर्छ। display: flex को मतलब "यो बक्स ब्लक-लेभल हो, र यसका बच्चाहरू flex आइटमहरू हुन्।"
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
एक महत्त्वपूर्ण भिन्नता: display: none लेआउट भत्काउँछ (र स्क्रिन रिडरहरूबाट लुकाउँछ); visibility: hidden एलिमेन्ट जहाँ थियो त्यहाँ एक खाली स्थान छोड्छ। साँच्चै हटाउन display: none प्रयोग गर्नुहोस्, लेआउट सुरक्षित राख्दै लुकाउन visibility: hidden प्रयोग गर्नुहोस्।
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
आधुनिक लेआउट लगभग पूर्ण रूपमा flex (1D — पङ्क्तिहरू वा स्तम्भहरू) र grid (2D — पङ्क्तिहरू र स्तम्भहरू एकसाथ) मा निर्मित छ।
display एलिमेन्टको सम्पूर्ण लेआउट व्यवहार निर्धारण गर्छ।
ब्लक बनाम इनलाइन बनाम इनलाइन-ब्लक जान्दा डिफल्ट फ्लो व्याख्या गर्छ; flex/grid आधुनिक लेआउटको मूल हरू हुन्; र none बनाम visibility को भिन्नता एक बारम्बार-परीक्षित, व्यावहारिक-महत्त्वपूर्ण विवरण हो।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्