एक वेब पेज पर हर तत्व एक आयताकार बॉक्स है। CSS में प्रदर्शन संपत्ति यह निर्धारित करती है कि आयताकार बॉक्स कैसे व्यवहार करता है। आमतौर पर उपयोग किए जाने वाले कुछ ही मान हैं:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
सभी तत्वों के लिए डिफ़ॉल्ट मान इनलाइन है। अधिकांश "उपयोगकर्ता एजेंट शैलियाँ" (डिफ़ॉल्ट शैली जो ब्राउज़र सभी साइटों पर लागू होती है) कई तत्वों को "ब्लॉक" पर रीसेट करती है। आइए इनमें से प्रत्येक के माध्यम से जाएं, और फिर कुछ अन्य कम सामान्य मूल्यों को कवर करें।
पंक्ति में
तत्वों के लिए डिफ़ॉल्ट मान। जैसे तत्वों के बारे में सोचो , या और कैसे पाठ की एक स्ट्रिंग के भीतर उन तत्वों में रैपिंग पाठ पाठ के प्रवाह को नष्ट नहीं होती है।
तत्व एक 1px लाल बॉर्डर है। ध्यान दें कि यह बाकी टेक्स्ट के साथ सही इनलाइन बैठता है।
इनलाइन तत्व मार्जिन और पैडिंग स्वीकार करेगा, लेकिन तत्व अभी भी इनलाइन को बैठता है जैसा कि आप उम्मीद कर सकते हैं। मार्जिन और पेडिंग केवल अन्य तत्वों को क्षैतिज रूप से दूर धकेलेंगे, लंबवत नहीं।
एक इनलाइन तत्व स्वीकार नहीं करेगा heightऔर width। इसे सिर्फ नजरअंदाज करेंगे।
इनलाइन ब्लॉक
एक तत्व के लिए सेट inline-blockइनलाइन के समान है, यह पाठ के प्राकृतिक प्रवाह ("आधार रेखा" पर) के साथ इनलाइन सेट करेगा। अंतर यह है कि आप एक सेट करने में सक्षम हैं widthऔर heightजिसका सम्मान किया जाएगा।
खंड मैथा
कई तत्व blockब्राउज़र यूए स्टाइलशीट द्वारा सेट किए गए हैं। वे आम तौर पर कंटेनर तत्व हैं जैसे , और
। इसके अलावा "ब्लॉक" जैसे पाठ
तथा
। ब्लॉक स्तर के तत्व इनलाइन नहीं बैठते हैं बल्कि उन्हें तोड़ देते हैं। डिफ़ॉल्ट रूप से (एक चौड़ाई निर्धारित किए बिना) वे जितना हो सके उतनी क्षैतिज जगह लेते हैं।
लाल सीमा वाले दो तत्व हैं
s जो ब्लॉक स्तर के तत्व हैं। उनके बीच का तत्व इनलाइन नहीं बैठता है क्योंकि ब्लॉक इनलाइन तत्वों से नीचे टूट जाते हैं।
झगड़ा
सबसे पहले, यह गुण फ़ायरफ़ॉक्स में काम नहीं करता है। वर्ड यह है कि इसके लिए कल्पना अच्छी तरह से परिभाषित नहीं है। यद्यपि इसे समझना शुरू करना है, यह ऐसा है जैसे कि आप शीर्ष लेख को नीचे पाठ के साथ बैठना चाहते हैं। इसे फ्लोट करने से काम नहीं चलेगा और न ही कुछ और होगा, क्योंकि आप नहीं चाहते हैं कि हेडर नीचे दिए गए टेक्स्ट एलिमेंट का बच्चा हो, आप चाहते हैं कि यह उसका अपना स्वतंत्र तत्व हो। "समर्थन" ब्राउज़र में, यह इस तरह है:
हालांकि, इस पर भरोसा मत करो।
फ्लेक्सबॉक्स
displayसंपत्ति भी flexbox की तरह नए फ़ैशन लेआउट तरीकों के लिए प्रयोग किया जाता है।
.header ( display: flex; )
फ्लेक्सबॉक्स सिंटैक्स के कुछ पुराने संस्करण हैं, इसलिए सबसे अच्छा ब्राउज़र समर्थन के साथ फ्लेक्सबॉक्स का उपयोग करने के लिए सिंटैक्स के लिए इस लेख से परामर्श करें। फ्लेक्सबॉक्स की इस पूरी गाइड को अवश्य देखें।
प्रवाह-मूल
flow-rootप्रदर्शन मूल्य एक नया "ब्लॉक स्वरूपण संदर्भ" बनाता है, लेकिन अन्यथा की तरह है block। एक नया BFC फ़्लोट साफ़ करने जैसी चीज़ों में मदद करता है, ऐसा करने के लिए हैक्स की आवश्यकता को हटा देता है।
.group ( display: flow-root; )
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
क्रोम
फ़ायर्फ़ॉक्स
अर्थात
एज
सफारी
५ 58
५३
नहीं न
। ९
१३
मोबाइल / टेबलेट
Android क्रोम
Android फ़ायरफ़ॉक्स
एंड्रॉयड
iOS सफारी
88
.५
81
13.0-13.1
ग्रिड
ग्रिड लेआउट भी शुरू में प्रदर्शन संपत्ति द्वारा निर्धारित किया जाएगा।
body ( display: grid; )
यहां ग्रिड लेआउट पर हमारा गाइड है, जिसमें एक ब्राउज़र समर्थन चार्ट शामिल है।
कोई नहीं
संपूर्ण रूप से पृष्ठ से तत्व निकालता है। ध्यान दें कि जब तत्व अभी भी DOM में है, तो इसे नेत्रहीन और किसी अन्य बोधगम्य तरीके से हटा दिया जाता है (आप इसे या इसके बच्चों को टैब नहीं कर सकते, इसे स्क्रीन रीडर, आदि द्वारा अनदेखा किया जाता है)।
तालिका मान
प्रदर्शन मानों का एक पूरा सेट है जो गैर-टेबल तत्वों को टेबल तत्वों की तरह व्यवहार करने के लिए मजबूर करता है, यदि आपको ऐसा करने की आवश्यकता है। यह दुर्लभ-ईश है, लेकिन यह कभी-कभी आपको तालिकाओं की अद्वितीय स्थिति शक्तियों का उपयोग करते हुए अपने कोड के साथ "अधिक अर्थ" होने की अनुमति देता है।
