CSS फ्लोट: वर्णन, गुण

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

साथै, विकासकर्ताहरूले पहिलो यस्तो Flexbox वा साइटमा स्पेस तत्व परिवर्तन गर्न स्थिति बढी सुविधाजनक ढाँचा विकल्पहरू, तर पहिलो कुरा प्रयोग गर्न सक्नुहुन्छ। लाभ र बेफाइदा गुण फ्लोट बुझ्न सुरु गर्न।

CSS फ्लोट - यो किन आवश्यक छ?

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

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

सम्पत्ति को CSS फ्लोट विवरण

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

हामी फ्लोट सम्पत्ति चार मान छ:

• फ्लोट: हकदार;
• फ्लोट: दायाँ;
• फ्लोट: बायाँ;
• फ्लोट: कुनै पनि होइन;

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

कसरी काम फ्लोट गर्न?

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

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

अर्को शब्दमा, तत्व सट्टा ठाडो अवस्थित छन्, अब एक अर्को आसन्न छन्। यो भित्र दुई छोराछोरीलाई समायोजित गर्न सक्छन् भनेर अभिभावक तत्व पर्याप्त ठाउँ छ भने, टकराव उत्पन्न गर्दैन, तर यदि, अर्को एक वस्तुको कर अपरिहार्य छ। यो फ्लोट CSS को गुण को समझ लागि सम्झना गर्न अत्यन्तै महत्त्वपूर्ण छ।

समस्या समाधान गर्न कार्य स्पष्ट

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

खाली मा प्रकार्य पाँच मान छ:

• : बायाँ;
• : दायाँ;
• : दुवै;
• : वंशानुगतप्राप्तगर्नुहोस्;
• कुनै पनि होइन;

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

स्तम्भहरू सिर्जना फ्लोट प्रयोग गर्न

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

अब हामी यहाँ लेखिएको छ बुझ्न आवश्यक छ। अभिभावक तत्व HTML-कोड को मुख्य भाग एक कन्टेनर (कन्टेनर) भनिन्छ जसमा। यो तपाईं फरक दिशामा छरिनु लागू हुन्छ जो फ्लोट समारोह तत्व, रोक्न अनुमति दिन्छ। यो थियो भने यी तत्व ब्राउजरको सीमाहरु सम्म floated छन्।

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

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

समस्याहरूको तपाईं कोड लेख्दा सामना सक्छ

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

तत्व को मतभेद

अभिभावक तत्व ती सबै समायोजित गर्न सक्दैन धेरै बच्चा समावेश गर्दा टकराव हुन्छ, र तिनीहरूले प्रत्येक अन्य ओभरल्याप छन्। यो पनि छ कि आइटम देखिन सक्छ, र साइटबाट गायब हुन्छ। यो बग ब्राउजर छैन, र यो आशा छ र फ्लोट समारोह संग तत्व को उचित व्यवहार।

कारण यी तत्व सामान्य पाठ्यक्रम सुरुमा हो, र त्यसपछि यसलाई भङ्ग छ फ्लोट सम्पत्ति ब्राउजर साइट तिनीहरूलाई हटाउन सक्नुहुन्छ भन्ने तथ्यलाई गर्न। तर समाधान सरल र स्पष्ट छ, किनभने निराश के - प्रयोग Cear सम्पत्ति। यो समस्या बाहिर तरिका सबै कि, खाली को प्रयोग सबैभन्दा प्रभावकारी हुन्छ सम्भव छ।

तर वेब पेज तत्व को टकराव को समस्या अर्को तरिकामा हल गर्न सकिन्छ। त्यहाँ कम्तीमा पनि दुई तरिकाहरू छन्:

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

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

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

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

#container {

चौडाई: 40%;

फ्लोट: बायाँ;

मार्जिन: 10px;

}

#div {

चौडाई: 40%;

फ्लोट: दायाँ;

मार्जिन: 10px;

}

#footer {

स्पष्ट: दुवै;

}

यो उदाहरण, दोस्रो कन्टेनर मा कार्यहरु को प्रयोग (CSS div) फ्लोट दुई स्तम्भहरू को एक मानक साइट बनाउन मद्दत गर्नेछ। हटाउनुहोस् समारोह कहिल्यै नबिर्सनुहोस्। बिना यो केवल प्रत्येक अन्य माथि तत्व ओभरले हुनेछ।

त्यसैले तपाईंलाई CSS कसरी परिवर्तन र Postion प्रयोग गर्न कोड फ्लोट गर्छन्? धेरै सरल:

#container {

चौडाई: 40%;

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

मार्जिन: 10px;

}

#div {

चौडाई: 40%;

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

मार्जिन: 10px;

}

यस मामला #container #div र अभिभावक तत्वको विकासकर्ता को आवश्यक स्थिति लिन। मुख्य कुरा? #div राख्नु र एक अभिभावक तत्व, आफ्नो आकार अनुरूप हुनेछ जो #container।

Flexbox - यो समारोह CSS फ्लोट प्रतिस्थापन गर्नेछ?

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

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

Flexbox कसरी?

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

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

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

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

#div {

फ्लोट: बायाँ;

मार्जिन-बायाँ: 10px;

}

यो कोड मा इन्टरनेट एक्सप्लोरर 20 पिक्सेल बायाँ तत्व पारी हुनेछ। निम्नानुसार तपाईं कोड परिमार्जन गर्न सक्नुहुन्छ:

#div {

फ्लोट: बायाँ;

मार्जिन-बायाँ: 10%;

}

या त

#div {

फ्लोट: बायाँ;

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

}

यी विकल्पहरू दुवै विस्थापन तत्व को समस्या समाधान हुनेछ।

त्रुटिहरू ब्राउजर र गलत प्रदर्शन साइट

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