दस्तावेज़ ट्री में प्रत्येक तत्व के लिए विज़ुअल स्वरूपण मॉडल के तहत संसाधित करने के बाद एक या अधिक बॉक्स उत्पन्न होते हैं। एक जेनरेट किए गए बॉक्स में कुछ सीएसएस गुण जुड़े होते हैं और तदनुसार एचटीएमएल में प्रस्तुत किया जाता है।
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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
