सीएसएस प्रदर्शन मालमत्ता समजून घेत आहे

सामग्री

• वर नाजूक वस्तू
• सुबकपणे पॅक केलेले टी-शर्ट
• अंतर मोजणारे मोजे
• बोन प्रवास

ही मध्यरात्री आहे आणि ती एक Div आपल्या साइटवर अद्याप मुलाच्या खेळण्यांच्या छातीसारखे दिसते. सर्व घटक गोंधळलेले गोंधळ आहेत आणि प्रत्येक वेळी आपण सीएसएस च्या बरोबर खेळता प्रदर्शन मालमत्ता, ते मूर्खपणाच्या पूर्णपणे भिन्न बिटमध्ये स्वतःला पुनर्रचना करतात.

जर आपण माझ्यासारखे असाल तर आपण कदाचित आपल्या श्वासोच्छवासामध्ये हा बदल आणि आपल्या कीबोर्डसह सतत अधिक आक्रमक होऊन त्याचे निराकरण कराल. आणि तरीही त्या रणनीतीने माझ्यासाठी कार्य केले असले तरीही, मी अलीकडेच समजून घेण्यासाठी एक चांगला मार्ग शोधण्यासाठी निघालो प्रदर्शन मालमत्ता.

याची मूलभूत माहिती बाहेर वळते प्रदर्शन मी विचार केला त्यापेक्षा खूप सोपी आहेत. खरं तर, ते सूटकेस पॅक करण्यासारखीच तत्त्वे वापरतात. मी कव्हर करणार आहे प्रदर्शन: ब्लॉक, इनलाइन-ब्लॉक आणि इनलाइन. यापूर्वी आपण व्यवस्थित मार्गाने सूटकेसची व्यवस्था केली असल्यास आपल्याला समांतर दिसेल. जर आपण अशा प्रकारचे लोक आहात जे आपल्या सर्व कपड्यांना आळशी पद्धतीने भेडसावत असेल - तर, मी तुमच्यासाठी इतकेच करू शकतो.

आमच्या सूटकेसमध्ये तीन प्रकारचे कपडे असतील:

• कोलारेड शर्टसारखे डिलीकेट्स
• रोल-अप केले जाऊ शकते की टी-शर्ट
• मोजे किंवा कपड्याखाली घालायचे आतील कपडे जे अंतर मध्ये भरले जाऊ शकते

संदर्भासाठी, जर आम्ही एचटीएमएलमध्ये सूटकेस मॉडेल केली तर ते असे दिसेल:

div वर्ग = 'सूटकेस'> Div वर्ग = 'नाजूक' </ div> Div वर्ग = 'tshirt'> <div> div वर्ग = 'tshirt'> / div> div वर्ग = 'tshirt'> / div> div वर्ग = 'tshirt' </ div> div वर्ग = 'मोजे'> </ div> Div वर्ग = 'tshirt'> </ div> div वर्ग = 'tshirt'> / div> div वर्ग = 'tshirt'> / div> div वर्ग = 'tshirt'> </ div> / div>

वर नाजूक वस्तू

प्रदर्शन: ब्लॉक बहुतेक HTML घटकांसाठी डीफॉल्ट आहे. म्हणजेच घटक त्याच्या कंटेनरमध्ये संपूर्ण क्षैतिज जागा व्यापतो Div. जर हे इतर भावंडांच्या घटकांपुढे असेल तर ती एक नवीन ओळ सुरू करेल आणि इतर घटकांना त्याच्या ओळीत अनुमती देणार नाही. आपण आपल्या सूटकेसच्या शीर्षस्थानी ठेवलेल्या नाजूक वस्तूंसारखेच आहे. हे कोलेर्ड शर्टसारखे नाजूक किंवा स्मार्ट लेख आहेत. आपण त्यांची सुरकुतलेली होऊ नये अशी आपली इच्छा आहे, जेणेकरून इतर कपड्यांच्या तुकड्यात ते ओढवले जात नाहीत याची खात्री करुन घ्या.

याचा सर्वात कठीण भागांपैकी एक भाग समोर येतो प्रदर्शन: ब्लॉक. लक्षात घ्या की कॉलर शर्ट सूटकेसच्या संपूर्ण रूंदीवर कसा व्यापत नाही? याचा अर्थ असा नाही की इतर आयटम त्याच्या पातळीवर जाईल. असे म्हणा की हा शर्ट सूटकेसच्या रुंदीच्या 60 टक्के आहे; हे अन्य स्तरांवर उच्च स्तरावर सामील होण्यास अद्याप प्रतिबंधित करेल.

म्हणूनच चित्रात एक केशरी सीमा आहे. ए प्रदर्शन: ब्लॉक घटक संपूर्ण क्षैतिज जागा व्यापत नसल्यास घटक त्याभोवती स्वयंचलितपणे मार्जिन जोडेल.

सुबकपणे पॅक केलेले टी-शर्ट

आपल्या सहलीसाठी बहुतेक आपले सूटकेस आपल्या उर्वरित कपड्यांनी भरलेले आहे. साधेपणासाठी, आम्ही हे फक्त टी-शर्टमध्ये कमी करणार आहोत. फोल्डिंग किंवा रोलिंग अधिक कार्यक्षम आहे की नाही याबद्दल इंटरनेटवर मोठी चर्चा आहे. मी एक फोल्डिंग प्रकारची व्यक्ती आहे.

असं असलं तरी, बर्‍याच वस्तू फिट करण्यासाठी, तुम्ही तुमच्या टी-शर्टला शेजारी रांगेत लावा. हे नक्की काय आहे प्रदर्शन: इनलाइन-ब्लॉक साठी आहे. हे घटक एकाच ओळीवर एकमेकांच्या पुढे तसेच पुढे बसू शकतात प्रदर्शन: इनलाइन घटक.

आवडले नाही प्रदर्शन: इनलाइन घटक, एक इनलाइन-ब्लॉक घटक त्यामध्ये न बसल्यास पुढच्या ओळीवर जाईल Div दुसर्‍या बाजूला इनलाइन-ब्लॉक घटक. पुढील पंक्तीवर टी-शर्ट गळती येण्यासाठी, आपल्याला अर्ध्या भागामध्ये तो कट करावा लागेल आणि उर्वरित अर्धा नवीन पंक्ती सुरू करण्यासाठी वापरावा लागेल. इनलाइन-ब्लॉक एका ओळीवर फिट न बसल्यास घटकांना अर्ध्या भागामध्ये विभाजित करण्याची परवानगी नाही.

अंतर मोजणारे मोजे

मूळ HTML वर परत तपासा आणि आपण लक्षात घ्या की तेथे मोजे आहेत div> आठ टी-शर्ट दरम्यान. परंतु सूटकेसच्या उजवीकडील क्षैतिज दृश्याकडे पहा. जर मोजे असतील तर div>, ही मधली पंक्ती कशी संपवू शकेल आणि तळाची पंक्ती कशी सुरू करेल? हा उद्देश आहे प्रदर्शन: इनलाइन! 

एक इनलाइन ची रूंदी ओलांडल्यास घटक पुढील ओळीवर जाईल Div (या मार्गाने ते वेगळे आहे इनलाइन-ब्लॉक किंवा ब्लॉक). आमच्या मोजे असल्याने Div भरलेल्या मोजेने भरलेले आहे जे सहजपणे रिक्त स्थानांमध्ये भरलेले आहे, हे मधल्या ओळीच्या उजव्या बाजूला सहजपणे रिक्त जागा भरणे आणि तळाशी पंक्ती सुरू करण्यासाठी गळती घालू शकते.

हे होण्यासाठी कोणत्याही मोजे अर्ध्या भागात कापण्याची आवश्यकता नाही. म्हणूनच ते बनू शकतात इनलाइन, तर टी-शर्ट केवळ असू शकतात इनलाइन-ब्लॉक. जर मध्यम पंक्तीवरील टी-शर्टने रुंदीचा 60 टक्के भाग घेतला असेल तर मोजे div> उर्वरित पंक्तीतील संपूर्ण जागा भरण्यासाठी वर जाईल.

बोन प्रवास

आमच्या सुटकेससाठी हा अंतिम सीएसएस आहे:

.डिलीकेट {प्रदर्शन: ब्लॉक; रुंदी: 60%; ts .शर्ट {प्रदर्शन: इनलाइन-ब्लॉक; रुंदी: 20%; s .सॉक {प्रदर्शन: इनलाइन; }

प्रदर्शनाच्या वेगवेगळ्या वापराचे वर्णन करण्यासाठी येथे दोन पर्यायी परिस्थिती आहेत. शीर्षस्थानावर व्यंजन असल्यास प्रदर्शन: इनलाइन-ब्लॉक, ते टी-शर्टच्या बाजूने अगदी योग्य बसतील. काही टी-शर्ट वरच्या लाईनपर्यंत जातील आणि बाकीचे त्यानुसार समायोजित होतील. कोलरेड शर्टच्या डावी आणि उजवीकडे आरामदायक बफर नसेल.

प्रत्येक टी-शर्ट असल्यास प्रदर्शन ब्लॉक, आपल्याकडे प्रत्येक ओळीवर टी-शर्टचा भव्य स्टॅक असेल, प्रत्येक ओळीत. मोजे होते तर प्रदर्शन: इनलाइन-ब्लॉक, ते सर्व दोन ओळींमध्ये वाहण्यापेक्षा तळाशी असलेल्या पंक्तीवर बसतील. काही टी-शर्ट्स चौथ्या ओळीच्या रुपात दुसर्‍या ओळीवर ढकलली जातील. टी-शर्टच्या मधल्या ओळीच्या उजवीकडे एक अंतर असेल.

मी येथे वर्णन केलेल्या पद्धतीसह, आम्ही सुबक पॅक असलेली सूटकेस संपवितो जी उपलब्ध जागेचा सर्वोत्तम वापर करते.

हा लेख मूळतः आला निव्वळ मासिक अंक 289; ते येथे विकत घ्या!