बॉक्स मॉडल

सीएसएस पॉडकास्ट - 001: The Box Model

मान लें कि आपके पास इतना एचटीएमएल है:

<p>I am a paragraph of text that has a few words in it.</p>

फिर, आप इसके लिए यह सीएसएस लिखें:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

ऊपर बताई गई 100 पिक्सल की चौड़ाई के बजाय, कॉन्टेंट 142 पिक्सल चौड़ा है और यह आपके एलिमेंट को ब्रेक करते हैं. ऐसा क्यों है?

बॉक्स मॉडल, सीएसएस का मुख्य आधार होता है. यह समझना कि बॉक्स मॉडल और सीएसएस के दूसरे पहलुओं पर इसका क्या असर पड़ता है. साथ ही, अहम बात यह है कि उस सीएसएस को कंट्रोल करने और उसका अनुमान लगाने में मदद करने के लिए, इस्तेमाल किए जा सकते हैं.

ध्यान रखें कि सीएसएस में जो भी दिखाया जाता है वह एक बॉक्स के तौर पर दिखता है, भले ही यह बस कुछ लेख है या इसमें border-radius है जो इसे वृत्त जैसा दिखाता है.

कॉन्टेंट और साइज़

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

आप बाहरी आकार के ज़रिए इसे नियंत्रित कर सकते हैं या आप मूल आकार का इस्तेमाल कर सकते हैं ताकि ब्राउज़र आपके लिए कॉन्टेंट के साइज़ के आधार पर फ़ैसले ले सके.

अंतर के बारे में जानने के लिए, यहां एक सामान्य डेमो दिया गया है:

डेमो में यह लिखा गया है: "सीएसएस शानदार है" फ़िक्स डाइमेंशन वाले बॉक्स में और मोटा बॉर्डर. बॉक्स की चौड़ाई तय है, इसलिए इसका साइज़ बाहरी है. इसका मतलब है कि यह अपने चाइल्ड कॉन्टेंट के साइज़ को कंट्रोल करता है. हालांकि, शब्द "बहुत बढ़िया" बॉक्स के लिए बहुत बड़ा है, इसलिए यह पैरंट बॉक्स से बाहर निकलता है बॉर्डर बॉक्स (इसके बारे में बाद में ज़्यादा जानकारी दी गई है). इस ओवरफ़्लो को रोकने का एक तरीका यह है कि बॉक्स को मूल आकार में या तो चौड़ाई सेट न करके, या इस मामले में, width को min-content पर सेट कर रही हूँ. min-content कीवर्ड, बॉक्स को यह जानकारी देता है उतनी ही चौड़ी होनी चाहिए जितनी कि मूल सामग्री की कम से कम चौड़ाई (शब्द "बहुत बढ़िया"). इससे बॉक्स, टेक्स्ट के आस-पास पूरी तरह फ़िट हो जाता है.

यहां एक ज़्यादा जटिल उदाहरण दिया गया है, जो अलग-अलग साइज़ के असर को दिखाता है सामग्री:

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

डिफ़ॉल्ट रूप से, इस एलिमेंट में 400px का width और height सेट होता है. ये डाइमेंशन, एलिमेंट के अंदर मौजूद हर चीज़ पर सख्त बाउंड देते हैं. जैसे: सम्मानित नहीं किया जाता जब तक कि सामग्री बॉक्स के लिए बहुत बड़ी न हो. इसका मतलब है कि फूलों की तस्वीर के नीचे कैप्शन को बदलकर ऐसा किया जा सकता है जो बॉक्स की ऊंचाई.

मुख्य शब्द: ओवरफ़्लो तब होता है, जब बॉक्स में मौजूद कॉन्टेंट के हिसाब से कॉन्टेंट बहुत बड़ा होता है. आप यह मैनेज किया जा सकता है कि कोई एलिमेंट, overflow प्रॉपर्टी का इस्तेमाल करके ओवरफ़्लो कॉन्टेंट को कैसे मैनेज करे.

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

यह याद रखना ज़रूरी है कि इंट्रेंसिक साइज़िंग, ब्राउज़र की डिफ़ॉल्ट साइज़ है व्यवहार है. आम तौर पर, इसमें बाहरी साइज़ के मुकाबले ज़्यादा आसानी होती है.

बॉक्स मॉडल के एरिया

बॉक्स में अलग-अलग बॉक्स मॉडल एरिया होते हैं, जो एक खास काम करते हैं.

कॉन्टेंट बॉक्स वह हिस्सा होता है जिसमें कॉन्टेंट मौजूद है. कॉन्टेंट ये काम कर सकता है: अपने पैरंट के साइज़ को कंट्रोल करते हैं, इसलिए आम तौर पर इस साइज़ में सबसे ज़्यादा फ़र्क़ होता है.

पैडिंग बॉक्स, कॉन्टेंट बॉक्स के आस-पास होता है. यह वह जगह होती है जिसे कॉन्टेंट बॉक्स ने बनाया है padding प्रॉपर्टी. पैडिंग (जगह) बॉक्स के अंदर है, इसलिए स्पेस में बॉक्स का बैकग्राउंड दिखता है यह बनाता है. अगर बॉक्स में ओवरफ़्लो नियम सेट हैं, जैसे कि overflow: auto या overflow: scroll, स्क्रोलबार भी इस स्पेस को घेरते हैं.

बॉर्डर बॉक्स पैडिंग बॉक्स के चारों ओर होता है और इसकी जगह border वैल्यू, जो एंड स्क्रीन पर एलिमेंट के लिए विज़ुअल फ़्रेम बनाता है. एलिमेंट का बॉर्डर किनारे की सीमा तय होती है.

आखिरी एरिया, मार्जिन बॉक्स, आपके बॉक्स के आस-पास की जगह होती है. इसे बॉक्स का margin नियम. प्रॉपर्टी outline और box-shadow वे इस जगह में भी आ सकते हैं, क्योंकि वे एलिमेंट के ऊपर पेंट किए गए हैं और बॉक्स के साइज़ पर असर डाल सकता है. आपके बॉक्स की 200px में से outline-width बदलने की सुविधा चालू है बॉक्स बॉर्डर किनारे के अंदर कुछ भी नहीं बदलता है.

उपयोगी तुलना

बॉक्स मॉडल को समझना मुश्किल है. इसलिए, यहां देखें कि आपको अभी तक बहुत कुछ सीख लिया है.

इस डायग्राम में, आपने फ़ोटो फ़्रेम की मदद से दीवार. फ़्रेम की गई इमेज के एलिमेंट बॉक्स मॉडल के हिसाब से होते हैं, जैसे कि:

• कॉन्टेंट बॉक्स में आर्टवर्क होता है.
• पैडिंग बॉक्स, दीवार पर लगने वाला सफ़ेद बोर्ड होता है. यह फ़्रेम और आर्टवर्क के बीच में होता है.
• बॉर्डर बॉक्स फ़्रेम होता है, जो आर्टवर्क के लिए टेक्स्ट वाला बॉर्डर होता है.
• मार्जिन बॉक्स, फ़्रेम के बीच के स्पेस को कहते हैं.
• शैडो, मार्जिन बॉक्स के बराबर जगह ले लेता है.

बॉक्स मॉडल को डीबग करें

ब्राउज़र DevTools, चुने गए बॉक्स के बॉक्स मॉडल का विज़ुअलाइज़ेशन देता है कैलकुलेशन, जिनकी मदद से यह समझा जा सकता है कि बॉक्स मॉडल कैसे काम करता है और उस वेबसाइट को प्रभावित करता है जिस पर आप काम कर रहे हैं.

इसे अपने ब्राउज़र में आज़माएं:

1. DevTools खोलें.
2. कोई एलिमेंट चुनें.
3. बॉक्स मॉडल डीबगर दिखाएं.

बॉक्स मॉडल को कंट्रोल करें

बॉक्स मॉडल को कंट्रोल करने का तरीका जानने के लिए, आपको सबसे पहले यह समझना होगा कि आपके ब्राउज़र में क्या होता है.

हर ब्राउज़र, उन एचटीएमएल दस्तावेज़ों पर उपयोगकर्ता एजेंट स्टाइल शीट लागू करता है जो अगर एलिमेंट में सीएसएस तय नहीं की गई है, तो उन्हें कैसा दिखना चाहिए और कैसा व्यवहार करना चाहिए. इस सीएसएस में मौजूद सीएसएस अलग-अलग ब्राउज़र के लिए उपयोगकर्ता एजेंट की स्टाइल शीट अलग-अलग होती हैं, लेकिन उनका इस्तेमाल सही तरीके से होता है डिफ़ॉल्ट तौर पर सेट कर देती है, ताकि कॉन्टेंट को आसानी से पढ़ा जा सके.

वह प्रॉपर्टी, जिसमें उपयोगकर्ता एजेंट की स्टाइल शीट, बॉक्स का डिफ़ॉल्ट display सेट करती है. इसके लिए उदाहरण के लिए, सामान्य फ़्लो में, <div> एलिमेंट की डिफ़ॉल्ट display वैल्यू यह होती है block, <li> की डिफ़ॉल्ट वैल्यू list-item और <span> की डिफ़ॉल्ट display वैल्यू है की डिफ़ॉल्ट वैल्यू display है. यह वैल्यू inline है.

एक inline एलिमेंट में ब्लॉक मार्जिन है, लेकिन दूसरे एलिमेंट इसका पालन नहीं करते. inline-block के साथ, अन्य एलिमेंट ब्लॉक मार्जिन को मानते हैं, लेकिन पहले एलिमेंट में ज़्यादातर वही व्यवहार हैं जो inline एलिमेंट में थे. block आइटम, डिफ़ॉल्ट रूप से मौजूदा इनलाइन स्पेस को भरता है, जबकि inline और inline-block एलिमेंट उतने ही बड़े होते हैं जितने कि उनका कॉन्टेंट होता है.

उपयोगकर्ता एजेंट की स्टाइल शीट में, box-sizing को भी सेट किया जाता है. इससे एक बॉक्स में, इसके बॉक्स के साइज़ का पता लगाएं. डिफ़ॉल्ट रूप से, सभी एलिमेंट में ये उपयोगकर्ता एजेंट होते हैं स्टाइल: box-sizing: content-box;. इसका मतलब है कि जब डाइमेंशन को width और height के तौर पर ये डाइमेंशन, कॉन्टेंट बॉक्स पर लागू होते हैं. अगर आपको इसके बाद, padding और border को सेट करते हैं, तो ये वैल्यू कॉन्टेंट बॉक्स के साइज़.

देखें कि आपको कितना समझ आया है

प्रॉपर्टी पर असर डालने वाले बॉक्स मॉडल के साइज़ के बारे में अपनी जानकारी को परखें.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

इस बॉक्स की असल चौड़ाई 260 पिक्सल है. सीएसएस डिफ़ॉल्ट box-sizing: content-box का इस्तेमाल करती है, इसलिए लागू की गई चौड़ाई सामग्री की चौड़ाई और padding और border के दोनों ओर जोड़ दिए जाते हैं उसे. कॉन्टेंट के लिए 200 पिक्सल + 40 पिक्सल पैडिंग + 20 पिक्सल बॉर्डर का कुल योग 260 पिक्सल की दिखने वाली चौड़ाई.

border-box का साइज़ तय करके, इसे बदला जा सकता है:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

यह दूसरा बॉक्स मॉडल, सीएसएस को बॉर्डर बॉक्स में width लागू करने का निर्देश देता है कॉन्टेंट बॉक्स पर क्लिक करें. इसका मतलब है कि हमारे border और padding को पुश इन किया, इसलिए जब .my-box को 200px चौड़ा पर सेट किया जाता है, तो यह असल में 200px की चौड़ाई में.

नीचे दिए गए इंटरैक्टिव डेमो में देखें कि यह सुविधा कैसे काम करती है. जब box-sizing वैल्यू, नीला एरिया दिखाता है कि बॉक्स.

*,
*::before,
*::after {
  box-sizing: border-box;
}

यह सीएसएस नियम, दस्तावेज़ के हर एलिमेंट को चुनता है और हर ::before और ::after pseudo एलिमेंट और box-sizing: border-box लागू होता है. इसका मतलब है कि अब हर एलिमेंट इस वैकल्पिक बॉक्स मॉडल का इस्तेमाल करता है.

विकल्प के तौर पर इस्तेमाल किए जा सकने वाले बॉक्स मॉडल का अनुमान लगाना आसान होता है, इसलिए डेवलपर अक्सर रीसेट करने और नॉर्मलाइज़र के तौर पर सेट करने का तरीका बताएंगे, जैसे कि यह.

संसाधन

• बॉक्स मॉडल के बारे में जानकारी
• ब्राउज़र डेवलपर टूल क्या हैं?

उपयोगकर्ता एजेंट की स्टाइलशीट

• Chromium
• Firefox
• वेबकिट