1
00:00:00,840 --> 00:00:06,440
तो सबसे महत्वपूर्ण अवधारणाओं को कवर किया और आकलन तत्वों की स्थिति है अभी तक यह है कि हम में से एक।

2
00:00:06,600 --> 00:00:10,290
ऐसा कैसे कर हम एक पृष्ठ बाहर रखना या शीर्ष सही करने के लिए एक div चलते हैं।

3
00:00:10,410 --> 00:00:15,720
या फिर हम एक लंगर टैग व्यापक कैसे बनाने के लिए या छवियों के बीच अंतर जोड़ कर।

4
00:00:15,780 --> 00:00:20,110
कि सब के सब वास्तव में महत्वपूर्ण है और यह सब कुछ बॉक्स मॉडल कहा जाता है से संबंधित है।

5
00:00:20,220 --> 00:00:31,190
तो बॉक्स मॉडल इस मूल विचार यह है कि वास्तव में HD आप का आकलन सब कुछ करने के लिए केंद्रीय जो मूल रूप से हर तत्व यह चारों ओर एक आयताकार बॉक्स है कि है।

6
00:00:31,680 --> 00:00:39,620
तो हम यहाँ देख सकते हैं बस एमडीए पर किसी भी वेब पेज के लिए जाना जा रहा है और मैं निरीक्षक खुला है और मैं आवर्धक कांच का चयन किया है।

7
00:00:40,010 --> 00:00:44,810
और जैसा कि मैंने हर तत्व पर ले जाएं, जैसा कि आप देख सकते हैं कि वहाँ चारों ओर एक बॉक्स है कि।

8
00:00:44,910 --> 00:00:48,180
तो यह एच 2 यह चारों ओर एक नीले बॉक्स है।

9
00:00:48,180 --> 00:00:49,810
यह एक एक बॉक्स है।

10
00:00:50,130 --> 00:00:53,370
यहां तक ​​कि चीजें है कि विशेष रूप से boxy नहीं हैं।

11
00:00:53,490 --> 00:00:56,320
इसलिए इस गोल कोने div ..

12
00:00:56,490 --> 00:00:58,080
यह अभी भी यह चारों ओर एक बॉक्स है।

13
00:00:58,080 --> 00:00:59,310
परदे के पीछे।

14
00:00:59,520 --> 00:01:09,130
यहाँ तो इस करता है और यह एक सच में गोल नहीं या boxy नहीं इन गोल कोनों है करने के लिए लग रही है, लेकिन यह अभी भी एक बॉक्स है।

15
00:01:09,240 --> 00:01:15,870
इसलिए इन बक्सों हम उन पर अलग अलग गुण शैली कर सकते हैं क्योंकि पर्दे के पीछे वास्तव में उपयोगी होते हैं।

16
00:01:15,870 --> 00:01:19,350
तो वहाँ चार गुण या हर बॉक्स के चार अलग अलग भागों रहे हैं।

17
00:01:19,350 --> 00:01:23,550
वहाँ एक बहुत अधिक गुण लेकिन बॉक्स है कि हम हेरफेर कर सकते हैं के कुछ हिस्सों के लिए है।

18
00:01:23,610 --> 00:01:29,790
तो चलो लगता है कि इस चित्र जो एमडीए से भी है और एक पैरा की है चलो।

19
00:01:29,790 --> 00:01:42,210
तो मैं एक पैराग्राफ में कुछ पाठ है और मैं इसे एक नारंगी या पीले रंग की सीमा देने के लिए और इस प्रयोक्ता कुछ पाठ और एक सीमा क्या देखता है, लेकिन पर्दे के पीछे वहाँ वास्तव में कुछ अन्य बातें हो रही है।

20
00:01:42,360 --> 00:01:47,920
सीमा और वहाँ कुछ गद्दी बुलाया के पाठ के बीच इतना।

21
00:01:48,000 --> 00:01:51,040
तो गद्दी सिर्फ सीमा के अंदर पर जगह नहीं है।

22
00:01:51,190 --> 00:02:01,060
सामग्री और सीमा के बीच तो गद्दी है और फिर वहाँ भी मार्जिन जो दूसरी तरफ यह बाहर और कुछ पर सीमा के बीच है पर है।

23
00:02:01,170 --> 00:02:04,720
इसलिए हम तत्वों के बीच अंतर को जोड़ने के लिए अक्सर मार्जिन का उपयोग करें।

24
00:02:04,860 --> 00:02:11,340
इसलिए हम दो पैराग्राफ था और मैं उन्हें फिर मैं मार्जिन का उपयोग करें और बढ़ जाएगी कि आगे के अलावा बनना चाहता है।

25
00:02:11,880 --> 00:02:18,700
तो अब हम वास्तव में गुण है कि हम इससे पहले कि हम ऐसा कर उपयोग करना चाहते हैं में से कुछ की वाक्य रचना में एक गहरा गोता का एक छोटा सा क्या करने जा रहे हैं।

26
00:02:18,720 --> 00:02:29,870
मैं तो बस आप दो चीजें आप आगे सबसे रोमांचक के पहले से एक बनाने के लिए देख सकते हैं, लेकिन क्या महत्वपूर्ण है कि हम अब कुछ है कि इस तरह दिखता बनाने का एक तरीका यह है कि दिखाना चाहते हैं।

27
00:02:29,880 --> 00:02:39,330
अब तक हम वास्तव में इन बक्से है कि एक दूसरे से उन्हें सौंपा के साथ एक है कि करने के लिए जुड़े हुए हैं बनाने का एक तरीका नहीं है, लेकिन वे वहाँ कोई पाठ के अंदर खाली कर रहे हैं।

28
00:02:39,330 --> 00:02:50,830
इसलिए हम बॉक्स मॉडल के बारे में जानने के लिए और इस टिक टीएसी को पैर की अंगुली बोर्ड बनाने के लिए है कि यहाँ लागू करने के लिए जा रहे हैं और फिर हम एक काल्पनिक फोटोग्राफर के लिए इस पोर्टफोलियो साइट बनाने के लिए जा रहे हैं।

29
00:02:51,450 --> 00:02:52,350
तो यह अच्छा है।

30
00:02:52,420 --> 00:03:00,690
यह छवियों है यह संवेदनशील है तो यह आकार एक परिवर्तन खिड़की के आकार और ग्रिड बदल जाता है।

31
00:03:00,750 --> 00:03:04,270
इस सब के सब अवधारणाओं आप यहाँ जानने के लिए जा रहे हैं के बंद आधारित है।

32
00:03:04,710 --> 00:03:07,020
इसलिए मुझे आगे जाना है और यहाँ उदात्त को खोलने के लिए जा रहा हूँ।

33
00:03:07,560 --> 00:03:10,510
और मुझे लगता है कि मैंने बनाया है एक बहुत सरल दस्तावेज है।

34
00:03:10,740 --> 00:03:12,600
तो यह सिर्फ साधारण HTML है।

35
00:03:12,660 --> 00:03:14,670
यह जुड़ा एक शैली पत्रक है।

36
00:03:14,700 --> 00:03:15,330
यह खाली है।

37
00:03:15,330 --> 00:03:18,930
एक तरफ कुछ टिप्पणियों से और फिर दो पैराग्राफ।

38
00:03:18,930 --> 00:03:27,660
तो आप देख सकते हैं अगर मैं यह ऊपर खुला है कि यह बहुत ही बुनियादी बहुत उबाऊ है और हम सिर्फ इस का उपयोग करने के लिए बॉक्स मॉडल के साथ चारों ओर खेलने के लिए जा रहे हैं।

39
00:03:28,860 --> 00:03:43,370
तो मैं अपनी सफलता के लिए जाने के लिए जा रहा हूँ और मैं पैराग्राफ का चयन करने के लिए जा रहा हूँ और फिर मैं सिर्फ इतना है कि मैं कुछ कोड नेत्रहीन आपको बता उन्हें नीचे बस के लिए मैं क्या कर रहा हूँ के बारे में कुछ अंदर इन टिप्पणियों की नकल करने जा रहा हूँ।

40
00:03:43,380 --> 00:03:45,740
तो चलो ये एक सीमा देकर शुरू करते हैं।

41
00:03:45,900 --> 00:03:57,630
तो इस समीक्षा की सीमा हो सकता है और पिक्सेल करने के लिए ठोस नीले कि ताज़ा बचाने करते हैं और आप देख सकते हैं कि हम सामग्री के आसपास सभी तरह से एक सीमा मिलना चाहिए।

42
00:03:57,630 --> 00:04:02,360
और क्या आप भी सूचना है कि सामग्री यहाँ स्क्रीन भर में सभी तरह से चला जाता है।

43
00:04:02,370 --> 00:04:09,620
हमारी सीमा यहीं बंद नहीं करता है और कहा कि क्योंकि जब हम डिफ़ॉल्ट रूप से एक पैरा बनाने के लिए यह स्क्रीन भर में सभी तरह से चला जाता है।

44
00:04:09,630 --> 00:04:23,260
तो अगर मैं पाठ मैं चौड़ाई संपत्ति का उपयोग कर सकते हैं और मुझे आगे जाना है और एक की चौड़ाई देने जा रहा हूँ के पैरा ही की चौड़ाई बदलना चाहते हैं।

45
00:04:23,490 --> 00:04:25,390
200 पिक्सल शुरू करने के लिए करते हैं।

46
00:04:25,890 --> 00:04:29,190
और अगर मैं ताज़ा तुम अब हम चौड़ाई बदल दिया है देख सकते हैं।

47
00:04:29,190 --> 00:04:34,920
अगर मैं निरीक्षण सामग्री नीला नहीं है।

48
00:04:35,940 --> 00:04:37,840
और फिर हम इसे चारों ओर एक सीमा है।

49
00:04:38,310 --> 00:04:39,700
इसलिए सामग्री नीला है।

50
00:04:40,110 --> 00:04:45,350
और इस चित्र इस बॉक्स यहीं इस तत्व बॉक्स है उस पर।

51
00:04:45,630 --> 00:04:48,330
और फिर हम एक सीमा है कि सीधे उसके चारों ओर है।

52
00:04:48,330 --> 00:04:52,020
सीमा और सामग्री के बीच कोई जगह नहीं है।

53
00:04:52,020 --> 00:04:56,920
चौड़ाई के साथ एक और बात है और यह भी वहाँ एक ऊंचाई है।

54
00:04:57,060 --> 00:05:02,360
तो चलो 300 पिक्सल की ऊंचाई करते हैं और देखते हैं कि हम सिर्फ अंतरिक्ष का एक गुच्छा जोड़ दिया है।

55
00:05:02,370 --> 00:05:06,620
मैं उस से छुटकारा पाने के लिए जा रहा हूँ, लेकिन वहाँ एक ऊंचाई है कि हम बस के साथ की तरह उपयोग कर सकते है।

56
00:05:06,930 --> 00:05:11,760
हम सिर्फ पिक्सल का उपयोग करने के लिए तो हम प्रतिशत उपयोग कर सकते हैं की जरूरत नहीं है।

57
00:05:13,890 --> 00:05:15,780
और उन लोगों को वास्तव में उपयोगी होते हैं तो मुझे तुम्हें दिखाते हैं।

58
00:05:15,810 --> 00:05:23,310
के 50 प्रतिशत करते हैं और आप सोच हो सकता है क्या है यह 50 प्रतिशत की।

59
00:05:23,310 --> 00:05:27,290
और जवाब है कि यह मूल तत्व का 50 प्रतिशत है।

60
00:05:27,300 --> 00:05:35,240
इसलिए इस मामले में यह शरीर है कि पैरा पैरा के अंदर है आधे रास्ते शरीर के पार चला जाता है।

61
00:05:35,310 --> 00:05:37,390
हमारे मामले में शरीर पूरे पृष्ठ है।

62
00:05:37,410 --> 00:05:38,240
यह सभी तरह से भर गया था।

63
00:05:38,250 --> 00:05:40,620
तो हम आधे पृष्ठ के साथ खत्म होता है।

64
00:05:40,800 --> 00:05:54,890
और क्या इस बारे में अच्छा होगा अगर मैं बदल विंडो का आकार यह भी बदलता है इसलिए बहुत से लोगों को इस का उपयोग और कहा कि वास्तव में इस्तेमाल करेगा इस छवि को ग्रिड में उपयोग करने के लिए है।

65
00:05:55,280 --> 00:05:59,490
आप देख सकते हैं कि छवियों उनके चौड़ाई बदलने के लिए और है कि एक प्रतिशत है।

66
00:06:00,040 --> 00:06:04,590
ठीक है तो मैं अब के लिए इस तरह से इसे रखने के लिए जा रहा हूँ।

67
00:06:04,770 --> 00:06:11,600
और फिर अगले संपत्ति के बारे में हम बात करने जा रहे गद्दी है और याद गद्दी तत्व और सीमा के बीच इस जगह नहीं है।

68
00:06:11,750 --> 00:06:15,410
और अभी हम किसी भी अंतरिक्ष सही शीर्ष पर सीमाओं की जरूरत नहीं है।

69
00:06:15,840 --> 00:06:22,120
तो वहाँ एक संपत्ति कहा जाता गद्दी है और हम इसे पिक्सल के एक नंबर दे और 10 पिक्सल शुरू करने के लिए क्या कर सकते हैं।

70
00:06:22,230 --> 00:06:25,130
फ़ाइल ताज़ा बचाओ।

71
00:06:25,410 --> 00:06:28,700
और अब हम सभी पक्षों पर गद्दी के 10 पिक्सल है।

72
00:06:29,040 --> 00:06:49,760
तो अगर मैं अभी निरीक्षण तुम वहाँ अब इस हरे रंग की सामग्री है कि इतनी शुरू की है कि हम खुद को नीले रंग की सामग्री है और फिर हम इसे चारों ओर हरे रंग की जो सीमा और सामग्री के बीच है तो हम स्पष्ट रूप से यह वेतन वृद्धि कर सकते हैं देखेंगे और हम एक बहुत कुछ मिलता है अंदर पर अधिक स्थान।

73
00:06:50,490 --> 00:06:52,890
लेकिन इस गद्दी स्थापित करने के लिए एक ही रास्ता नहीं है।

74
00:06:52,920 --> 00:06:57,250
इस के रूप में बिल्कुल वैसा ही सभी चार पक्षों पर यह तय करता है।

75
00:06:57,380 --> 00:07:01,760
लेकिन कभी कभी हम केवल एक पक्ष या दोनों पक्षों ने सीमा के साथ की तरह गद्दी पर चाहते हैं।

76
00:07:01,800 --> 00:07:09,830
वहाँ नहीं रह संस्करण जहां यह एक सीमा शीर्ष 10 पिक्सल सीमा नीचे पांच पिक्सल है के लिए कम कटौती कर रहे हैं।

77
00:07:09,900 --> 00:07:20,270
padding के साथ और एक ही बात यह है कि बाहर टिप्पणी और हम गद्दी की तरह कुछ 40 पिक्सल और ताजा छोड़ कर सकते हैं।

78
00:07:20,520 --> 00:07:22,090
और हम गद्दी यहीं मिलता है।

79
00:07:22,320 --> 00:07:24,250
और कहा कि एक ही जगह गद्दी है के लिए है।

80
00:07:24,330 --> 00:07:30,830
और मैं यहाँ पर अंतरिक्ष याद इस नीले गद्दी उसकी वास्तविक सामग्री के साथ यहाँ इस से है कि है कि नहीं है।

81
00:07:30,990 --> 00:07:33,610
तो अलग है, भले ही यह लग रहा है जैसे वहाँ सही पर अंतरिक्ष।

82
00:07:33,620 --> 00:07:35,930
यह एक अलग जगह से आ रहा है।

83
00:07:37,170 --> 00:07:40,920
तो एक और बात यह है कि हम यहाँ कर सकते मार्जिन के साथ खेलना है।

84
00:07:41,160 --> 00:07:43,780
तो मार्जिन पहेली का एक आखिरी टुकड़ा है।

85
00:07:43,860 --> 00:07:45,900
यह सीमा के बाहर पर जगह है।

86
00:07:45,900 --> 00:07:47,980
तत्वों के बीच तो।

87
00:07:48,450 --> 00:08:01,280
तो यह उपयोगी हो सकता है क्योंकि हम वेतन वृद्धि या छवियों के बीच सही में यहाँ यहीं या एक उदाहरण यहाँ इस स्थान के रूप में इस स्थान को बढ़ाने Marjan का उपयोग कर सेट किया जाता है चाहते हो सकता है जा रहा है।

88
00:08:01,500 --> 00:08:10,240
तो यह वास्तव में सिर्फ गद्दी की तरह लग रहा है तो हम कह सकते हैं कि मार्जिन और चलो शुरू और ताज़ा करने के लिए 100 पिक्सल की तरह स्पष्ट कुछ करो।

89
00:08:10,410 --> 00:08:17,100
और क्या हुआ अब हम सीमा के बाहर पर तत्व के सभी पक्षों पर अंतरिक्ष के 100 पिक्सल है।

90
00:08:18,240 --> 00:08:19,360
तो पहलू हैं।

91
00:08:19,980 --> 00:08:28,710
आप क्रोम कि नारंगी तो नीले रूप में पहचान की है में देखेंगे कि सामग्री ग्रीन ऑरेंज में गद्दी मार्जिन है।

92
00:08:28,800 --> 00:08:30,030
तो बस गद्दी की तरह।

93
00:08:30,030 --> 00:08:38,890
कभी कभी हम केवल मार्जिन एक तरफ का एक हिस्सा सेट तो हम क्या कर सकते मार्जिन शीर्ष की तरह कुछ 500 पिक्सल है चाहता हूँ।

94
00:08:38,900 --> 00:08:46,070
और फिर जब वे अब के लिए यह एक बाहर से आते हैं और बचाने के लिए और हम केवल बाईं तरफ के शीर्ष पर स्थान मिलता है वहाँ कुछ भी नहीं है।

95
00:08:46,160 --> 00:08:48,180
और यह एक के शीर्ष पर तो और अधिक स्थान।

96
00:08:48,170 --> 00:08:50,480
नीचे या छोड़ दिया है या सही पर कुछ भी नहीं।

97
00:08:50,610 --> 00:08:52,710
तो यह है कि मार्जिन है।

98
00:08:52,710 --> 00:08:59,510
तो कभी कभी हम मार्जिन के सभी पक्षों के लिए मूल्यों को जोड़ने के लिए, लेकिन हम चार अलग-अलग लाइनों के साथ ऐसा करने के लिए नहीं करना चाहती।

99
00:08:59,660 --> 00:09:06,500
इसलिए हम अगर वे यहाँ हैं उन्हें बिल्कुल वैसा ही होना नहीं करना चाहते हैं, लेकिन हम सभी को नहीं है कहने के लिए मार्जिन शीर्ष मार्जिन छोड़ दिया मार्जिन सही मार्जिन नीचे है।

100
00:09:06,570 --> 00:09:09,550
तो वहाँ सिर्फ सीमा के लिए की तरह एक और शॉर्टकट है।

101
00:09:09,570 --> 00:09:14,780
या फिर हम एक बार में हम इस मार्जिन करते हैं और यह चार मूल्यों दे सकते हैं बातें कर सकते हैं।

102
00:09:14,820 --> 00:09:21,300
तो पहले एक शीर्ष और फिर सही और फिर नीचे के लिए है।

103
00:09:21,750 --> 00:09:36,820
500 पिक्सल और फिर छोड़ दिया करते हैं और कर रही है कि हम यह अच्छा चार पक्षीय मार्जिन जहां मूल्यों सब अलग अलग हैं मिलता है, लेकिन हम केवल एक ही लाइन में करना पड़ा द्वारा करते हैं।

104
00:09:37,290 --> 00:09:49,920
तो बस इस यहाँ का निरीक्षण किया और अगर हम तल पर 500 पिक्सल देखना यह शीर्ष पर 20 हम छोड़ दिया पर सौ पाने के लिए और फिर हम सही पर हमारे 40 है।

105
00:09:50,010 --> 00:09:53,790
तो एक आखिरी बात यह है कि आप जो मार्जिन मार्जिन के साथ अक्सर देखेंगे वहाँ है।

106
00:09:53,790 --> 00:09:54,480
ऑटो।

107
00:09:54,780 --> 00:09:59,340
तो हम क्या कर सकते हैं छोड़ दिया है या सही पर ऑटो होना करने के लिए मार्जिन तय है।

108
00:09:59,370 --> 00:10:02,550
और क्या करना होगा कि वास्तव में केंद्र हमारे लिए एक तत्व है।

109
00:10:02,550 --> 00:10:04,570
तो मुझे आप पता चलता है कि कैसे काम करता है।

110
00:10:04,710 --> 00:10:18,390
और इस टिप्पणी फिर से बाहर है और हम मार्जिन लिखने और चलो बस कहना है सकते हैं छोड़ दिया पर या सही शून्य मार्जिन और नीचे और बाईं तरफ ऑटो पर शीर्ष ऑटो पर शून्य मार्जिन।

111
00:10:18,510 --> 00:10:23,520
और अगर मैं इस पूरे आकार बनाने के लिए और ताज़ा आपको लगता है कि यह हमारे लिए चीजों केन्द्रों देखेंगे।

112
00:10:23,520 --> 00:10:37,880
तो क्या इसका मतलब है कि फैसला किया है कि यह 50 प्रतिशत है, क्योंकि हम जानते हैं कि यहां कहा और फिर इसे बाहर के आंकड़े बाईं ऑटो और ऑटो सही है तो बस यह उतना ही ऐसा करने की जरूरत है और कहा कि वास्तव में यह हमारे लिए केंद्र होगा के रूप में करता है।

113
00:10:37,980 --> 00:10:41,540
और फिर हम शून्य ऊपर और नीचे तो वे एक साथ scrunched रहे हैं पर है।

114
00:10:41,930 --> 00:10:48,200
क्या हम भी ऐसा कर सकते हैं वहाँ ऐसा करने का एक भी कम तरीका है और यह इस मार्जिन शून्य ओटो की तरह लग रहा है।

115
00:10:48,540 --> 00:10:53,470
और इसलिए इस बाएँ और ऑटो के लिए सही शून्य करने के लिए ऊपर और नीचे की स्थापना की जाएगी।

116
00:10:53,580 --> 00:11:04,700
तो कुछ भी नहीं बदलता है और हम भी इस वाक्य रचना का उपयोग कर सकते हैं अगर मैं ऊपर और ऑटो के लिए 50 पिक्सल जोड़ना चाहते हैं या मैं 50 पिक्सल और 20 पिक्सल जोड़ना चाहते हैं।

117
00:11:04,740 --> 00:11:09,830
एक बात याद रखना तुम वहाँ एक्स जरूरत है जब तक संख्या शून्य है।

118
00:11:10,430 --> 00:11:18,760
तो अगर मैं यह कर इसे छोड़ दिया और सही पर शीर्ष पर 20 कहते हैं और फिर इसे 50 ऊपर और नीचे पर कहते हैं।

119
00:11:18,780 --> 00:11:21,070
तो चलो यहाँ सिर्फ एक बार और संक्षिप्त करते हैं।

120
00:11:21,120 --> 00:11:25,370
हम भीतर की सामग्री जो यहीं है मिल गया है।

121
00:11:25,830 --> 00:11:33,440
हम गद्दी जो सीमाओं के बीच है, इसलिए हम सभी को गद्दी छोड़ दिया है मिल गया है और फिर हम मार्जिन जो सीमा के बीच और दूसरी तरफ है।

122
00:11:33,450 --> 00:11:35,530
मूल रूप से तत्वों के बीच तो।