CSS
लेआउट नियंत्रण

वाक्य - विन्यास

• प्रदर्शन: कोई नहीं | इनलाइन | ब्लॉक | सूची-आइटम | इनलाइन-सूची-आइटम | इनलाइन-ब्लॉक | इनलाइन-टेबल | तालिका | टेबल-सेल | तालिका-स्तंभ | तालिका-स्तंभ-समूह | तालिका-पाद-समूह | तालिका-हेडर-समूह | तालिका-पंक्ति | तालिका-पंक्ति-समूह | फ्लेक्स | इनलाइन-फ्लेक्स | ग्रिड | इनलाइन-ग्रिड | रन-इन | माणिक | माणिक-आधार | माणिक-पाठ | माणिक-आधार-कंटेनर | माणिक-पाठ-कंटेनर | सामग्री;

पैरामीटर

प्रदर्शन संपत्ति

display सीएसएस संपत्ति HTML दस्तावेज़ के लेआउट और प्रवाह को नियंत्रित करने के लिए मौलिक है। अधिकांश तत्वों में block या inline का डिफ़ॉल्ट display मूल्य होता है (हालांकि कुछ तत्वों में अन्य डिफ़ॉल्ट मान होते हैं)।

पंक्ति में

एक inline तत्व केवल उतनी ही चौड़ाई रखता है जितनी आवश्यक हो। यह एक ही प्रकार के अन्य तत्वों के साथ क्षैतिज रूप से ढेर हो जाता है और इसमें अन्य गैर-इनलाइन तत्व शामिल नहीं हो सकते हैं।

<span>This is some <b>bolded</b> text!</span>

जैसा कि ऊपर दिखाया गया है, दो inline तत्व, <span> और <b> , इन-लाइन (इसलिए नाम) हैं और पाठ के प्रवाह को नहीं तोड़ते हैं।

खंड मैथा

एक block तत्व अपने मूल तत्व की अधिकतम उपलब्ध चौड़ाई पर कब्जा कर लेता है। यह एक नई लाइन से शुरू होता है और, inline तत्वों के विपरीत, इसमें उस प्रकार के तत्वों को प्रतिबंधित नहीं किया जा सकता है, जिसमें यह हो सकता है।

<div>Hello world!</div><div>This is an example!</div>

div तत्व डिफ़ॉल्ट रूप से ब्लॉक-लेवल है, और जैसा कि ऊपर दिखाया गया है, दो block एलिमेंट्स लंबवत रूप से स्टैक्ड हैं और inline तत्वों के विपरीत, टेक्स्ट का प्रवाह टूट जाता है।

इनलाइन ब्लॉक

inline-block मूल्य हमें दोनों दुनिया का सबसे अच्छा देता है: यह तत्व को पाठ के प्रवाह के साथ मिश्रित करता है जबकि हमें padding , margin , height और समान गुणों का उपयोग करने की अनुमति देता है जिसका inline तत्वों पर कोई दृश्य प्रभाव नहीं होता है।

इस प्रदर्शन मूल्य वाले तत्व ऐसे होते हैं जैसे वे नियमित पाठ थे और परिणामस्वरूप पाठ के प्रवाह को नियंत्रित करने वाले नियमों से प्रभावित होते हैं जैसे कि text-align । डिफ़ॉल्ट रूप से वे अपनी सामग्री को समायोजित करने के लिए संभव सबसे छोटे आकार में सिकुड़ते हैं।

<!--Inline: unordered list-->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--block: unordered list-->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--Inline-block: unordered list-->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px; 

    border-width:2px;
    border-color:black;
    border-style:solid;
    }

</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

कोई नहीं

एक तत्व जिसे इसकी प्रदर्शन संपत्ति में से कोई भी मूल्य नहीं दिया जाता है, उसे बिल्कुल भी प्रदर्शित नहीं किया जाएगा।

उदाहरण के लिए के एक div-तत्व के एक आईडी है कि बनाएँ myDiv :

<div id="myDiv"></div>

इसे अब निम्नलिखित सीएसएस नियम द्वारा प्रदर्शित नहीं किया जा सकता है:

#myDiv {
    display: none;
}

जब एक तत्व को display:none; करने के लिए सेट किया गया है display:none; ब्राउज़र उस विशिष्ट तत्व ( position और float दोनों) के लिए हर दूसरे लेआउट संपत्ति की उपेक्षा करता है। उस तत्व के लिए कोई बॉक्स प्रस्तुत नहीं किया जाएगा और html में इसका अस्तित्व निम्नलिखित तत्वों की स्थिति को प्रभावित नहीं करता है।

ध्यान दें कि यह visibility गुण को hidden जाने से अलग है। visibility: hidden; स्थापना visibility: hidden; एक तत्व के लिए पृष्ठ पर तत्व प्रदर्शित नहीं होगा, लेकिन तत्व अभी भी प्रतिपादन प्रक्रिया में जगह ले लेगा जैसे कि यह दिखाई देगा। इसलिए यह प्रभावित करेगा कि पृष्ठ पर निम्नलिखित तत्व कैसे प्रदर्शित होते हैं।

प्रदर्शन संपत्ति के लिए none मूल्य आमतौर पर जावास्क्रिप्ट के साथ-साथ तत्वों को दिखाने या छिपाने के लिए उपयोग नहीं किया जाता है, जिससे वास्तव में उन्हें हटाने और फिर से बनाने की आवश्यकता समाप्त हो जाती है।

डिव का उपयोग करके पुरानी तालिका संरचना प्राप्त करना

यह सामान्य HTML तालिका संरचना है

<style>
    table {
        width: 100%;
    }
</style>

<table>
  <tr>
    <td>
        I'm a table
    </td>
  </tr>
</table>

आप इस तरह से एक ही कार्यान्वयन कर सकते हैं

<style>
    .table-div {
        display: table;
    }
    .table-row-div {
        display: table-row;
    }
    .table-cell-div {
        display: table-cell;
    }
</style>

<div class="table-div>
  <div class="table-row-div>
    <div class="table-cell-div>
      I behave like a table now
    </div>
  </div>
</div>