Layout with the Box Model In Hindi
एचटीएमएल वेब पेज मे सीएसएस स्क्रिप्टिंग से अलग अलग प्रकार के बॉक्स मॉडल को डिज़ाइन क्रिएट कर उपयोग किया जा सकता है। जहा आप सीएसएस का उपयोग से कई प्रकार के विभिन्न बॉक्स मॉडल में सिंपल रेस्पॉन्सिव और फ्लेक्स बॉक्स मॉडल आइटम क्रिएट कर पाएंगे। जिसमे क्रिएटेड बॉक्स मॉडल में इनबिल्ट बॉक्स मॉडल ऐट्रिब्यूट्स और कण्ट्रोल को मॉडिफाई कर पाएंगे। जैसे, बॉक्स मॉडल कंटेंट, बॉक्स पैडिंग, बॉक्स बॉर्डर, बॉक्स मॉडल मार्जिन, बॉक्स मॉडल इंटरनल एक्सटर्नल बॉर्डर और डिफ़ॉल्ट बॉक्स मार्जिन सेटिंग्स को कस्टम अप्लाई और मॉडिफाई कर सकते है।
Components of the default box model in CSS.
- Box model content – यूजर क्रिएटेड बॉक्स मॉडल के अंदर रियल डाटा और इनफार्मेशन को रिप्रेजेंट करता है, जैसे टेक्स्ट, इमेज, बॉक्स डिजिटल कंटेंट और अन्य डिजिटल वेब एलिमेंट है।
- Box model padding – वेब पेज में डिजिटल वेब पेज डिस्प्ले कंटेंट और बॉक्स मॉडल बॉर्डर के अंदर की एम्प्टी स्पेस है, जो कंटेंट और बॉर्डर को आपस में सेपरेट करते है।
- Box model border – वेब पेज में बॉक्स मॉडल बॉर्डर पैडिंग और वेब कंटेंट के सर्राउंड डिस्प्ले बॉर्डर है, जिसे कस्टम एडिट कर डिस्प्ले किया जाता है।
- Box model margin – मौजूदा वेब पेज में डिजिटल कंटेंट में बॉर्डर के एक्सटर्नल स्पेस है, जो वेब एलिमेंट को आपस में बॉक्स मॉडल से सेपरेट कर प्रॉपर मार्जिन कर अलाइन डिस्प्ले करता है।
Uses and Methods of Box Model in CSS.
So let’s learn some basic methods and create and control custom box model element.
Aligning box model element centered.
Center aligning a block model element using box model margin attributes.
.boxmodel-center{
width: 400px;
margin: 0 auto; /* margin with 0 align box element in centred with left and right position */
padding: 30px;
border: 3px solid blue;
}
Create a box model with padding and border in CSS.
.style-boxmodel {
width: 340px;
padding: 20px;
border: 7px solid red; /* display box model red border */
margin: 20px; /* add 20px Space among boxes model */
background-color: aqua; /* display aqua background color*/
}
Creating the CSS box model with responsive layouts.
.responsive-boxmodel {
width: 100%; /* display box model full width */
max-width: 700px; /* display max width 700px */
padding: 20px;
border: 2px solid blue;
margin: 30px auto; /* display 30px auto margin */
}
Stacking box model elements with margins in CSS.
.boxmodel-vertical-stack {
margin-bottom: 30px; /* display space among box stack element */
}
Flexbox layout model in CSS.
सीएसएस में फ्लेक्सबॉक्स लेआउट के साथ बॉक्स मॉडल को क्रिएट करना, जिसमे फ्लेक्सबोक्स मॉडल मार्जिन और पैडिंग स्पेसिंग को कस्टम एडिट कर सकते है.
.flexbox-container {
display: flex;
justify-content: space-between; /* add space among flexbox item */
padding: 20px;
}
.flexbox-items {
width: 40%; /* display with Each item with 40% of the container element */
padding: 20px;
border: 2px solid brown;
margin: 10px; /* add space among items */
}
So, let’s understand different box model method examples using CSS in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Multiple Css Box Model Layout Script Code </title>
<style>
body {
color:brown;
font-family: times new roman;
margin: 0;
padding: 0;
}
.boxmodel-centered {
width: 400px;
margin: 30px auto; /* display center the box model */
padding: 30px;
border: 3px solid aqua;
background-color: yellow;
}
.boxmodel-styled {
color:white;
width: 290px;
padding: 30px;
border: 10px solid orange;
margin: 20px; /* display 20px space among element */
background-color: teal;
}
.boxmodel-responsive {
text-align: center;
font-family: monotype corsiva;
font-size: 1.5em;
width: 100%; /* display fill box model width */
max-width: 800px; /* display box Maximum width */
padding: 20px;
border: 4px solid green;
margin: 30px auto; /* display box margin auto margins */
}
.flexbox-container {
display: flex;
justify-content: space-between; /* display space among flexbox element */
padding: 30px;
border: 3px solid red;
}
.flexbox-element {
width: 40%; /* display flexbox element 40% of the flexbox model */
padding: 20px;
border: 2px solid orange;
margin: 10px; /* display space among flexbox model element */
}
</style>
</head>
<body>
<h3 style align=”center”>Display The Centred Box Model Example</h3>
<div class=”boxmodel-centered”>
This Is The Demonstration of Simple Box Model With Centred Box Element
</div>
<h3 style align=”center”>Display The Style Box Model Example</h3>
<div class=”boxmodel-styled”>
This Is The Demonstration of Box Model Styles With Default Box Element
</div>
<h3 style align=”center”>Display The Responsive Box Model Example</h3>
<div class=”boxmodel-responsive”>
This Is The Demonstration of Responsive Box Model Styles With Default Box Element
</div>
<h3 style align=”center”>Display The Flexbox Container Element</h3>
<div class=”flexbox-container”>
<div class=”flexbox-element”>Css</div>
<div class=”flexbox-element”>Html</div>
<div class=”flexbox-element”>Javascript</div>
<div class=”flexbox-element”>Php</div>
<div class=”flexbox-element”>Asp.net</div>
<div class=”flexbox-element”>Bootstrap</div>
</div>
</body>
</html>
Box Model Detail Explanation.
- Box Model Content – बॉक्समॉडल में कंटेंट बॉक्स मॉडल में डिस्प्ले होने वाले डिजिटल कंटेंट एलिमेंट है, जो टेक्स्ट, इमेज, कोड या अन्य बॉक्स कंटेंट के रूप में हो सकता है।
- Box Model Padding – क्रिएटेड बॉक्स मॉडल में डिजिटल बॉक्स कंटेंट और बॉक्स मॉडल बॉर्डर के बीच की एम्प्टी स्पेस है, यह डिज़ाइन बॉक्स मॉडल में टेक्स्ट और बॉक्स मॉडल के मध्य एम्प्टी स्पेस को डिस्प्ले करता है।
- Box Model Border – बॉक्स मॉडल एलिमेंट के सर्राउंड एक बॉर्डर को डिस्प्ले करता है।
- Box Model Margin – डिज़ाइन बॉक्स मॉडल एलिमेंट के मध्य एम्प्टी स्पेसिंग के लिए उपयोग करते है, जो आपको बॉक्स मॉडल लेआउट को कस्टमाइज करने में हेल्प करता है।
