2016-06-01 8 views
7
<style type="text/css"> 
body > div { 
    display: inline; 
    position: relative; 
} 
body > div > div { 
    position: absolute; 
} 
</style> 
<div> 
    <div></div> 
</div> 

आंतरिक div का सटीक युक्त ब्लॉक क्या है?युक्त ब्लॉक इनलाइन स्थिति में एक बिल्कुल स्थित तत्व के सटीक युक्त ब्लॉक क्या है?

यदि पूर्वज एक इनलाइन तत्व है, तो युक्त ब्लॉक पहले के पैडिंग बक्से और उस तत्व के लिए उत्पन्न अंतिम इनलाइन बॉक्स के आसपास बाध्यकारी बॉक्स है। सीएसएस 2.1 में, यदि इनलाइन तत्व एकाधिक लाइनों में विभाजित है, तो युक्त ब्लॉक अनिर्धारित है।

ऊपर दिए गए पाठ में "उस तत्व के लिए जेनरेट किए गए पहले और अंतिम इनलाइन बॉक्स के पैडिंग बक्से के आसपास बाउंडिंग बॉक्स" का क्या अर्थ है?

उत्तर

1

एक इनलाइन तत्व पारंपरिक अर्थ में ब्लॉक-स्तर बॉक्स को "शामिल" नहीं कर सकता है। क्या होता है कि इनलाइन तत्व अलग-अलग इनलाइन बॉक्स में विभाजित हो जाता है, जो अज्ञात ब्लॉक बॉक्स में ब्लॉक-स्तर बॉक्स में रहते हैं। पहला उदाहरण अतीत section 9.2.1.1 देखें:

एक इनलाइन बॉक्स एक में प्रवाह ब्लॉक स्तर बॉक्स, इनलाइन बॉक्स (और एक ही पंक्ति बॉक्स के भीतर अपनी इनलाइन पूर्वजों) शामिल हैं जब ब्लॉक स्तर बॉक्स के आसपास टूट रहे हैं (और किसी भी ब्लॉक-स्तरीय भाई बहन जो लगातार या अलग-अलग सफेद जगहों और/या आउट-ऑफ-फ्लो तत्वों से अलग होते हैं), इनलाइन बॉक्स को दो बक्से में विभाजित करते हैं (भले ही दोनों तरफ खाली हो), ब्लॉक के प्रत्येक किनारे पर एक- स्तर बॉक्स (एसएस)। ब्रेक से पहले लाइन ब्रेक और ब्रेक के बाद अज्ञात ब्लॉक बॉक्स में संलग्न हैं, और ब्लॉक-स्तरीय बॉक्स उन अज्ञात बॉक्सों का भाई बन जाता है। जब ऐसा इनलाइन बॉक्स सापेक्ष स्थिति से प्रभावित होता है, तो कोई भी परिणाम अनुवाद इनलाइन बॉक्स में निहित ब्लॉक-स्तर बॉक्स को भी प्रभावित करता है।

(कोई अनुवाद यहाँ क्या हो रहा है, तो अंतिम वाक्य धृष्ट है।)

आपका मामला हालांकि, एक छोटे से अधिक खास है बाहरी div के स्टार्ट टैग के बीच केवल बात के बाद से और आंतरिक div का प्रारंभ टैग, और आंतरिक div के अंत टैग और बाहरी div के अंत टैग, इंटर-एलिमेंट व्हाइटस्पेस (लाइन ब्रेक और इंडेंटेशन सहित) है, जो सामान्य परिस्थितियों में collapsed प्राप्त करता है। तो इनलाइन बक्से कि उत्पन्न कर रहे हैं अंत

  1. खाली है, और
  2. एक ही स्थिति में किया जा रहा है: strut के रूप में एक ही स्थिति।

और चूंकि इनलाइन तत्व में कोई पैडिंग नहीं है, इसलिए खाली इनलाइन बॉक्स के पैडिंग बक्से को लंबाई में शून्य, लंबाई की लंबाई के बराबर मापा जाता है। (ध्यान दें कि कुछ ब्राउज़र डेवलपर टूल इसे बाहरी div का निरीक्षण करते समय क्रॉसहेयर द्वारा चिह्नित एक बिंदु के रूप में प्रस्तुत कर सकते हैं।) आंतरिक (बिल्कुल स्थित) div के युक्त ब्लॉक को उन पैडिंग बक्से के परिधि द्वारा परिभाषित किया गया है, और कोई भी आंतरिक div (शीर्ष, दाएं, नीचे, बाएं) पर ऑफसेट उस परिधि के सापेक्ष हैं। नोट, हालांकि, चूंकि इनलाइन बॉक्स में वास्तव में सामग्री नहीं होती है, इसलिए आंतरिक div की वास्तविक स्थिति बाहरी div के समान होती है, में बाहरी div की सामग्री थी।

संबंधित मुद्दे