सीएसएस फ्लोट: विवरण, गुण

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

इसके अलावा, डेवलपर्स इस तरह के flexbox या साइट पर अंतरिक्ष के तत्व को बदलने के लिए स्थिति के रूप में और अधिक सुविधाजनक स्वरूपण विकल्प है, लेकिन सबसे पहली बात का उपयोग कर सकते हैं। समझने के लिए फायदे और नुकसान गुण फ्लोट शुरू करने के लिए।

सीएसएस फ्लोट - यह क्यों आवश्यक है?

फ्लोट - स्थिति तत्वों के लिए संपत्ति। हर दिन, यह, समाचार पत्रों और पत्रिकाओं के पन्नों पर देखा जा सकता चित्र और पाठ, जो बहुत बड़े करीने से है उन्हें इर्द-गिर्द घूमती को देखकर। и CSS при использовании функции Float должно произойти то же самое. फ्लोट समारोह का उपयोग कर एक ही होना चाहिए द्वारा HTML और सीएसएस कोड की दुनिया में। लेकिन यह याद है कि छवि संपादन हमेशा इस समारोह का मुख्य उद्देश्य नहीं है लायक है। यह दो, तीन, चार स्तंभों में साइट के तत्वों के लोकप्रिय स्थान बनाने के लिए इस्तेमाल किया जा सकता है। वास्तव में, फ्लोट सीएसएस संपत्ति वास्तव में किसी भी एचटीएमएल तत्व किया जाता है। लेआउट तत्वों संपादन फ्लोट समारोह का उपयोग कर, और फिर संपत्ति, साइट के किसी भी डिजाइन बनाने के लिए की मूल बातें जानने के बाद मुश्किल नहीं होगा।

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

संपत्ति के सीएसएस फ्लोट वर्णन

वास्तव में, फ्लोट संपत्ति उपयोग करने की क्षमता किसी भी वेब डिजाइनर के लिए छेद में एक बहुत अच्छा इक्का है। लेकिन, दुर्भाग्य से, यह कैसे काम करता है की समझ की कमी टकराव और इस तरह की साइट दु: ख के अन्य तत्वों को जन्म दे सकती। इससे पहले भी ऐसी स्थितियों क्योंकि ब्राउज़र में कीड़े के होते हैं। अब कैसे ठीक फ्लोट संपत्ति का उपयोग करने के रहस्य खोला जाएगा, और इसके साथ कोई समस्या नहीं अधिक नहीं होना चाहिए।

हम फ्लोट संपत्ति है चार मूल्यों:

• फ्लोट: वारिस;
• फ्लोट: सही;
• फ्लोट: छोड़ दिया;
• फ्लोट: कोई नहीं;

जो लोग अंग्रेजी जानते हैं, पैरामीटर मान फ्लोट संपत्ति स्पष्ट होना चाहिए। लेकिन जो पता नहीं है के लिए, आप एक छोटे से स्पष्टीकरण ला सकता है। पैरामीटर: बायां; यह माता पिता के तत्व का सबसे चरम बाएँ कोने में तत्व शरीर बढ़ता रहता है। एक ही बात (केवल अन्य तरीके से) होता है जब bcgjkmpjdfybb पैरामीटर: ठीक है, । मान: वारिस; तत्व माता पिता की तरह ही विन्यास ग्रहण करने के लिए आदेश देता है। इस तरह के तत्वों बच्चे अभी भी कहा जाता है, के रूप में वे सीधे माता पिता एचटीएमएल-इन कोड के भीतर स्थित हैं। एक संपत्ति: कोई नहीं; यह तत्व दस्तावेज है, जो कोड के सभी भागों के लिए सेट किया जाता है के सामान्य प्रवाह को बाधित नहीं करने के लिए अनुमति देता है।

कैसे काम फ्लोट करने के लिए?

फ्लोट सीएसएस संपत्ति काफी बस काम करता है। सभी कि ऊपर वर्णित किया गया है, अधिक कठिनाई के बिना किया जा सकता है। उसके बाद, सब कुछ बस के रूप में आसान हो जाएगा। लेकिन इससे पहले कि मैं फ्लोट गुणों का अध्ययन जारी है, सिद्धांत में एक छोटे से देखो लायक। हर वेब साइट ब्लॉक का एक तत्व है। यह दबाने Ctrl + Shift + जे पाठ, शीर्षक, छवि, लिंक से गूगल क्रोम में कंसोल खोलकर देखने के लिए आसान है, और साइट के अन्य सभी घटकों को ब्लॉक, बस विभिन्न आकारों प्रदर्शित किया जाएगा। प्रारंभ में, इन सभी ब्लॉक एक दूसरे का अनुसरण कर रहे। के रूप में नीचे दिखाए गए उदाहरण, कोड स्ट्रिंग एक के बाद एक जाना है, और इसलिए वे सख्ती से दूसरे के पीछे दिखाई देते हैं।

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

दूसरे शब्दों में, तत्वों के बजाय खड़ी तैनात कर रहे हैं, अब एक-दूसरे के निकट हैं। पेरेंट तत्व पर्याप्त जगह है इतना है कि यह दो बच्चों के अंदर समायोजित कर सकते हैं, टकराव नहीं होती है, लेकिन यदि नहीं, एक से दूसरे वस्तु लगाने अनिवार्य है। यह फ्लोट सीएसएस के गुणों की समझ के लिए याद करने के लिए अत्यंत महत्वपूर्ण है।

साफ समारोह समस्याओं को हल करने

हम फ्लोट एक दिल प्रत्येक सुविधाओं - साफ़। साथ में वे - पानी गिर नहीं है। इन सुविधाओं में से दोनों एक दूसरे के पूरक और डेवलपर को खुश करने के। जैसा कि ऊपर उल्लेख, पड़ोसी कोशिकाओं अपने सामान्य पाठ्यक्रम से बाहर जाने के लिए और भी तत्व को जो फ्लोट संपत्ति इस्तेमाल किया गया था (उदाहरण के लिए, सीएसएस फ्लोट शीर्ष) के रूप में "फ्लोट" शुरू करते हैं। नतीजतन, एक अस्थायी तत्व के बजाय जगह है जहाँ वे डेवलपर की व्यवस्था करने का इरादा में दो हो जाता है, और नहीं। उस क्षण से सिर्फ सभी समस्याओं की शुरुआत है।

साफ पर समारोह पाँच मान होते हैं:

• : छोड़ा;
• : सही;
• : दोनों;
• : वारिस;
• कोई नहीं;

तुल्यता के आधार पर हम समझ सकते हैं जब यह सबसे अच्छा है साफ समारोह का उपयोग करने के। हम कोड फ्लोट में एक पंक्ति में लिखा है, तो: ठीक है, (सीएसएस-कोड का मतलब है), समारोह स्पष्ट होना चाहिए: सही ;. चट्टानों और का एक ही गुण फ्लोट: छोड़ा; यह स्पष्ट पूरक होगा: बायां; । जब साफ कोड लिखने: दोनों; यह पता चला है कि करने के लिए तत्व है जो यह लागू किया जाता है, इस सुविधा तत्व है जो करने के लिए फ्लोट समारोह लागू किया नीचे हो जाएगा। इनहेरिट पेरेंट तत्व से सेटिंग्स लेता है, लेकिन कोई भी साइट की संरचना में कोई परिवर्तन नहीं है। и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. यदि आप समझते हैं कि कैसे फ्लोट और कार्यों साफ़ करें, आप एक अद्वितीय और असामान्य HTML और सीएसएस फ्लोट-कोड है, जो अपनी वेबसाइट अपनी तरह में अद्वितीय कर देगा लिख सकते हैं।

फ्लोट का उपयोग कॉलम बनाने के लिए

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

अब हम समझने के लिए यहाँ क्या लिखा है की जरूरत है। पेरेंट तत्व जिसमें एचटीएमएल कोड का मुख्य हिस्सा एक कंटेनर (कंटेनर) कहा जाता है। यह आप तत्व है, जो अलग अलग दिशाओं में तितर बितर करने के लिए फ्लोट समारोह लागू किया जाता है को रोकने के लिए अनुमति देता है। यदि ऐसा नहीं था, तो इन तत्वों ब्राउज़र की सीमाओं से ऊपर जारी कर दिया है।

फिर, कोड में और #content #navigation जाना। इन तत्वों को फ्लोट समारोह किया जाता है। बाईं ओर और सही करने के लिए भेजा #content #navigation है। यह दो कॉलम के साथ एक साइट बनाने के लिए आवश्यक है। ताकि वस्तुओं एक दूसरे को ओवरलैप नहीं, चौड़ाई निर्दिष्ट करने के लिए सुनिश्चित करें। आप चौड़ाई और प्रतिशत निर्दिष्ट कर सकते हैं। तो और भी अधिक आरामदायक पिक्सल की तुलना में। उदाहरण के लिए, 45% और #navigation के लिए #content, और शेष 10% करने के लिए 45% संपत्ति मार्जिन देने के लिए।

साफ है, जो #footer में है, की संपत्ति पाद लेख #navigation और #content का पालन नहीं करता, लेकिन एक ही जगह है जहाँ वह था करने के लिए इसे छोड़ देता है। क्या कर सकते हैं? आप स्पष्ट संपत्ति निर्दिष्ट नहीं करते हैं? इस कोड को #footer में बस जाने के लिए और #navigation के तहत किया जाएगा। यह तथ्य यह है कि #navigation पर्याप्त जगह एक से अधिक घटक को प्रदर्शित करने के कारण होता है। इस उदाहरण उदाहरण में यह कैसे स्पष्ट के गुणों फ्लोट और एक दूसरे के पूरक स्पष्ट रूप से दिख रहा है।

मुसीबतों आपके सामने आ सकने जब कोड लिखने

उपरोक्त उदाहरण सरल हैं। लेकिन उन लोगों के साथ समस्या पैदा कर सकते। आम तौर पर, वास्तव में, अप्रत्याशित मुसीबत का एक बहुत समारोह फ्लोट करने के लिए हो सकता है। चाहे कितना अजीब है, लेकिन समस्याओं आमतौर पर सीएसएस के साथ नहीं होती है, और एक एचटीएमएल-कोड। जहां एक एचटीएमएल कोड में फ्लोट समारोह के साथ तत्व सीधे अंतिम काम को प्रभावित करता है स्थान। स्थिति तत्वों पहले कोड के समारोह फ्लोट - क्रम कठिनाइयों के विभिन्न प्रकार से बचने के लिए, यह सरल नियमों का पालन करने के लिए सबसे अच्छा है। लगभग हमेशा यह काम करता है और उनके अप्रत्याशित व्यवहार को कम करने।

तत्वों का संघर्ष

टकराव तब होता है जब माता पिता तत्व उन सब को समायोजित नहीं कर सकते कई बच्चे होते हैं, और वे एक दूसरे को ओवरलैप। यह भी होता है कि आइटम प्रकट नहीं हो सकता है, और इस साइट से गायब। यह एक बग ब्राउज़र नहीं है, और यह उम्मीद और फ्लोट समारोह के साथ तत्वों की उचित व्यवहार कर रहा है।

तथ्य यह है कि इन तत्वों सामान्य कोर्स में शुरू कर रहे हैं, और फिर इसे टूट गया है फ्लोट संपत्ति ब्राउज़र साइट से उन्हें निकाल सकते हैं के कारण। लेकिन निराशा नहीं करते हैं, क्योंकि समाधान सरल और स्पष्ट है - CEAR संपत्ति का उपयोग करें। यह संभव है इस समस्या से बाहर तरीके के सभी कि, स्पष्ट के उपयोग के सबसे प्रभावी है।

लेकिन वेब पृष्ठ तत्वों की टक्कर की समस्या किसी अन्य तरीके से हल किया जा सकता। वहाँ कम से कम दो तरीके हैं:

• समारोह के उपयोग स्थिति;
• आवेदन flexbox।

स्थिति समारोह अक्सर सीएसएस फ्लोट करने के लिए एक अच्छा विकल्प है। आवेदन की स्थिति के मामले में वेब पेज के केंद्र में चित्र को स्थान देने के लिए सबसे अच्छा है। अगर ठीक से लागू किया मान: निरपेक्ष और सापेक्ष, तत्वों जगह में गिर जाते हैं, और एक दूसरे ओवरलैप नहीं करेंगे।

स्थिति विश्लेषण और फ्लोट समारोह कोड

и CSS Float заменить на Position. यह HTML में जिस तरह से और सीएसएस फ्लोट स्थिति द्वारा प्रतिस्थापित के साथ और अधिक सौदा करना चाहिए। वास्तव में यह बहुत आसान है। मान लीजिए कि एक तत्व #container और #div है करते हैं।

#container {

चौड़ाई: 40%;

फ्लोट: छोड़ दिया;

मार्जिन: 10px;

}

#div {

चौड़ाई: 40%;

फ्लोट: सही;

मार्जिन: 10px;

}

#footer {

clear: both;

}

इस उदाहरण में, दूसरा कंटेनर में कार्यों का उपयोग (सीएसएस डिव) फ्लोट दो कॉलम का एक मानक साइट बनाने के लिए मदद मिलेगी। कभी साफ समारोह भूल जाते हैं। बिना यह केवल एक दूसरे के ऊपर पर तत्वों पर दर्शाई जाएगी।

तो तुम सीएसएस कैसे बदल सकते हैं और स्थिति का उपयोग करने के कोड फ्लोट करते हैं? बहुत ही सरल:

#container {

चौड़ाई: 40%;

स्थिति: रिश्तेदार;

मार्जिन: 10px;

}

#div {

चौड़ाई: 40%;

स्थिति: रिश्तेदार;

मार्जिन: 10px;

}

इस मामले #container #div में और माता पिता के तत्व में डेवलपर के लिए आवश्यक स्थान लेने। मुख्य बात? #div रख दिया और एक माता पिता तत्व है, जो अपने आकार के अनुरूप होगा #container।

Flexbox - इस समारोह सीएसएस फ्लोट का स्थान ले लेगा?

Flexbox - पल में वेबसाइट बनाने के लिए सबसे उन्नत तरीका है, इसलिए इस समारोह ब्राउज़रों के पुराने संस्करणों के द्वारा समर्थित नहीं है। इस तथ्य को ब्राउज़रों के पुराने संस्करणों के साथ उपयोगकर्ताओं के लिए, रियायती नहीं किया जा साइट का सही संस्करण को देखने के लिए सक्षम नहीं होगा।

Flexbox एक अलग मॉड्यूल के रूप में एक संपत्ति, नहीं है। इसलिए flexbox गुण है, जो केवल उसके साथ काम के एक नंबर का समर्थन करता है। इसके अलावा, प्रदर्शन समारोह है, जो तीन मापदंडों इनलाइन है, ब्लॉक और flexbox में इनलाइन-ब्लॉक वहाँ केवल एक फ्लेक्स-प्रवाह है।

कैसे flexbox करता है?

यह तकनीक डेवलपर आसानी से तत्व क्षैतिज और खड़ी संरेखित करने के लिए मदद करता है। Flexbox भी दिशा और प्रदर्शन तत्वों का क्रम बदल सकते हैं। मुख्य धुरी और क्रॉस धुरी है, जो चारों ओर पूरे flexbox बनाया: इस तकनीक में, दो कुल्हाड़ियों हैं। यह भी प्रभाव फ्लोट और कार्यों साफ़ निकाल देता है। वह कोड है, जो उसकी संपत्ति के लिए एक अनूठा का उपयोग करता है में अपने सिस्टम बनाता है, इसलिए, दुर्भाग्य से, नहीं कोशिकाओं में दोहराने के लिए सक्षम हो इस तरह फ्लोट और स्थिति के रूप में अन्य गुण,। और यह बहुत आसान हो सकता है, क्योंकि जैसा कि ऊपर उल्लेख किया है, flexbox केवल ब्राउज़रों के नए संस्करण में काम करेंगे।

यह अंत स्थिति, flexbox फ्लोट में याद है कि और एक ही बात कर लायक है - आपकी साइट का एक असामान्य और मूल डिजाइन बना सकते हैं। लेख में चर्चा के प्रत्येक संस्करण अपने तरीके से यह करता है और इसलिए, दोनों फायदे और नुकसान हैं। इसके अलावा, यह है कि कहीं सही फ्लोट समारोह (उदाहरण के लिए, एक सरल संरचना के साथ स्थल पर), लेकिन कहीं न कहीं बेहतर स्थिति या flexbox उपयोग करने के लिए होता है।

डबल मार्जिन बग

लेकिन, कभी कभी, दुर्भाग्य से, हर डेवलपर समस्या नहीं लिखे कोड से, कीड़े के साथ और कुछ ब्राउज़र विशिष्ट रूप में उत्पन्न होती हैं। उदाहरण के लिए, Internet Explorer में, वहाँ एक बग, जो डबल मार्जिन बग कहा जाता है। वह दो के लिए मार्जिन पैरामीटर गुणा करता है, ब्राउज़र सीमा के साइट के तत्वों के विस्थापन हो जाती है। इससे बचने के लिए, यह पैरामीटर मार्जिन का प्रतिशत इंगित करने के लिए पर्याप्त है। आम तौर पर इस बग तब होता है जब y और गुण मार्जिन फ्लोट बिंदु के मूल्य।

#div {

फ्लोट: छोड़ दिया;

margin-left: 10px;

}

इस कोड को इंटरनेट एक्सप्लोरर 20 पिक्सल बाईं में तत्व परिवर्तन होगा। इस प्रकार आप कोड को संशोधित कर सकते हैं:

#div {

फ्लोट: छोड़ दिया;

margin-left: 10%;

}

या तो

#div {

फ्लोट: छोड़ दिया;

मार्जिन-सही: 10px;

}

इन विकल्पों में से दोनों विस्थापन तत्वों की समस्या का समाधान होगा।

कीड़े ब्राउज़र और गलत प्रदर्शन साइट

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