ब्लॉक-स्तरीय तत्वों का अपना 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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
