सभी HTML एलिमेंट्स का एक डिफ़ॉल्ट डिस्प्ले मान सेट होता है और इसे CSS Display प्रॉपर्टी के साथ ओवरराइड किया जा सकता है, इसी तरह सभी एलिमेंट्स की विजिबिलिटी डिफ़ॉल्ट रूप से visible पर सेट होती है लेकिन इसे CSS Visibility प्रॉपर्टी के साथ ओवरराइड किया जा सकता है।
CSS Display प्रॉपर्टी के लिए निम्नलिखित मान हैं:
| क्र.सं. | मान और विवरण |
|---|---|
| 1 | inline यह एक एलिमेंट को इंलाइन एलिमेंट के रूप में प्रदर्शित करता है (जैसे <span>), यदि परिभाषित किया जाए तो ऊंचाई और चौड़ाई प्रॉपर्टीज का कोई प्रभाव नहीं होगा |
| 2 | block यह एक एलिमेंट को ब्लॉक एलिमेंट के रूप में प्रदर्शित करता है (जैसे <div>) और लाइन ब्रेक फोर्स करता है |
| 3 | contents यह कंटेनर को गायब कर देता है, जिससे चाइल्ड एलिमेंट्स DOM में अगले लेवल के एलिमेंट के चाइल्ड बन जाते हैं |
| 4 | flex यह एक एलिमेंट को ब्लॉक-लेवल फ्लेक्स कंटेनर के रूप में प्रदर्शित करता है |
| 5 | grid यह एक एलिमेंट को ब्लॉक-लेवल ग्रिड कंटेनर के रूप में प्रदर्शित करता है |
| 6 | inline-block यह एक एलिमेंट को इंलाइन-लेवल ब्लॉक कंटेनर के रूप में प्रदर्शित करता है। एलिमेंट स्वयं एक इंलाइन एलिमेंट के रूप में फॉर्मेट होता है, लेकिन ऊंचाई और चौड़ाई मान लागू किए जा सकते हैं |
| 7 | inline-flex यह एक एलिमेंट को इंलाइन-लेवल फ्लेक्स कंटेनर के रूप में प्रदर्शित करता है |
| 8 | inline-grid यह एक एलिमेंट को इंलाइन-लेवल ग्रिड कंटेनर के रूप में प्रदर्शित करता है |
| 9 | inline-table एलिमेंट को इंलाइन-लेवल टेबल के रूप में प्रदर्शित किया जाता है |
| 10 | list-item यह एलिमेंट को <li> एलिमेंट की तरह व्यवहार करने देता है |
| 11 | run-in यह एक एलिमेंट को ब्लॉक या इंलाइन के रूप में प्रदर्शित करता है, संदर्भ पर निर्भर करता है |
| 12 | table यह एलिमेंट को <table> एलिमेंट की तरह व्यवहार करने देता है |
| 13 | table-caption यह एलिमेंट को <caption> एलिमेंट की तरह व्यवहार करने देता है |
| 14 | table-column-group यह एलिमेंट को <colgroup> एलिमेंट की तरह व्यवहार करने देता है |
| 15 | table-header-group यह एलिमेंट को <thead> एलिमेंट की तरह व्यवहार करने देता है |
| 16 | table-footer-group यह एलिमेंट को <tfoot> एलिमेंट की तरह व्यवहार करने देता है |
| 17 | table-row-group यह एलिमेंट को <tbody> एलिमेंट की तरह व्यवहार करने देता है |
| 18 | table-cell यह एलिमेंट को <td> एलिमेंट की तरह व्यवहार करने देता है |
| 19 | table-column यह एलिमेंट को <col> एलिमेंट की तरह व्यवहार करने देता है |
| 20 | table-row यह एलिमेंट को <tr> एलिमेंट की तरह व्यवहार करने देता है |
| 21 | none एलिमेंट पेज पर रेंडर नहीं होता |
| 22 | initial यह इस प्रॉपर्टी को उसके डिफ़ॉल्ट मान पर सेट करता है। |
| 23 | inherit यह परिभाषित करता है कि एलिमेंट की डिस्प्ले प्रॉपर्टी उसके पैरेंट एलिमेंट से ली जाती है। |
आइए CSS display inline-block का एक उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <title>CSS Display Inline-Block</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display-Inline-Block</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
आउटपुट
CSS Visibility प्रॉपर्टी के निम्नलिखित मान हैं:
| क्र.सं. | मान और विवरण |
|---|---|
| 1 | visible यह डिफ़ॉल्ट है, एलिमेंट और उसके चाइल्ड्स विजिबल हैं |
| 2 | hidden यह एलिमेंट को छुपाता है और उसके चाइल्ड्स अदृश्य होते हैं, लेकिन एलिमेंट अभी भी रेंडर होता है और पेज पर उचित जगह दी जाती है |
| 3 | collapse यह केवल टेबल रो (<tr>), रो ग्रुप्स (<tbody>), कॉलम (<col>), कॉलम ग्रुप्स (<colgroup>) के लिए उपयोग किया जाता है। यह मान एक रो या कॉलम को हटा देता है, और रो या कॉलम द्वारा ली गई जगह अन्य कंटेंट के लिए उपलब्ध होगी। यदि अन्य एलिमेंट्स पर उपयोग किया जाता है, तो यह 'hidden' के रूप में रेंडर होता है |
| 4 | initial यह एलिमेंट की विजिबिलिटी को उसके डिफ़ॉल्ट मान पर सेट करता है |
| 5 | inherit यह निर्दिष्ट करता है कि विजिबिलिटी प्रॉपर्टी का मान पैरेंट एलिमेंट से इनहेरिट किया जाना चाहिए |
आइए CSS Visibility प्रॉपर्टी का एक उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <title>CSS Visibility collapse</title> <style> form ,table{ width:70%; margin: 0 auto; text-align: center; } table, th, td { border-collapse: collapse; border: 1px solid black; } thead { background-color: goldenrod; } tbody{ background-color: khaki; } tr:nth-of-type(3){ visibility: collapse; } </style> </head> <body> <form> <fieldset> <legend>CSS-Visibility-collapse</legend> <table> <thead> <tr><th>Name</th><th>Course</th></tr> </thead> <tbody> <tr><td>Joana</td><td>MBA</td></tr> <tr><td>Smith</td><td>B.Arc</td></tr> <tr><td>Xersus</td><td>M.Sc</td></tr> </tbody> </table> </fieldset> </form> </body> </html>
आउटपुट
CSS Visibility collapse लागू नहीं है:
CSS Visibility collapse लागू है:
