सीएसएस बॉक्स मॉडल

वेब विकास में, सी.एस.एस बॉक्स मॉडल से तात्पर्य है कि एच.टी.एम.एल तत्वों को ब्राउज़र इंजन में कैसे मॉडल किया जाता है और उन एच.टी.एम.एल तत्वों के आयाम सी.एस.एस गुणों से कैसे प्राप्त होते हैं। यह एच.टी.एम.एल वेबपेजों की रचना के लिए एक मौलिक अवधारणा है। बॉक्स मॉडल के दिशानिर्देशों का वर्णन वेब मानकों  विश्वव्यापी वेब संकाय  | वर्ल्ड वाइड वेब कंसोर्टियम (W3C) विशेष रूप से सी.एस.एस वर्किंग ग्रुप द्वारा किया गया है। 1990 के दशक के अंत और 2000 के दशक के प्रारंभ में मुख्यधारा के ब्राउज़रों में बॉक्स मॉडल के गैर-मानक अनुरूप कार्यान्वयन हुए थे। 1998 में सी.एस.एस#सी.एस.एस_2 के आगमन के साथ, जिसने   संपत्ति, समस्या ज्यादातर हल हो गई थी।

विशिष्टता
कैस्केडिंग स्टाइल शीट्स (सीएसएस) विनिर्देश बताता है कि ग्राफिकल ब्राउज़रों द्वारा वेब पृष्ठों के तत्वों को कैसे प्रदर्शित किया जाता है। सी.एस.एस1 विनिर्देश का खंड 4 एक "स्वरूपण मॉडल" को परिभाषित करता है जो ब्लॉक-स्तरीय तत्व देता है - जैसे  और  —एक चौड़ाई और ऊंचाई, और इसके आसपास के तीन स्तर के बॉक्स: पैडिंग, बॉर्डर और मार्जिन। जबकि विनिर्देश शब्द "बॉक्स मॉडल" का स्पष्ट रूप से उपयोग नहीं करता है, यह शब्द वेब विकासकर्ता और वेब ब्राउज़र विक्रेताओं द्वारा व्यापक रूप से उपयोग किया जाता है।

सभी एच.टी.एम.एल तत्वों को "बॉक्स" माना जा सकता है, इसमें   उपनाम,   उपनाम, या   उपनाम समिलित हैं। उनमें से प्रत्येक बॉक्स में पाँच परिवर्तनीय आयाम हैं:


 * और  बॉक्स की वास्तविक सामग्री (पाठ, चित्र, ...) के आयामों का वर्णन करते है।
 * इस सामग्री और बॉक्स की सीमा के बीच की जगह का वर्णन करता है।
 * बॉक्स के चारों ओर किसी भी प्रकार की रेखा (ठोस, बिंदीदार, धराशायी ...), यदि मौजूद हो, है।
 * सीमा के आसपास का स्थान है।

1996 में W3C द्वारा जारी और 1999 में संशोधित सी.एस.एस1 विनिर्देश के अनुसार, जब किसी ब्लॉक-स्तरीय तत्व के लिए चौड़ाई या ऊंचाई स्पष्ट रूप से निर्दिष्ट की जाती है, तो इसे केवल दृश्य तत्व की चौड़ाई या ऊंचाई निर्धारित करनी चाहिए, जिसमें पैडिंग, बॉर्डर, और बाद में लागू मार्जिन। सी.एस.एस3 से पहले, इस बॉक्स मॉडल को W3C बॉक्स मॉडल के रूप में जाना जाता था, सी.एस.एस3 में इसे  के रूप में जाना जाता है।

एक बॉक्स की कुल चौड़ाई इसलिए  +   +   +   +   +   +  है। इसी प्रकार, एक बॉक्स की कुल ऊंचाई   +   +   +   +   +   +   के  बराबर होती है

उदाहरण के लिए, निम्नलिखित सीएसएस कोड 'myClass' से संबंधित प्रत्येक ब्लॉक के बॉक्स आयाम निर्दिष्ट करेगा। इसके अलावा, ऐसे प्रत्येक बॉक्स की कुल ऊंचाई 160 पिक्सेल और चौड़ाई 260 पिक्सेल होगी।

सी.एस.एस3 ने इंटरनेट एक्सप्लोरर बॉक्स मॉडल को मानक के रूप में प्रस्तुत किया, जिसे कहा जाता है।

इतिहास
एच.टी.एम.एल 4 और सी.एस.एस से पहले, बहुत कम एच.टी.एम.एल तत्व बॉर्डर और पैडिंग दोनों का समर्थन करते थे, इसलिए किसी तत्व की चौड़ाई और ऊंचाई की परिभाषा बहुत विवादास्पद नहीं थी। हालाँकि, यह तत्व के आधार पर भिन्न होता है। किसी तालिका की एच.टी.एम.एल चौड़ाई विशेषता उसकी सीमा सहित तालिका की चौड़ाई को परिभाषित करती है। दूसरी ओर, छवि की एच.टी.एम.एल चौड़ाई विशेषता छवि की चौड़ाई को परिभाषित करती है (किसी भी सीमा के भीतर)। उन आरम्भिक दिनों में पैडिंग का समर्थन करने वाला एकमात्र तत्व टेबल सेल था। सेल के लिए "चौड़ाई को सेल पैडिंग को छोड़कर पिक्सेल में सेल सामग्री के लिए सुझाई गई चौड़ाई" के रूप में परिभाषित किया गया था। 1996 में, सी.एस.एस कई और तत्वों के लिए मार्जिन, बॉर्डर और पैडिंग को प्रस्तावित किया। इसने टेबल सेल के समान सामग्री, सीमा, मार्जिन और पैडिंग के संबंध में एक परिभाषा चौड़ाई को अपनाया। इसके बाद से इसे W3C बॉक्स मॉडल के रूप में जाना जाने लगा।

उस समय, बहुत कम ब्राउज़र विक्रेताओं ने अक्षर के लिए W3C बॉक्स मॉडल लागू किया था। उस समय के दो प्रमुख ब्राउज़र, नेटस्केप 4.0 और इंटरनेट एक्सप्लोरर 4.0 दोनों ने चौड़ाई और ऊंचाई को सीमा से सीमा तक की दूरी के रूप में परिभाषित किया। इसे पारंपरिक या इंटरनेट एक्सप्लोरर बॉक्स मॉडल कहा गया है।

"विचित्र मोड" में इंटरनेट एक्सप्लोरर में निर्दिष्ट चौड़ाई या ऊंचाई के भीतर सामग्री, पैडिंग और सीमाएं समिलित हैं; इसका परिणाम मानक व्यवहार का अनुसरण करने की तुलना में बॉक्स के संकीर्ण या छोटे प्रतिपादन में होता है।

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

समाधान
यदि पृष्ठ में कुछ एच.टी.एम.एल दस्तावेज़ प्रकार की घोषणाएँ हैं, तो Internet Explorer संस्करण Internet Explorer 6 और आगे बग से प्रभावित नहीं होते हैं। पश्चगामी संगतता के कारणों के लिए quirks मोड में होने पर ये संस्करण बग्गी व्यवहार को बनाए रखते हैं। उदाहरण के लिए, quirks मोड ट्रिगर किया गया है:

W3C बॉक्स मॉडल का उपयोग करके वेब पेजों को प्रदर्शित करने के लिए Internet Explorer संस्करण 5 और इससे पहले के संस्करण को बाध्य करने के लिए कई समाधान तैयार किए गए हैं। ब्राउज़र से कुछ नियमों को छिपाने के लिए ये वर्कअराउंड आमतौर पर Internet Explorer के सी.एस.एस चयनकर्ता प्रसंस्करण में असंबंधित बग का शोषण करते हैं। इन वर्कअराउंड्स में सबसे अच्छी तरह से जाना जाने वाला बॉक्स मॉडल हैक टैंटेक सेलिक द्वारा विकसित किया गया है, जो माइक्रोसॉफ्ट के एक पूर्व कर्मचारी हैं, जिन्होंने मैकिंटोश के लिए इंटरनेट एक्सप्लोरर पर काम करते समय इस विचार को विकसित किया था। इसमें विंडोज़ के लिए इंटरनेट एक्सप्लोरर के लिए चौड़ाई घोषणा निर्दिष्ट करना समिलित है, और उसके बाद सीएसएस-अनुरूप ब्राउज़रों के लिए इसे किसी अन्य चौड़ाई घोषणा के साथ ओवरराइड करना समिलित है। यह दूसरी घोषणा विंडोज़ के लिए इंटरनेट एक्सप्लोरर से अन्य बगों का शोषण करके छिपी हुई है जिस तरह से यह सीएसएस नियमों को पार करती है। इन सी.एस.एस हैक्स का कार्यान्वयन Internet Explorer 7 के सार्वजनिक रिलीज़ द्वारा और जटिल हो गया है, जिसमें कुछ समस्याओं को ठीक किया गया है, लेकिन अन्य को नहीं, जिससे इन हैक्स का उपयोग करने वाले पृष्ठों में अवांछित परिणाम उत्पन्न हुए हैं।
 * जब दस्तावेज़ प्रकार की घोषणा अनुपस्थित या अपूर्ण हो;
 * जब कोई एच.टी.एम.एल 3 या पहले का दस्तावेज़ मिलता है;
 * जब एक एच.टी.एम.एल 4.0 संक्रमणकालीन या फ़्रेमसेट दस्तावेज़ प्रकार की घोषणा का उपयोग किया जाता है और एक सिस्टम आइडेंटिफ़ायर (URI) मौजूद नहीं होता है;
 * जब एक एसजीएमएल टिप्पणी या अन्य अपरिचित सामग्री दस्तावेज़ प्रकार की घोषणा से पहले प्रकट होती है
 * यदि दस्तावेज़ प्रकार की घोषणा से पहले कोई XML घोषणा होती है, तो Internet Explorer 6 भी quirks मोड का उपयोग करता है।

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

इंटरनेट एक्सप्लोरर के बॉक्स मॉडल
के लिए समर्थन वेब डिजाइनर डग बोमन ने कहा है कि मूल इंटरनेट एक्सप्लोरर बॉक्स मॉडल एक बेहतर, अधिक तार्किक दृष्टिकोण का प्रतिनिधित्व करता है। पीटर-पॉल कोच एक भौतिक बॉक्स का उदाहरण देते हैं, जिसका आयाम हमेशा संभावित पैडिंग सहित बॉक्स को ही संदर्भित करता है, लेकिन इसकी सामग्री को कभी नहीं। उनका कहना है कि यह बॉक्स मॉडल ग्राफिक डिजाइनरों के लिए अधिक उपयोगी है, जो अपनी सामग्री की चौड़ाई के बजाय बॉक्स की दृश्यमान चौड़ाई के आधार पर डिजाइन बनाते हैं। बर्नी ज़िम्मरमैन का कहना है कि इंटरनेट एक्सप्लोरर बॉक्स मॉडल एच.टी.एम.एल तालिका मॉडल में उपयोग किए जाने वाले सेल आयामों और पैडिंग की परिभाषा के करीब है। W3C ने सी.एस.एस3 में एक बॉक्स-साइज़िंग गुण समिलित किया है। कब  एक तत्व के लिए निर्दिष्ट किया गया है, तत्व की कोई भी गद्दी या सीमा निर्दिष्ट चौड़ाई और ऊंचाई के अंदर खींची जाती है, जैसा कि आमतौर पर लीगेसी एच.टी.एम.एल उपयोगकर्ता एजेंटों द्वारा कार्यान्वित किया जाता है। Internet Explorer 8, WebKit ब्राउज़र जैसे कि Safari (वेब ​​ब्राउज़र) 5.1+ और Google Chrome, Gecko (लेआउट इंजन) | Gecko- आधारित ब्राउज़र जैसे Mozilla Firefox 29.0 और बाद में, Opera (वेब ​​ब्राउज़र) 7.0 और बाद का संस्करण, और Konqueror 3.3। 2 और बाद में सी.एस.एस3 बॉक्स-साइज़िंग गुण का समर्थन करता है। 29.0 से पहले के गेको ब्राउज़र ब्राउज़र-विशिष्ट का उपयोग करके समान कार्यक्षमता का समर्थन करते हैं   संपत्ति।   बूटस्ट्रैप (फ्रंट-एंड फ्रेमवर्क) में उपयोग किया जाने वाला डिफ़ॉल्ट बॉक्स मॉडल है।

बाहरी संबंध

 * The world wide web consortium (W3C) specification of the box model
 * A tutorial on the सी.एस.एस box model
 * Tantek Çelik's description of the "box model hack"
 * Getting Internet Explorer to Play Well with सी.एस.एस - article on about.com that outlines various ways to get around box model problem and other IE bugs.
 * Cascading Style Sheet Compatibility in Internet Explorer 7 - MSDN article, July 2006.
 * सी.एस.एस Box Model differences in Firefox and Internet Explorer - Further explanation of the rendering differences between Mozilla Firefox and Internet Explorer.