Box-sizing In Hindi
एचटीएमएल वेब पेज में वेब डेवलपर सीएसएस बॉक्स मॉडल साइज़िंग डिफ़ॉल्ट प्रॉपर्टीज को मैनेज और कण्ट्रोल कर सकते है. जहा मौजूदा बॉक्स मॉडल वेब पेज एलिमेंट की हाइट, विड्थ, पैडिंग, और बॉक्स बॉर्डर ऐट्रिब्यूट्स को कस्टम मॉडिफाई कर सकते है। जहा डिफ़ॉल्ट रूप से, बॉक्स मॉडल साइज़िंग वेब पेज बॉक्स में डिस्प्ले एलिमेंट की हाइट और विड्थ इनफार्मेशन को रिप्रेजेंट करने में हेल्पफुल है, जिसमे बॉक्स मॉडल साइज़िंग बॉक्स पैडिंग और बॉर्डर ऐट्रिब्यूट्स मौजूद नहीं होते है, जहा आप बॉक्स साइज कस्टम प्रॉपर्टीज को लेआउट कर रेस्पॉन्सिव बॉक्स एलिमेंट को डील और प्रीव्यू करते है।
CSS Box-Sizing Attributes.
css content-box (default) attributes.
डिज़ाइन एचटीएमएल वेब पेज में हाइट और विड्थ ऐट्रिब्यूट्स मौजूदा वेब पेज बॉक्स मॉडल कंटेंट में अप्लाई होती है. इसके साथ बॉक्स मॉडल साइज़िंग पैडिंग और बॉर्डर हाइट और विड्थ प्रॉपर्टीज को प्रीव्यू करते हैं, जहा कंटेंट बॉक्स मॉडल यूजर डिफाइन कंटेंट को होल्ड कर मल्टीप्ल सीएसएस बॉक्स मॉडल साइज़िंग ऐट्रिब्यूट्स को डिफाइन करते है।
How to Apply Content Box-Sizing Attributes.
- Total box model width = width + padding-left + padding-right + border-left + border-right
- Total box model height = height + padding-top + padding-bottom + border-top + border-bottom
CSS Box content Sizing Attributes example.
.content-box-model {
box-sizing: content-box;
width: 300px;
height: 200px;
padding: 40px;
border: 7px solid red;
background-color: lime;
margin-bottom: 10px;
}
css border-box sizing attributes.
मौजूदा एचटीएमएल वेब पेज में आप बॉक्स मॉडल साइज़िंग में बॉक्स की हाइट, विड्थ, बॉक्स कंटेंट, पैडिंग और बॉक्स बॉर्डर फीचर मौजूद होते है. जिससे आप मौजूदा एचटीएमएल वेब पेज एलिमेंट का टोटल साइज़ कस्टम यूजर डिफाइन हाइट और विड्थ के बराबर होगा। जिसके माध्यम से आप वेब पेज बॉक्स मॉडल साइज बॉर्डर प्रॉपर्टीज को कस्टम एडिट कर पाएंगे।
How to Apply Border Box-Sizing Attributes.
- Box border-sizing width = border content width + padding + border
- Box border-sizing height = border content height + padding + border
CSS Box Border Sizing Attributes example.
.content-box-model {
box-sizing: content-box;
width: 300px;
height: 200px;
box-sizing: border-box;
width: 400px;
padding: 30px;
border: 10px solid red;
}
Use of border-box-sizing attributes in css.
- डिज़ाइन एचटीएमएल वेब पेज बॉर्डर-बॉक्स-सीएसएस प्रॉपर्टीज का उपयोग वेब पेज लेआउट हाइट विड्थ बॉर्डर ऐट्रिब्यूट्स को अप्लाई करने में हेल्प करता है. स्पेशली वेब डेवलपर को रेस्पॉन्सिव वेब पेज वेबसाइट डिज़ाइन और डेवलपमेंट में।
- बॉर्डर-बॉक्स सीएसएस ऐट्रिब्यूट्स के साथ, आपको वेब पेज एलिमेंट में पर्टिकुलर हाइट और विड्थ पैडिंग और बॉर्डर में डिजायर मॉडिफिकेशन फीचर्स मिलता है, जिससे वेब पेज एलिमेंट को प्रॉपर्ली मैनेज और कण्ट्रोल करना अधिक आसान हो जाता है।
Applying CSS box-sizing attributes globally in HTML web pages.
यहाँ आप अपने किसी एचटीएमएल वेब पेज वेबसाइट प्रोजेक्ट में सभी टैग एलिमेंट में बॉर्डर-बॉक्स ऐट्रिब्यूट्स को यूनिवर्सल आर्डर में अप्लाई कर सकते है. जहा आपको इसे डिजायर एचटीएमएल वेब पेज में यूनिवर्सल सिलेक्टर ऐट्रिब्यूट्स को अप्लाई कर उपयोग किया जा सकता है.
* {
box-sizing: border-box;
}
Box-sizing and box values example 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>Css Box-Sizing And Box-Border Attributes Code </title>
<style>
/* let add custom box-sizing attributes */
.box-content-model {
color:red;
text-align: center;
font-size: 1.7;
font-family: times new roman;
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 40px;
border: 8px solid blue;
background-color: yellow;
margin-bottom: 30px;
}
/* Let Add some border-box Attributes */
.box-border-model {
color:brown;
text-align: right;
box-sizing: border-box;
width: 200px;
height: 200px;
padding: 40px;
border: 9px solid red;
background-color: aqua;
}
</style>
</head>
<body>
<div class=”box-content-model”>It Contain Box Content Model Css Attributes </div>
<div class=”box-border-model”>IT Display Border Box Css Attributes </div>
</body>
</html>
html web page border-box-sizing attribute explained.
किसी भी डिज़ाइन डेवलप एचटीएमएल वेब पेज में बॉक्स-साइज़िंग ऐट्रिब्यूट्स से आप उपयोग होने वाले बॉक्स मॉडल की हाइट, विड्थ, पैडिंग, और बॉर्डर ऐट्रिब्यूट्स या प्रॉपर्टीज को कण्ट्रोल कर सकते है।
- css content-box (default) – यहाँ ये बॉक्स साइज़िंग ऐट्रिब्यूट्स कंटेंट में हाइट और विड्थ एलिमेंट में अप्लाई होगी।
- css border-box – बॉक्स-बॉर्डर प्रॉपर्टीज आपके बॉक्स मॉडल में हाइट, विड्थ, पैडिंग और बॉक्स बॉर्डर कस्टम एडिट फीचर्स प्रदान करता हैं. ये आपके वेब पेज में आपको रेस्पॉन्सिव वेब पेज लेआउट मैनेजमेंट में हेल्प करते है।
- css box-sizing – किसी पर्टिकुलर एचटीएमएल वेब पेज में यूनिवर्सल बॉर्डर-बॉक्स; ऐट्रिब्यूट्स को एक ही समय में एक से अधिक एचटीएमएल वेब पेज एलिमेंट में अप्लाई किया जाता है. ये आपको एक अडजस्टेबल रेस्पॉन्सिव वेब पेज बॉक्स मॉडल एलिमेंट डेवलपमेंट में सहायक होते है ।
