डॉक्यूमेंट ट्री में प्रत्येक एलिमेंट के लिए विजुअल फॉर्मेटिंग मॉडल के तहत प्रोसेस करने के बाद एक या अधिक बॉक्सेस जनरेट होते हैं। एक जनरेटेड बॉक्स से कुछ CSS प्रॉपर्टीज जुड़ी होती हैं और उसी के अनुसार HTML में रेंडर होता है।
CSS में निम्नलिखित बॉक्सेस जनरेट होते हैं:
- ब्लॉक-लेवल एलिमेंट्स और ब्लॉक बॉक्सेस
- एनोनिमस ब्लॉक बॉक्सेस
- इंलाइन-लेवल एलिमेंट्स और इंलाइन बॉक्सेस
- एनोनिमस इंलाइन बॉक्सेस
उदाहरण
आइए ब्लॉक-लेवल एलिमेंट्स और ब्लॉक बॉक्सेस का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Block-level Elements and Block Boxes</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; box-sizing: border-box; /*margin:5px;*/ } input[type="button"] { border-radius: 10px; } .child{ height: 40px; width: 100%; 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 Block-level Elements and Block Boxes</legend> <div id="container">Color Orange <div class="child"></div>Color Red <div class="child"></div>Color Violet <div class="child"></div> </div><br> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
एक और उदाहरण
आइए इंलाइन-लेवल एलिमेंट्स और इंलाइन बॉक्सेस का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Inline-level Elements and Inline Boxes</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; } input[type="button"] { border-radius: 10px; } .child{ 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 Inline-level Elements and Inline Boxes</legend> <div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
