अरे, अद्भुत लोग! मेरे ब्लॉग पर पुनः आपका स्वागत है। ? आज, हम सीएसएस बॉक्स मॉडल में गहराई से गोता लगा रहे हैं, इस रहस्य को उजागर कर रहे हैं कि प्रत्येक तत्व का आकार कैसे निर्धारित किया जाता है और आप इस ज्ञान का उपयोग सटीक, आधुनिक और स्वच्छ डिज़ाइन बनाने के लिए कैसे कर सकते हैं (इस आलेख के अंत में वास्तविक दुनिया के उदाहरण)।

बॉक्स मॉडल का परिचय

सीएसएस बॉक्स मॉडल वेब डिज़ाइन के लिए मौलिक है, जो यह निर्धारित करता है कि प्रत्येक HTML तत्व वेबपेज में कैसे स्थान लेता है।

बॉक्स मॉडल घटकों का विस्तृत विवरण

1. सामग्री : यह बॉक्स की वास्तविक सामग्री है, जहां पाठ, चित्र और अन्य तत्व बैठते हैं। इसका आकार चौड़ाई और ऊंचाई गुणों द्वारा परिभाषित किया गया है।

2. पैडिंग : यह सीमा के भीतर, सामग्री के चारों ओर का स्थान है। जब तक अन्यथा स्टाइल न किया जाए, पैडिंग पारदर्शी होती है।

3. Border : यह पैडिंग और सामग्री के चारों ओर लपेटता है। इसे चौड़ाई, शैली (उदाहरण के लिए, ठोस, धराशायी) और रंग के साथ स्टाइल किया जा सकता है।

4. Margin : यह सीमा के बाहर का स्थान है। यह पारदर्शी भी है और तत्वों के बीच अंतर को प्रभावित करता है

द बॉक्स मॉडल इन एक्शन:

.example {
    width: 200px; /* Content width */
    height: 100px;
    padding: 10px; /* Adds 20px to both width and height */
    border: 5px solid #000; /* Adds 10px to both width and height */
    margin: 20px; /* Does not contribute to the element's dimensions but affects layout */
}

• कुल चौड़ाई गणना : 200px (सामग्री) 20px (पैडिंग) 10px (बॉर्डर) = 230px

• कुल ऊंचाई गणना : 100px 20px 10px = 130px

सामान्य गलतफहमियां

• चौड़ाई/ऊंचाई केवल सामग्री को प्रभावित करती है : कई लोग मानते हैं कि चौड़ाई या ऊंचाई निर्धारित करना कुल आकार को परिभाषित करता है, लेकिन यह केवल सामग्री क्षेत्र है।

• बॉक्स साइजिंग: बॉक्स-साइजिंग के बिना: बॉर्डर-बॉक्स, पैडिंग या बॉर्डर जोड़ने से एक तत्व अपनी निर्धारित चौड़ाई/ऊंचाई से आगे बढ़ जाता है।

बॉक्स मॉडल की कल्पना: कल्पना करें कि आपके पास उपरोक्त आयामों वाला एक बॉक्स है। यहाँ एक दृश्य विश्लेषण है:

.box {
    background-color: #f0f0f0;
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid #000;
    margin: 30px;
}

• सामग्री क्षेत्र : 300x150px (ग्रे क्षेत्र)

• पैडिंग : लगभग 20px जोड़ता है, आकार को 340x190px तक बढ़ाता है

• बॉर्डर : पैडिंग को घेरता है, जिससे अंतिम बॉक्स का आकार 360x210px हो जाता है

• Margin : सीमा के चारों ओर जगह बनाता है, लेकिन सीधे तत्व के आयामों की गणना नहीं करता है।

उन्नत बॉक्स मॉडल तकनीक

बॉक्स-साइजिंग प्रॉपर्टी: बॉक्स-साइजिंग का उपयोग करना: बॉर्डर-बॉक्स पैडिंग और बॉर्डर को निर्दिष्ट चौड़ाई/ऊंचाई में शामिल करता है, डिजाइन को सुव्यवस्थित करता है:

* { box-sizing: border-box;}

यह घोषणा सभी तत्वों पर लागू होगी, जिससे आकार की गणना अधिक सहज हो जाएगी।

• प्रतिशत मान : जब पैडिंग या मार्जिन के साथ उपयोग किया जाता है, तो प्रतिशत की गणना युक्त तत्व की चौड़ाई के सापेक्ष की जाती है।

• ऑटो मार्जिन: मार्जिन सेट करना: ऑटो तत्वों को क्षैतिज रूप से केंद्रित कर सकता है (या यदि फ्लेक्सबॉक्स का उपयोग किया जाता है तो लंबवत)।

बॉक्स मॉडल और लेआउट विचार

• फ्लोट्स : फ्लोट वाले तत्व अप्रत्याशित व्यवहार का कारण बन सकते हैं जहां मार्जिन ढह जाता है या ओवरलैप हो जाता है।

• फ्लेक्सबॉक्स और ग्रिड: ये आधुनिक लेआउट विधियां मार्जिन को अलग तरीके से संभालती हैं। उदाहरण के लिए, फ्लेक्स कंटेनर या ग्रिड सेल में मार्जिन कम नहीं होता है, जैसा कि ब्लॉक-स्तरीय तत्वों के साथ हो सकता है।

• ओवरलैपिंग तत्व : जेड-इंडेक्स और पोजिशनिंग को समझने से तत्वों के ओवरलैप होने पर गहराई को प्रबंधित करने में मदद मिलती है।

प्रभावी बॉक्स मॉडल उपयोग के लिए युक्तियाँ

• संगति के लिए डिज़ाइन: आकार गणना त्रुटियों से बचने के लिए अपने प्रोजेक्ट में लगातार बॉक्स-आकार का उपयोग करें।

• उत्तरदायी डिज़ाइन : याद रखें कि पैडिंग और मार्जिन कैसे पैमाने पर होते हैं। पैडिंग के लिए प्रतिशत मान विभिन्न स्क्रीन आकारों में अनुपात बनाए रखने में मदद कर सकते हैं।

• डिबगिंग : यदि कोई तत्व अपेक्षा से बड़ा या छोटा दिखाई देता है, तो अपनी पैडिंग, बॉर्डर और मार्जिन सेटिंग्स जांचें।

• आउटलाइन का उपयोग: सीमाओं के विपरीत, आउटलाइन तत्व के आयामों को प्रभावित नहीं करती है, जो कुछ यूआई डिज़ाइन में उपयोगी हो सकती है।

वास्तविक दुनिया का अनुप्रयोग

1.उत्तरदायी कार्ड लेआउट / कृपया कोडपेन पर कोड की जांच करें।

स्पष्टीकरण:

• बॉक्स-आकार : बॉक्स-आकार सेट करना: बॉर्डर-बॉक्स; यह सुनिश्चित करता है कि पैडिंग कुल चौड़ाई और ऊंचाई में नहीं जुड़ती है, जो प्रतिक्रियाशील डिज़ाइन को सरल बनाती है।

• कार्ड लेआउट : .कार्ड क्लास एक कंटेनर को एक निश्चित चौड़ाई, गोल कोनों और गहराई के लिए एक छाया के साथ परिभाषित करता है।

• कार्ड छवि : ऊंचाई द्वारा निर्धारित आयामों वाली छवि के लिए प्लेसहोल्डर के रूप में कार्य करता है।

• कार्ड सामग्री: यहां, सामग्री को बॉर्डर से अलग करने के लिए पैडिंग का उपयोग किया जाता है। यह वह जगह है जहां आप बॉक्स मॉडल को कार्य करते हुए देखते हैं; पैडिंग कार्ड के अंदर क्लिक करने योग्य क्षेत्र को बढ़ाती है लेकिन कार्ड की घोषित चौड़ाई में नहीं जुड़ती है।

• मार्जिन : कार्ड के भीतर तत्वों को स्थान देने के लिए .कार्ड-शीर्षक और .कार्ड-टेक्स्ट में सूक्ष्मता से उपयोग किया जाता है।

• बटन : एक विशिष्ट कॉल-टू-एक्शन की तरह दिखने के लिए स्टाइल किया गया है, जिसमें होवर प्रभाव सीएसएस संक्रमण प्रदर्शित करते हैं।

2.सरल ब्लॉग पोस्ट सूची / कृपया कोडपेन पर कोड की जांच करें।

यदि आपको इस उदाहरण पर किसी स्पष्टीकरण की आवश्यकता है तो मुझे बताएं! मुझे टिप्पणियों में आपकी मदद करने में खुशी होगी!

निष्कर्ष

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

? नमस्ते, मैं एलेफ्थेरिया, सामुदायिक प्रबंधक, डेवलपर, सार्वजनिक वक्ता और सामग्री निर्माता हूं।

? यदि आपको यह लेख पसंद आया, तो इसे साझा करने पर विचार करें।

? सभी लिंक | एक्स | लिंक्डइन