विषय
- #CSS लेआउट
- #BFC
- #ब्लॉक तत्व
- #इनलाइन तत्व
- #IFC
जब हम HTML CSS को डिजाइन करते हैं तो लेआउट उतना अच्छा नहीं बन पाता जितना हम सोचते हैं
मुझे इसे लेकर गूगल पर बहुत सारे सवाल पूछने पड़े थे।
हाल ही में जेरोचो (Jezerocho) के डेवलपर टॉक वीडियो को देखते हुए, मैंने CSS की मूल बातों को समझने का फैसला किया।
- मैं ब्लॉक एलिमेंट, इनलाइन एलिमेंट, मार्जिन और अलाइनमेंट को समझना चाहता हूँ।
हालांकि मैं इनके बारे में पहले से अनुभवजन्य रूप से जानता हूँ, लेकिन उन्हें संक्षेप में लिखना ज़रूरी है।
■ अगर हमें CSS को संशोधित करना है और हम इसे अनुभवजन्य रूप से, अलग-अलग तरीके से लागू करके केवल दिखने के आधार पर लागू करते हैं, तो रिस्पॉन्सिव डिज़ाइन में समस्या आ सकती है या भविष्य में उसे मेंटेन करना मुश्किल हो सकता है।
1. सामान्य प्रवाह (Normal Flow)
- इसमें हमें कुछ ख़ास नहीं सोचना पड़ता। सभी एलिमेंट ऊपर से नीचे और बाएं से दाएं की तरफ व्यवस्थित होते हैं।
* दुर्मिस (durumis) पर जब हम HTML टैग पेस्ट करते हैं तो वह गायब हो जाते हैं। क्या आप इसका हल जानते हैं?;;
- p टैग से दो ब्लॉक बनते हैं और span टैग एक लाइन में बनते हैं।
2. BFC (ब्लॉक फॉर्मेटिंग कॉन्टेक्स्ट)
- इसका इस्तेमाल ज्यादातर लेआउट बनाने के लिए किया जाता है। (ब्लॉक बनाना और उसमें इनलाइन को व्यवस्थित करना।)
- ब्लॉक लेवल एलिमेंट के ढेर लगने का तरीका है।
- ब्लॉक लेवल एलिमेंट इस प्रकार हैं:
<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>
- एलिमेंट के अंदर की सामग्री की लंबाई से कोई फर्क नहीं पड़ता, वह पैरेंट एलिमेंट की पूरी चौड़ाई ले लेता है। (एक लाइन)
- ब्लॉक के अंदर एक और ब्लॉक या इनलाइन एलिमेंट डाला जा सकता है।
- width, height, margin, padding को सेट किया जा सकता है।
- div टैग के अंदर दो लाइनें बनती हैं।
- BFC कब बनता है, यह इस प्रकार है: ज़रूरत पड़ने पर इसे ढूँढ लें।
- जब float प्रॉपर्टी none नहीं होती है।
- जब position प्रॉपर्टी absolute या fixed होती है।
- जब display प्रॉपर्टी inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid होती है।
- जब overflow प्रॉपर्टी visible नहीं होती है, आदि।
3. IFC (इनलाइन फॉर्मेटिंग कॉन्टेक्स्ट)
- ब्लॉक एलिमेंट के अंदर बनाया जाता है। (लाइन के आधार पर नहीं)
- width और height को सीधे सेट नहीं किया जा सकता है। (सामग्री के आकार के अनुसार ही बनता है।)
- केवल क्षैतिज padding और margin लागू किया जा सकता है।
- इनलाइन एलिमेंट के अंदर केवल इनलाइन एलिमेंट ही डाले जा सकते हैं।
<span>, <a>, , <img>, <input> आदि
तो इसका इस्तेमाल कब करते हैं?
- BFC का इस्तेमाल float के आपसी संबंध या margin के ओवरलैप को संभालने के लिए करते हैं।
1. float के आपसी संबंध
- अगर हम बच्चे एलिमेंट पर ज़्यादा स्वतंत्रता वाला स्टाइल लगाते हैं तो पैरेंट एलिमेंट उसे ढँक नहीं पाता।
(float, position absolute, fixed, display inline-block आदि...)
- इस समय, लेआउट बनाने के लिए पैरेंट एलिमेंट पर BFC लगाते हैं।
(पैरेंट टैग पर display: inline-block, overflow: auto, float: left आदि लगाते हैं।)
2. margin ओवरलैप
- CSS में, पास-पास के दो टैग के ऊपर और नीचे के मार्जिन ओवरलैप हो जाते हैं।
उदाहरण) नीचे दिए गए दो div टैग के बीच की ऊपर और नीचे की जगह 150px नहीं, बल्कि 100px होगी।
- ऊपर बताई गई स्थिति में, इन दो टैग के बीच एक नया BFC एलिमेंट डाल देते हैं।
नोट: दुर्मिस (durumis) पर HTML को कॉपी-पेस्ट करने का तरीका क्या है?;;
टिप्पणियाँ0