पहले चौड़ाई ऑटो कार्यों के बारे में मेरी धारणा जैसे कि इसकी सामग्री है लेकिन अब थोड़ा ज्ञान के साथ यह काम करता है जैसे कि यह पूरी चौड़ाई को ब्लॉक करता है। तो मैं चौड़ाई 100% और चौड़ाई ऑटो के साथ यहाँ उलझन में हूँ। क्या कोई मुझे स्पष्टीकरण के साथ अंतर के बारे में बता सकता है?चौड़ाई ऑटो और चौड़ाई के बीच अंतर 100 प्रतिशत
चौड़ाई ऑटो
div या पी की तरह एक ब्लॉक स्तर तत्व की प्रारंभिक चौड़ाई ऑटो है। इससे यह अपने उपलब्ध ब्लॉक के भीतर सभी उपलब्ध क्षैतिज स्थान पर कब्जा करने के लिए विस्तार करता है। यदि इसमें कोई क्षैतिज पैडिंग या सीमा है, तो उनमें से चौड़ाई तत्व की कुल चौड़ाई में नहीं जुड़ती है।
चौड़ाई 100%
दूसरी ओर, यदि आप चौड़ाई निर्दिष्ट: 100%, तत्व के कुल चौड़ाई प्लस अपने धारक ब्लॉक की 100% किसी भी क्षैतिज मार्जिन, गद्दी और सीमा हो जाएगा (जब तक आपने बॉक्स आकार का उपयोग किया है: सीमा-बॉक्स, इस मामले में केवल मार्जिन 100% में जोड़ा जाता है ताकि इसकी कुल चौड़ाई की गणना की जा सके)। यह वही हो सकता है जो आप चाहते हैं, लेकिन संभवतः यह नहीं है।
अंतर कल्पना करने के लिए देखने पर इसे:
उन लोगों के लिए जो उत्सुक हैं कि 'चौड़ाई: ऑटो' इस तरह से व्यवहार क्यों करती है: http://stackoverflow.com/ प्रश्न/28353625/क्यों-करता-प्रतिशत-चौड़ाई-कार्य-यहां तक कि अगर-स्पष्ट-चौड़ाई-मूल्य-दिए गए-युक्त/28354270 # 28354270 –
तो 'ऑटो' 'fill-available' – jiggunjer
जब तक चौड़ाई के मान ऑटो है, तत्व बनने के बिना क्षैतिज मार्जिन, गद्दी और सीमा हो सकती है इसके कंटेनर से व्यापक (जब तक मार्जिन-बाएं + सीमा-बाएं-चौड़ाई + पैडिंग-बाएं + पैडिंग-दाएं + सीमा-दाएं-चौड़ाई + मार्जिन-दाएं कंटेनर से बड़ा नहीं है)। मार्जिन, पैडिंग और सीमा कंटेनर की चौड़ाई से घटाए जाने पर इसके कंटेंट बॉक्स की चौड़ाई कुछ भी छोड़ी जाएगी।
दूसरी ओर, यदि आप चौड़ाई निर्दिष्ट करते हैं: 100%, तत्व की कुल चौड़ाई इसके युक्त ब्लॉक का 100% और कोई क्षैतिज मार्जिन, पैडिंग और सीमा होगी (जब तक आप बॉक्स आकार का उपयोग नहीं करते हैं: सीमा-बॉक्स , इस मामले में केवल मार्जिन 100% में जोड़ा जाता है ताकि इसकी कुल चौड़ाई की गणना की जा सके)। यह वही हो सकता है जो आप चाहते हैं, लेकिन संभवतः यह नहीं है।
स्रोत:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
यह मार्जिन और सीमा के बारे में है। यदि आप width: auto का उपयोग करते हैं, तो सीमा जोड़ें, आपका div इसके कंटेनर से बड़ा नहीं होगा। दूसरी ओर, यदि आप width: 100% और कुछ सीमा का उपयोग करते हैं, तो तत्व की चौड़ाई 100% + सीमा या मार्जिन होगी। अधिक जानकारी के लिए this देखें।
div या p जैसे ब्लॉक स्तर तत्व की प्रारंभिक चौड़ाई ऑटो है।
चौड़ाई का उपयोग करें: स्पष्ट रूप से निर्दिष्ट चौड़ाई पूर्ववत करने के लिए ऑटो।
यदि आप चौड़ाई निर्दिष्ट करते हैं: 100%, तत्व की कुल चौड़ाई इसके युक्त ब्लॉक का 100% और कोई क्षैतिज मार्जिन, पैडिंग और सीमा होगी।
तो अगली बार जब आप अपने आप को सभी उपलब्ध चौड़ाई पर कब्जा करने के लिए ब्लॉक स्तर तत्व की चौड़ाई निर्धारित करते हैं, तो विचार करें कि आप वास्तव में क्या चाहते हैं, इसे ऑटो पर सेट करना है।
मैंने my blog पर अंतर के बारे में गहराई से पोस्ट लिखा है।
width: auto; मार्जिन, पैडिंग या सीमाओं से अतिरिक्त स्थान जोड़ा जाने पर तत्व को अपने मूल कंटेनर के समान चौड़ाई रखने के लिए जितना संभव हो सके उतना कठिन प्रयास करेगा।
width: 100%; तत्व को मूल कंटेनर के रूप में चौड़ा बना देगा। माता-पिता के संबंध में अतिरिक्त अंतर को तत्व के आकार में जोड़ा जाएगा। यह आमतौर पर समस्याओं का कारण बनता है।
जैसा ही है @ सी-लिंक प्रदान की गई एक ही चीज़ लेकिन अतिरिक्त ग्राफिकल इंटरफेस। तो +1 –
का उपयोग चौड़ाई: ऑटो; + प्रदर्शन: इनलाइन-ब्लॉक; सीएसएस में भयानक प्रभाव दे रहा है।
width : auto;
display: inline-block;
यह 100 और ऑटो के बीच अंतर के प्रश्न का उत्तर नहीं देता है। – JoeTidee
हां, मुझे पता है लेकिन मैं यहां * चौड़ाई के बारे में दिखाने की कोशिश कर रहा हूं: ऑटो और डिस्प्ले: इनलाइन-ब्लॉक *। जब हम किसी भी ब्लॉक स्तर तत्व की चौड़ाई बढ़ाने की इच्छा रखते हैं तो हम इसका उपयोग कर सकते हैं। और 100% और ऑटो के बीच अंतर –
चौड़ाई 100%: यह 100% के साथ सामग्री कर देगा। मार्जिन, सीमा, पैडिंग को इस चौड़ाई में जोड़ा जाएगा और इनमें से कोई भी जोड़ा गया तत्व तत्व बह जाएगा।
चौड़ाई ऑटो: यह मार्जिन, सीमा और गद्दी सहित उपलब्ध अंतरिक्ष में तत्व फिट होगा। मार्जिन समायोजित करने के बाद शेष स्थान + पैडिंग + सीमा चौड़ाई/ऊंचाई उपलब्ध होगी।
चौड़ाई 100% + बॉक्स आकार: सीमा बॉक्स: यह भी सीमा, गद्दी सहित उपलब्ध अंतरिक्ष में फिट बैठता है तत्व होगा (मार्जिन यह कंटेनर अतिप्रवाह कर देगा)।
के संभावित डुप्लिकेट [चौड़ाई निर्धारित करना: ऑटो चौड़ाई की ओर जाता है: 100%] (http://stackoverflow.com/questions/2042645/setting-widthauto-leads-to-width100) –
संक्षेप में: 1) ऑटो , पैरेंट div चौड़ाई/ऊंचाई अपने बच्चों का योग होगा। 2) 100 प्रतिशत, इसकी चौड़ाई/ऊंचाई इसके माता-पिता होंगे। आलेख देखें [यहां] (http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/) –