HTML CSS को डिजाइन करते समय, लेआउट हमारी उम्मीद के मुताबिक ठीक से नहीं बन पाता है,

इसलिए मैं Google पर बहुत सारे सवाल पूछता रहा हूं।

हाल ही में, मैंने Zerocho के डेवलपर टॉक वीडियो देखा, और मैंने CSS की मूल बातों के बारे में जानने का फैसला किया।

- मैं ब्लॉक एलिमेंट्स, इनलाइन एलिमेंट्स, मार्जिन और अलाइनमेंट को समझना चाहता हूं।

मुझे पहले से ही कुछ अनुभव है, लेकिन इसे व्यवस्थित करने की आवश्यकता है।

■ CSS को संशोधित करने की आवश्यकता है, लेकिन यदि आप अनुभवजन्य रूप से विभिन्न चीजों को लागू करने का प्रयास करते हैं और केवल दिखने में प्रदर्शन करते हैं, तो समस्याएं हो सकती हैं जैसे प्रतिक्रियाशील डिजाइन, या रखरखाव मुश्किल हो सकता है।

1. सामान्य प्रवाह

- विशेष रूप से सोचने की कोई बात नहीं है। सभी तत्व ऊपर से नीचे और बाईं ओर से दाईं ओर रखे जाते हैं।

* जब आप Durumis में पोस्ट लिखते हैं, तो यदि आप HTML टैग पेस्ट करते हैं, तो वे गायब हो जाते हैं, क्या आप समाधान जानते हैं? ;;

 <div>
     <p>पहला पैराग्राफ</p>
     <p>दूसरा पैराग्राफ</p>
     <span>इनलाइन एलिमेंट 1</span>
     <span>इनलाइन एलिमेंट 2</span>

- p टैग से दो ब्लॉक बनते हैं, और span टैग एक पंक्ति में खींचा जाता है।

 पहला पैराग्राफ
 दूसरा पैराग्राफ

2. BFC (ब्लॉक फॉर्मेटिंग कॉन्टेक्स्ट)

- मुख्य रूप से लेआउट बनाने के लिए उपयोग किया जाता है। (ब्लॉक का निर्माण करें, और उसके अंदर इनलाइन का निर्माण करें।)

- ब्लॉक स्तर के तत्वों को ढेर करने का एक तरीका है।

- ब्लॉक स्तर के तत्व इस प्रकार हैं:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- तत्व की सामग्री की लंबाई के बावजूद, यह पैरेंट तत्व की पूरी चौड़ाई लेता है। (एक पंक्ति)

- ब्लॉक के अंदर ब्लॉक या इनलाइन एलिमेंट्स जोड़े जा सकते हैं।

- चौड़ाई, ऊंचाई, मार्जिन, पैडिंग सेट किया जा सकता है।

 <div style="padding :10px;"> 
     <h1>शीर्षक</h1>
     <p>यह एक छोटा पैराग्राफ है। </p>

- div टैग के अंदर दो पंक्तियाँ बनती हैं।

- BFC कब बना है, यह इस प्रकार है। आप इसे तब-तब ढूंढ सकते हैं।

• जब float गुण none नहीं होता है
• जब स्थिति absolute या fixed होती है
• जब प्रदर्शन inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid होता है
• जब अतिप्रवाह दृश्यमान नहीं होता है, आदि
  
  

3. IFC (इनलाइन फॉर्मेटिंग कॉन्टेक्स्ट)

<p>
    नमस्ते! <strong> Durumis </strong> दूसरा लेख है!
    <span style="color: pink;">पसंद करें</button> बटन दबाएं।

- यह ब्लॉक एलिमेंट के अंदर बनाया जाता है। (पंक्ति स्तर X)

- चौड़ाई और ऊँचाई सीधे सेट नहीं की जा सकती है। (सामग्री के आकार का ही उपयोग करता है।)

- केवल क्षैतिज पैडिंग और मार्जिन लागू किए जा सकते हैं।

- इनलाइन एलिमेंट के अंदर केवल इनलाइन एलिमेंट्स ही शामिल किए जा सकते हैं।

<span>, <a>, , <img>, <input> आदि

तो, इसका उपयोग कब करें?

- BFC का उपयोग फ्लोट इंटरैक्शन या मार्जिन ओवरलैप को संभालने के लिए किया जाता है।

1. फ्लोट इंटरैक्शन

- यदि आप बच्चे को एक स्वतंत्र शैली देते हैं, तो माता-पिता उसे ढँक नहीं सकते हैं।

(फ्लोट, पोजीशन एब्सोल्यूट, फिक्स्ड, डिस्प्ले इनलाइन-ब्लॉक आदि...)

- इस समय, हम माता-पिता तत्व पर BFC लगाकर लेआउट बनाते हैं।

(माता-पिता टैग पर प्रदर्शन: इनलाइन-ब्लॉक, ओवरफ्लो: ऑटो, फ्लोट: लेफ्ट आदि लागू करें।)

<div class="माता-पिता" style="display: inline-block;">
    <div class="बच्चा" style="float: left;">...</div>

2. मार्जिन ओवरलैप

- CSS में, आसन्न दो टैगों के ऊपर और नीचे मार्जिन ओवरलैप होते हैं।

उदाहरण) नीचे दिए गए दो div टैग के बीच ऊपर और नीचे का अंतर 150px नहीं है, बल्कि 100px है।

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,

- उपरोक्त स्थिति में, दो टैगों के बीच एक नया BFC तत्व जोड़ा जाता है।

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- नया BFC-->

पुनश्च. क्या आप Durumis में HTML पेस्ट करने का तरीका जानते हैं;;