CSS फ्रेम मॉडल

CSS फ्रेम मॉडल

सभी HTML एलीमेंट को फ़ॉटेज के रूप में देखा जा सकता है।CSS में, डिजाइन और लेआउट की चर्चा करते समय, शब्द “बॉक्स मॉडल” या “फ़्रेम मॉडल” का उपयोग किया जाता है।

CSS बॉक्स मॉडल वास्तव में प्रत्येक HTML एलेमेंट को घेरने वाली बॉक्स है। यह शामिल है: बाहरी मार्ग, किनारा, आंतरिक घाटी और वास्तविक सामग्री। नीचे दिए गए चित्र बॉक्स मॉडल को दर्शाते हैं:

CSS फ्रेम मॉडल

विभिन्न भागों के बारे में स्पष्टीकरण:

  • सामग्री - बॉक्स के मध्य भाग में शामिल सामग्री, जिसमें टेक्स्ट और इमेजेज़ दिखाई देती हैं।
  • आंतरिक घाटी - सामग्री के चारों ओर साफ़ करें। आंतरिक घाटी पारदर्शी है।
  • किनारा - आंतरिक घाटी और सामग्री के चारों ओर किनारा।
  • बाहरी मार्ग - बॉक्स के बाहरी क्षेत्र को साफ़ करें। बाहरी मार्ग पारदर्शी है।

बॉक्स मॉडल हमें एलेमेंट के चारों ओर किनारा जोड़ने और एलेमेंट के बीच की जगह निर्धारित करने की अनुमति देता है।

एलेमेंट बॉक्स का सबसे आगे हिस्सा वास्तविक सामग्री है, सामग्री को आसपास घेरता है आंतरिक घाटी। आंतरिक घाटी के किनारे पर किनारा है। किनारे के बाहर बाहरी मार्ग है, बाहरी मार्ग डिफ़ॉल्ट में पारदर्शी है, इसलिए इसके बाद के किसी भी एलेमेंट को छोड़ देता है।

संकेत:पृष्ठभूमि आंतरिक सामग्री, आंतरिक घाटी और किनारा सहित क्षेत्र पर लागू की जाती है।

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

* {
  मार्गिन: 0;
  padding: 0;
}

CSS में, width और height सामग्री क्षेत्र की चौडाई और ऊंचाई को कहते हैं। आंतरिक घाटी, किनारा और बाहरी मार्ग को जोड़ने से सामग्री क्षेत्र का आकार प्रभावित नहीं होता, लेकिन एलेमेंट बॉक्स का पूर्ण आकार बढ़ जाता है।

आधार करें कि बॉक्स के प्रत्येक किनारे पर 10 पिक्सल का बाहरी मार्ग और 5 पिक्सल का आंतरिक घाटी है। यदि आप इस एलेमेंट बॉक्स को 100 पिक्सल के बनाना चाहते हैं, तो सामग्री की चौडाई को 70 पिक्सल के रूप में सेट करना चाहिए, नीचे दिए गए चित्र देखें:

CSS फ्रेम मॉडल इस्टेंस 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

संकेत:आंतरिक घाटी, किनारा और बाहरी मार्ग को एक एलेमेंट के सभी किनारों पर या एकल किनारे पर लागू किया जा सकता है।

संकेत:बाहरी मार्ग नकारात्मक मान हो सकते हैं और कई मामलों में नकारात्मक बाहरी मार्ग का उपयोग किया जाता है।

उदाहरण

बॉक्स मॉडल दर्शाना:

डिव {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

खुद से प्रयास करें

एलेमेंट की चौडाई और ऊंचाई

सभी ब्राउज़रों में एलेमेंट की चौडाई और ऊंचाई सही तरीके से सेट करने के लिए, आपको जानना होगा कि बॉक्स मॉडल कैसे काम करता है।

महत्वपूर्ण संकेत:एलेमेंट के width और height गुण निर्धारित करते समय, केवल सामग्री क्षेत्र की चौडाई और ऊंचाई निर्धारित करें। एलेमेंट के पूर्ण आकार की गणना करने के लिए, आंतरिक घाटी, किनारा और बाहरी मार्ग को जोड़ना भी आवश्यक है।

उदाहरण

<div> एलेमेंट का कुल चौडाई 350px होगी:

डिव {
  चौड़ाई: 320px;
  पैडिंग: 10px;
  बॉर्डर: 5px सॉलिड ग्रे;
  मार्गिन: 0; 
}

खुद से प्रयास करें

गणना इस प्रकार की है:

320px(चौड़ाई)
+ 20px (बाईं+दायां आंतरिक जीभ)
+ 10px (बाईं+दायां बॉर्डर)
+ 0px (बाईं+दायां बाह्य जीभ)
= 350px

एलिमेंट की कुल चौड़ाई इस तरह गणना की जानी चाहिए:

एलिमेंट की कुल चौड़ाई = चौड़ाई + बाईं आंतरिक जीभ + दायां आंतरिक जीभ + बाईं बॉर्डर + दायां बॉर्डर + बाईं बाह्य जीभ + दायां बाह्य जीभ

एलिमेंट की कुल ऊंचाई इस तरह गणना की जानी चाहिए:

एलिमेंट की कुल ऊंचाई = ऊंचाई + ऊपरी आंतरिक जीभ + नीचे आंतरिक जीभ + ऊपरी बॉर्डर + नीचे बॉर्डर + ऊपरी बाह्य जीभ + नीचे बाह्य जीभ