CSS बॉक्स-साइजिंग अट्रिब्यूट
- पिछला पृष्ठ बॉक्स-शैडो
- अगला पृष्ठ ब्रेक-अफ्टर
परिभाषा और उपयोग
box-sizing गुण आपको एक विशेष क्षेत्र के लिए विशेष तरीके से एक विशेष एलिमेंट को परिभाषित करने की अनुमति देता है।
उदाहरण के लिए, यदि आप दो जोड़े हुए बोर्डर युक्त बॉक्स जोड़ना चाहते हैं, तो box-sizing को "border-box" में सेट करें। यह ब्राउज़र को निर्धारित चौड़ाई और ऊंचाई वाले बॉक्स को प्रदर्शित करता है और बोर्डर और आंतरिक गली को बॉक्स में डालता है।
और देखें:
CSS3 पाठ्यक्रमःCSS3 यूज़र-इंटरफेस
HTML DOM संदर्भ दस्तावेज़ःboxSizing गुण
उदाहरण
दो जोड़े हुए बोर्डर युक्त बॉक्स निर्धारित करता है:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
पृष्ठ के नीचे और अधिक उदाहरण हैं。
CSS व्याकरण
box-sizing: content-box|border-box|inherit;
गुण मूल्य
| मूल्य | वर्णन |
|---|---|
| content-box |
यह CSS2.1 द्वारा निर्धारित चौड़ाई और ऊंचाई के व्यवहार है। चौड़ाई और ऊंचाई को एलिमेंट के सामग्री बॉक्स पर लगाया जाता है। चौड़ाई और ऊंचाई के बाहर एलिमेंट के आंतरिक गली और किनारा डैशिंग किये जाते हैं। |
| border-box |
एलिमेंट के लिए निर्धारित चौड़ाई और ऊंचाई एलिमेंट के किनारा बॉक्स का निर्धारण करती हैं। अर्थात्, एलिमेंट के लिए निर्धारित किए गए किसी भी आंतरिक गली और किनारा इसके निर्धारित चौड़ाई और ऊंचाई के भीतर डैशिंग किये जाते हैं। किनारा और आंतरिक गली को काटकर निर्धारित चौड़ाई और ऊंचाई से सामग्री की चौड़ाई और ऊंचाई प्राप्त की जा सकती है। |
| inherit | box-sizing गुण के मूल्य को पिता एलिमेंट से ले लेने का निर्देश देता है। |
तकनीकी विवरण
| मूलभूत मूल्यः | content-box |
|---|---|
| विरासतः | नहीं |
| संस्करणः | CSS3 |
| JavaScript व्याकरणः | object.style.boxSizing="border-box" |
ब्राउज़र समर्थन
तालिका में दिए गए संख्या पहली ब्राउज़र जो इस गुण को पूरी तरह से समर्थित करते हैं को चिह्नित करते हैं।
जो -webkit- या -moz- से बढ़ा हुआ संख्या पहली संस्करण के लिए प्रयोग करते हैं।
| च्रोम | IE / एज | फ़ायरफॉक्स | सैफारी | ओपेरा |
|---|---|---|---|---|
| 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
- पिछला पृष्ठ बॉक्स-शैडो
- अगला पृष्ठ ब्रेक-अफ्टर
