पहले मेरी धारणा width: autoयह थी कि सामग्री के लिए चौड़ाई निर्धारित है। अब मैं देखता हूं कि यह माता-पिता की पूरी चौड़ाई लेता है।
किसी को भी इन के बीच मतभेद का वर्णन कर सकते हैं?
जवाबों:
चौड़ाई का ऑटो
डिव या पी जैसे ब्लॉक स्तर के तत्व की प्रारंभिक चौड़ाई ऑटो है। यह अपने युक्त ब्लॉक के भीतर सभी उपलब्ध क्षैतिज स्थान पर कब्जा करने के लिए इसका विस्तार करता है। यदि इसमें कोई क्षैतिज पैडिंग या बॉर्डर है, तो उन की चौड़ाई तत्व की कुल चौड़ाई में नहीं जुड़ती है।
चौड़ाई 100%
दूसरी ओर, यदि आप चौड़ाई निर्दिष्ट करते हैं: 100%, तत्व की कुल चौड़ाई इसके युक्त ब्लॉक का 100% होगी साथ ही किसी भी क्षैतिज मार्जिन, पैडिंग और बॉर्डर (जब तक आपने बॉक्स-आकार का उपयोग नहीं किया है: बॉर्डर-बॉक्स, जिस स्थिति में केवल मार्जिन को 100% में जोड़ा जाता है ताकि इसकी कुल चौड़ाई की गणना की जा सके। यह वही हो सकता है जो आप चाहते हैं, लेकिन सबसे अधिक संभावना है कि यह नहीं है।
अंतर को देखने के लिए इस तस्वीर को देखें:
width: autoइस तरह से व्यवहार क्यों किया जाता है : stackoverflow.com/questions/28353625/…
autoही करता है जैसेfill-available
width: auto; एक तत्व को अपने मूल कंटेनर के समान चौड़ाई रखने के लिए जितना संभव हो उतना कठिन प्रयास करेंगे, जब मार्जिन, पैडिंग या बॉर्डर से अतिरिक्त स्थान जोड़ा जाता है।
width: 100%;मूल कंटेनर के रूप में तत्व को व्यापक बना देगा। माता-पिता की परवाह किए बिना तत्व के आकार में अतिरिक्त अंतर जोड़ा जाएगा। यह आमतौर पर समस्याओं का कारण बनता है।
जब तक चौड़ाई का मान ऑटो होता है, तब तक तत्व अपने कंटेनर की तुलना में व्यापक न होकर क्षैतिज मार्जिन, पैडिंग और बॉर्डर रख सकता है (जब तक कि मार्जिन-लेफ्ट-बॉर्डर-लेफ्ट-चौड़ाई + पेडिंग-लेफ्ट + पेडिंग-राइट का योग न हो) + बॉर्डर-राइट-चौड़ाई + मार्जिन-राइट कंटेनर से बड़ा है)। इसके कंटेंट बॉक्स की चौड़ाई, जो कुछ भी बचा है, जब कंटेनर की चौड़ाई से मार्जिन, पैडिंग और बॉर्डर को घटाया जाएगा।
दूसरी ओर, यदि आप चौड़ाई निर्दिष्ट करते हैं: 100%, तत्व की कुल चौड़ाई इसके युक्त ब्लॉक का 100% होगी साथ ही किसी भी क्षैतिज मार्जिन, पैडिंग और बॉर्डर (जब तक आपने बॉक्स-आकार का उपयोग नहीं किया है: बॉर्डर-बॉक्स, जिस स्थिति में केवल मार्जिन को 100% में जोड़ा जाता है ताकि इसकी कुल चौड़ाई की गणना की जा सके। यह वही हो सकता है जो आप चाहते हैं, लेकिन सबसे अधिक संभावना है कि यह नहीं है।
स्रोत:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
Div या p जैसे ब्लॉक स्तर के तत्व की प्रारंभिक चौड़ाई ऑटो है।
चौड़ाई का उपयोग करें: स्पष्ट रूप से निर्दिष्ट चौड़ाई को पूर्ववत करने के लिए ऑटो।
यदि आप चौड़ाई निर्दिष्ट करते हैं: 100%, तत्व की कुल चौड़ाई इसके ब्लॉक के 100% से अधिक किसी भी क्षैतिज मार्जिन, पैडिंग और सीमा से युक्त होगी।
इसलिए, अगली बार जब आप अपने आप को ब्लॉक लेवल एलिमेंट की चौड़ाई को 100% तक सेट कर पाते हैं, तो सभी उपलब्ध चौड़ाई पर कब्जा करने के लिए, विचार करें कि क्या आप वास्तव में इसे ऑटो में सेट करना चाहते हैं।
चौड़ाई 100%: यह सामग्री को 100% बना देगा। मार्जिन, सीमा, पैडिंग को इस चौड़ाई में जोड़ा जाएगा और यदि इनमें से कोई भी जोड़ा जाता है तो तत्व ओवरफ्लो हो जाएगा।
चौड़ाई ऑटो: यह मार्जिन, सीमा और गद्दी सहित उपलब्ध स्थान में तत्व को फिट करेगा। मार्जिन समायोजित करने के बाद शेष स्थान + पैडिंग + बॉर्डर उपलब्ध चौड़ाई / ऊंचाई होगी।
चौड़ाई 100% + बॉक्स-आकार: बॉर्डर बॉक्स: यह बॉर्डर सहित उपलब्ध स्थान में तत्व को भी फिट करता है, पैडिंग (मार्जिन इसे कंटेनर को ओवरफ्लो कर देगा)।
चौड़ाई का उपयोग करना: ऑटो; + प्रदर्शन: इनलाइन-ब्लॉक; भयानक प्रभाव दे रही सीएसएस में
width : auto;
display: inline-block;जब हम कहते हैं
width:auto;चौड़ाई मूल तत्व की कुल चौड़ाई से अधिक नहीं होगी। अधिकतम चौड़ाई यह माता-पिता की चौड़ाई है। यदि हम सीमा, पैडिंग और मार्जिन जोड़ते हैं, तो भी सीमा, पैडिंग और मार्जिन के लिए स्थान देने के लिए तत्व की सामग्री स्वयं छोटी हो जाएगी। यदि सीमा के लिए आवश्यक स्थान + पैडिंग + मार्जिन मूल तत्व की कुल चौड़ाई से अधिक है तो सामग्री की चौड़ाई शून्य हो जाएगी।
जब हम कहते हैं
width:100%;तत्व की सामग्री की चौड़ाई 100% मूल तत्व बन जाएगी और अब से यदि हम सीमा, पैडिंग या मार्जिन जोड़ते हैं तो यह बाल तत्व को मूल तत्व की चौड़ाई से अधिक कर देगा और यह मूल तत्व से बाहर हो जाएगा।