तो सबसे महत्वपूर्ण अवधारणाओं को कवर किया और आकलन तत्वों की स्थिति है अभी तक यह है कि हम में से एक।
ऐसा कैसे कर हम एक पृष्ठ बाहर रखना या शीर्ष सही करने के लिए एक div चलते हैं।
या फिर हम एक लंगर टैग व्यापक कैसे बनाने के लिए या छवियों के बीच अंतर जोड़ कर।
कि सब के सब वास्तव में महत्वपूर्ण है और यह सब कुछ बॉक्स मॉडल कहा जाता है से संबंधित है।
तो बॉक्स मॉडल इस मूल विचार यह है कि वास्तव में HD आप का आकलन सब कुछ करने के लिए केंद्रीय जो मूल रूप से हर तत्व यह चारों ओर एक आयताकार बॉक्स है कि है।
तो हम यहाँ देख सकते हैं बस एमडीए पर किसी भी वेब पेज के लिए जाना जा रहा है और मैं निरीक्षक खुला है और मैं आवर्धक कांच का चयन किया है।
और जैसा कि मैंने हर तत्व पर ले जाएं, जैसा कि आप देख सकते हैं कि वहाँ चारों ओर एक बॉक्स है कि।
तो यह एच 2 यह चारों ओर एक नीले बॉक्स है।
यह एक एक बॉक्स है।
यहां तक ​​कि चीजें है कि विशेष रूप से boxy नहीं हैं।
इसलिए इस गोल कोने div ..
यह अभी भी यह चारों ओर एक बॉक्स है।
परदे के पीछे।
यहाँ तो इस करता है और यह एक सच में गोल नहीं या boxy नहीं इन गोल कोनों है करने के लिए लग रही है, लेकिन यह अभी भी एक बॉक्स है।
इसलिए इन बक्सों हम उन पर अलग अलग गुण शैली कर सकते हैं क्योंकि पर्दे के पीछे वास्तव में उपयोगी होते हैं।
तो वहाँ चार गुण या हर बॉक्स के चार अलग अलग भागों रहे हैं।
वहाँ एक बहुत अधिक गुण लेकिन बॉक्स है कि हम हेरफेर कर सकते हैं के कुछ हिस्सों के लिए है।
तो चलो लगता है कि इस चित्र जो एमडीए से भी है और एक पैरा की है चलो।
तो मैं एक पैराग्राफ में कुछ पाठ है और मैं इसे एक नारंगी या पीले रंग की सीमा देने के लिए और इस प्रयोक्ता कुछ पाठ और एक सीमा क्या देखता है, लेकिन पर्दे के पीछे वहाँ वास्तव में कुछ अन्य बातें हो रही है।
सीमा और वहाँ कुछ गद्दी बुलाया के पाठ के बीच इतना।
तो गद्दी सिर्फ सीमा के अंदर पर जगह नहीं है।
सामग्री और सीमा के बीच तो गद्दी है और फिर वहाँ भी मार्जिन जो दूसरी तरफ यह बाहर और कुछ पर सीमा के बीच है पर है।
इसलिए हम तत्वों के बीच अंतर को जोड़ने के लिए अक्सर मार्जिन का उपयोग करें।
इसलिए हम दो पैराग्राफ था और मैं उन्हें फिर मैं मार्जिन का उपयोग करें और बढ़ जाएगी कि आगे के अलावा बनना चाहता है।
तो अब हम वास्तव में गुण है कि हम इससे पहले कि हम ऐसा कर उपयोग करना चाहते हैं में से कुछ की वाक्य रचना में एक गहरा गोता का एक छोटा सा क्या करने जा रहे हैं।
मैं तो बस आप दो चीजें आप आगे सबसे रोमांचक के पहले से एक बनाने के लिए देख सकते हैं, लेकिन क्या महत्वपूर्ण है कि हम अब कुछ है कि इस तरह दिखता बनाने का एक तरीका यह है कि दिखाना चाहते हैं।
अब तक हम वास्तव में इन बक्से है कि एक दूसरे से उन्हें सौंपा के साथ एक है कि करने के लिए जुड़े हुए हैं बनाने का एक तरीका नहीं है, लेकिन वे वहाँ कोई पाठ के अंदर खाली कर रहे हैं।
इसलिए हम बॉक्स मॉडल के बारे में जानने के लिए और इस टिक टीएसी को पैर की अंगुली बोर्ड बनाने के लिए है कि यहाँ लागू करने के लिए जा रहे हैं और फिर हम एक काल्पनिक फोटोग्राफर के लिए इस पोर्टफोलियो साइट बनाने के लिए जा रहे हैं।
तो यह अच्छा है।
यह छवियों है यह संवेदनशील है तो यह आकार एक परिवर्तन खिड़की के आकार और ग्रिड बदल जाता है।
इस सब के सब अवधारणाओं आप यहाँ जानने के लिए जा रहे हैं के बंद आधारित है।
इसलिए मुझे आगे जाना है और यहाँ उदात्त को खोलने के लिए जा रहा हूँ।
और मुझे लगता है कि मैंने बनाया है एक बहुत सरल दस्तावेज है।
तो यह सिर्फ साधारण HTML है।
यह जुड़ा एक शैली पत्रक है।
यह खाली है।
एक तरफ कुछ टिप्पणियों से और फिर दो पैराग्राफ।
तो आप देख सकते हैं अगर मैं यह ऊपर खुला है कि यह बहुत ही बुनियादी बहुत उबाऊ है और हम सिर्फ इस का उपयोग करने के लिए बॉक्स मॉडल के साथ चारों ओर खेलने के लिए जा रहे हैं।
तो मैं अपनी सफलता के लिए जाने के लिए जा रहा हूँ और मैं पैराग्राफ का चयन करने के लिए जा रहा हूँ और फिर मैं सिर्फ इतना है कि मैं कुछ कोड नेत्रहीन आपको बता उन्हें नीचे बस के लिए मैं क्या कर रहा हूँ के बारे में कुछ अंदर इन टिप्पणियों की नकल करने जा रहा हूँ।
तो चलो ये एक सीमा देकर शुरू करते हैं।
तो इस समीक्षा की सीमा हो सकता है और पिक्सेल करने के लिए ठोस नीले कि ताज़ा बचाने करते हैं और आप देख सकते हैं कि हम सामग्री के आसपास सभी तरह से एक सीमा मिलना चाहिए।
और क्या आप भी सूचना है कि सामग्री यहाँ स्क्रीन भर में सभी तरह से चला जाता है।
हमारी सीमा यहीं बंद नहीं करता है और कहा कि क्योंकि जब हम डिफ़ॉल्ट रूप से एक पैरा बनाने के लिए यह स्क्रीन भर में सभी तरह से चला जाता है।
तो अगर मैं पाठ मैं चौड़ाई संपत्ति का उपयोग कर सकते हैं और मुझे आगे जाना है और एक की चौड़ाई देने जा रहा हूँ के पैरा ही की चौड़ाई बदलना चाहते हैं।
200 पिक्सल शुरू करने के लिए करते हैं।
और अगर मैं ताज़ा तुम अब हम चौड़ाई बदल दिया है देख सकते हैं।
अगर मैं निरीक्षण सामग्री नीला नहीं है।
और फिर हम इसे चारों ओर एक सीमा है।
इसलिए सामग्री नीला है।
और इस चित्र इस बॉक्स यहीं इस तत्व बॉक्स है उस पर।
और फिर हम एक सीमा है कि सीधे उसके चारों ओर है।
सीमा और सामग्री के बीच कोई जगह नहीं है।
चौड़ाई के साथ एक और बात है और यह भी वहाँ एक ऊंचाई है।
तो चलो 300 पिक्सल की ऊंचाई करते हैं और देखते हैं कि हम सिर्फ अंतरिक्ष का एक गुच्छा जोड़ दिया है।
मैं उस से छुटकारा पाने के लिए जा रहा हूँ, लेकिन वहाँ एक ऊंचाई है कि हम बस के साथ की तरह उपयोग कर सकते है।
हम सिर्फ पिक्सल का उपयोग करने के लिए तो हम प्रतिशत उपयोग कर सकते हैं की जरूरत नहीं है।
और उन लोगों को वास्तव में उपयोगी होते हैं तो मुझे तुम्हें दिखाते हैं।
के 50 प्रतिशत करते हैं और आप सोच हो सकता है क्या है यह 50 प्रतिशत की।
और जवाब है कि यह मूल तत्व का 50 प्रतिशत है।
इसलिए इस मामले में यह शरीर है कि पैरा पैरा के अंदर है आधे रास्ते शरीर के पार चला जाता है।
हमारे मामले में शरीर पूरे पृष्ठ है।
यह सभी तरह से भर गया था।
तो हम आधे पृष्ठ के साथ खत्म होता है।
और क्या इस बारे में अच्छा होगा अगर मैं बदल विंडो का आकार यह भी बदलता है इसलिए बहुत से लोगों को इस का उपयोग और कहा कि वास्तव में इस्तेमाल करेगा इस छवि को ग्रिड में उपयोग करने के लिए है।
आप देख सकते हैं कि छवियों उनके चौड़ाई बदलने के लिए और है कि एक प्रतिशत है।
ठीक है तो मैं अब के लिए इस तरह से इसे रखने के लिए जा रहा हूँ।
और फिर अगले संपत्ति के बारे में हम बात करने जा रहे गद्दी है और याद गद्दी तत्व और सीमा के बीच इस जगह नहीं है।
और अभी हम किसी भी अंतरिक्ष सही शीर्ष पर सीमाओं की जरूरत नहीं है।
तो वहाँ एक संपत्ति कहा जाता गद्दी है और हम इसे पिक्सल के एक नंबर दे और 10 पिक्सल शुरू करने के लिए क्या कर सकते हैं।
फ़ाइल ताज़ा बचाओ।
और अब हम सभी पक्षों पर गद्दी के 10 पिक्सल है।
तो अगर मैं अभी निरीक्षण तुम वहाँ अब इस हरे रंग की सामग्री है कि इतनी शुरू की है कि हम खुद को नीले रंग की सामग्री है और फिर हम इसे चारों ओर हरे रंग की जो सीमा और सामग्री के बीच है तो हम स्पष्ट रूप से यह वेतन वृद्धि कर सकते हैं देखेंगे और हम एक बहुत कुछ मिलता है अंदर पर अधिक स्थान।
लेकिन इस गद्दी स्थापित करने के लिए एक ही रास्ता नहीं है।
इस के रूप में बिल्कुल वैसा ही सभी चार पक्षों पर यह तय करता है।
लेकिन कभी कभी हम केवल एक पक्ष या दोनों पक्षों ने सीमा के साथ की तरह गद्दी पर चाहते हैं।
वहाँ नहीं रह संस्करण जहां यह एक सीमा शीर्ष 10 पिक्सल सीमा नीचे पांच पिक्सल है के लिए कम कटौती कर रहे हैं।
padding के साथ और एक ही बात यह है कि बाहर टिप्पणी और हम गद्दी की तरह कुछ 40 पिक्सल और ताजा छोड़ कर सकते हैं।
और हम गद्दी यहीं मिलता है।
और कहा कि एक ही जगह गद्दी है के लिए है।
और मैं यहाँ पर अंतरिक्ष याद इस नीले गद्दी उसकी वास्तविक सामग्री के साथ यहाँ इस से है कि है कि नहीं है।
तो अलग है, भले ही यह लग रहा है जैसे वहाँ सही पर अंतरिक्ष।
यह एक अलग जगह से आ रहा है।
तो एक और बात यह है कि हम यहाँ कर सकते मार्जिन के साथ खेलना है।
तो मार्जिन पहेली का एक आखिरी टुकड़ा है।
यह सीमा के बाहर पर जगह है।
तत्वों के बीच तो।
तो यह उपयोगी हो सकता है क्योंकि हम वेतन वृद्धि या छवियों के बीच सही में यहाँ यहीं या एक उदाहरण यहाँ इस स्थान के रूप में इस स्थान को बढ़ाने Marjan का उपयोग कर सेट किया जाता है चाहते हो सकता है जा रहा है।
तो यह वास्तव में सिर्फ गद्दी की तरह लग रहा है तो हम कह सकते हैं कि मार्जिन और चलो शुरू और ताज़ा करने के लिए 100 पिक्सल की तरह स्पष्ट कुछ करो।
और क्या हुआ अब हम सीमा के बाहर पर तत्व के सभी पक्षों पर अंतरिक्ष के 100 पिक्सल है।
तो पहलू हैं।
आप क्रोम कि नारंगी तो नीले रूप में पहचान की है में देखेंगे कि सामग्री ग्रीन ऑरेंज में गद्दी मार्जिन है।
तो बस गद्दी की तरह।
कभी कभी हम केवल मार्जिन एक तरफ का एक हिस्सा सेट तो हम क्या कर सकते मार्जिन शीर्ष की तरह कुछ 500 पिक्सल है चाहता हूँ।
और फिर जब वे अब के लिए यह एक बाहर से आते हैं और बचाने के लिए और हम केवल बाईं तरफ के शीर्ष पर स्थान मिलता है वहाँ कुछ भी नहीं है।
और यह एक के शीर्ष पर तो और अधिक स्थान।
नीचे या छोड़ दिया है या सही पर कुछ भी नहीं।
तो यह है कि मार्जिन है।
तो कभी कभी हम मार्जिन के सभी पक्षों के लिए मूल्यों को जोड़ने के लिए, लेकिन हम चार अलग-अलग लाइनों के साथ ऐसा करने के लिए नहीं करना चाहती।
इसलिए हम अगर वे यहाँ हैं उन्हें बिल्कुल वैसा ही होना नहीं करना चाहते हैं, लेकिन हम सभी को नहीं है कहने के लिए मार्जिन शीर्ष मार्जिन छोड़ दिया मार्जिन सही मार्जिन नीचे है।
तो वहाँ सिर्फ सीमा के लिए की तरह एक और शॉर्टकट है।
या फिर हम एक बार में हम इस मार्जिन करते हैं और यह चार मूल्यों दे सकते हैं बातें कर सकते हैं।
तो पहले एक शीर्ष और फिर सही और फिर नीचे के लिए है।
500 पिक्सल और फिर छोड़ दिया करते हैं और कर रही है कि हम यह अच्छा चार पक्षीय मार्जिन जहां मूल्यों सब अलग अलग हैं मिलता है, लेकिन हम केवल एक ही लाइन में करना पड़ा द्वारा करते हैं।
तो बस इस यहाँ का निरीक्षण किया और अगर हम तल पर 500 पिक्सल देखना यह शीर्ष पर 20 हम छोड़ दिया पर सौ पाने के लिए और फिर हम सही पर हमारे 40 है।
तो एक आखिरी बात यह है कि आप जो मार्जिन मार्जिन के साथ अक्सर देखेंगे वहाँ है।
ऑटो।
तो हम क्या कर सकते हैं छोड़ दिया है या सही पर ऑटो होना करने के लिए मार्जिन तय है।
और क्या करना होगा कि वास्तव में केंद्र हमारे लिए एक तत्व है।
तो मुझे आप पता चलता है कि कैसे काम करता है।
और इस टिप्पणी फिर से बाहर है और हम मार्जिन लिखने और चलो बस कहना है सकते हैं छोड़ दिया पर या सही शून्य मार्जिन और नीचे और बाईं तरफ ऑटो पर शीर्ष ऑटो पर शून्य मार्जिन।
और अगर मैं इस पूरे आकार बनाने के लिए और ताज़ा आपको लगता है कि यह हमारे लिए चीजों केन्द्रों देखेंगे।
तो क्या इसका मतलब है कि फैसला किया है कि यह 50 प्रतिशत है, क्योंकि हम जानते हैं कि यहां कहा और फिर इसे बाहर के आंकड़े बाईं ऑटो और ऑटो सही है तो बस यह उतना ही ऐसा करने की जरूरत है और कहा कि वास्तव में यह हमारे लिए केंद्र होगा के रूप में करता है।
और फिर हम शून्य ऊपर और नीचे तो वे एक साथ scrunched रहे हैं पर है।
क्या हम भी ऐसा कर सकते हैं वहाँ ऐसा करने का एक भी कम तरीका है और यह इस मार्जिन शून्य ओटो की तरह लग रहा है।
और इसलिए इस बाएँ और ऑटो के लिए सही शून्य करने के लिए ऊपर और नीचे की स्थापना की जाएगी।
तो कुछ भी नहीं बदलता है और हम भी इस वाक्य रचना का उपयोग कर सकते हैं अगर मैं ऊपर और ऑटो के लिए 50 पिक्सल जोड़ना चाहते हैं या मैं 50 पिक्सल और 20 पिक्सल जोड़ना चाहते हैं।
एक बात याद रखना तुम वहाँ एक्स जरूरत है जब तक संख्या शून्य है।
तो अगर मैं यह कर इसे छोड़ दिया और सही पर शीर्ष पर 20 कहते हैं और फिर इसे 50 ऊपर और नीचे पर कहते हैं।
तो चलो यहाँ सिर्फ एक बार और संक्षिप्त करते हैं।
हम भीतर की सामग्री जो यहीं है मिल गया है।
हम गद्दी जो सीमाओं के बीच है, इसलिए हम सभी को गद्दी छोड़ दिया है मिल गया है और फिर हम मार्जिन जो सीमा के बीच और दूसरी तरफ है।
मूल रूप से तत्वों के बीच तो।