तत्व की ऊंचाई और चौड़ाईगणना की गई मात्राएँ हैं। वेब पेज का प्रत्येक तत्व एक आयताकार क्षेत्र बनाता है, जिसमें कई क्षेत्र शामिल होते हैं - सामग्री क्षेत्र, पैडिंग क्षेत्र, फ़्रेम क्षेत्रऔर क्षेत्र क्षेत्रतत्व।
तत्व की सामग्री और उसकी सीमा के बीच हैं खरोजपैडिंग, तत्व की सीमा के बाहर - खेतअंतर । प्रत्येक तत्व के लिए एक सामग्री क्षेत्र मौजूद है; अन्य क्षेत्र वैकल्पिक हैं।
चावल। 1. किसी तत्व का ब्लॉक मॉडल1. तत्व की ऊँचाई
ऊंचाई गुण ब्लॉक तत्व की सामग्री की ऊंचाई निर्दिष्ट करता है और इनलाइन तत्वों पर कोई प्रभाव नहीं डालता है डिस्प्ले: इनलाइन; . इनलाइन तत्वों की ऊंचाई उनकी सामग्री की ऊंचाई के बराबर है। नकारात्मक मानों की अनुमति नहीं है. संपत्ति विरासत में नहीं मिली है.
वाक्य - विन्यास
पी (ऊंचाई: 100px;)
2. तत्व की चौड़ाई
चौड़ाई गुण ब्लॉक तत्व की सामग्री की चौड़ाई निर्दिष्ट करता है और इनलाइन तत्वों पर कोई प्रभाव नहीं डालता है डिस्प्ले: इनलाइन; . इनलाइन तत्वों की चौड़ाई उनकी सामग्री की चौड़ाई के बराबर है। नकारात्मक मानों की अनुमति नहीं है. संपत्ति विरासत में नहीं मिली है.
वाक्य - विन्यास
पी (चौड़ाई: 100px;)
3. बिल्कुल स्थित तत्व की ऊंचाई और चौड़ाई
बिल्कुल स्थित तत्व की चौड़ाई और ऊंचाई निर्धारित करें स्थिति: निरपेक्ष; हमेशा आवश्यक नहीं है, क्योंकि इस मामले में ऊंचाई और चौड़ाई तत्व के ऑफसेट द्वारा अंतर्निहित रूप से निर्धारित की जाती है। यदि किसी तत्व में सीमाएँ और मार्जिन निर्दिष्ट हैं, तो वे सामग्री क्षेत्र के आकार को उचित मानों से कम कर देते हैं।
Div (पृष्ठभूमि: #6ए7690; स्थिति: पूर्ण; शीर्ष: 0; निचला: 0; बाएँ: 50%; दाएँ: 0; ) /*इस मामले में, तत्व की ऊँचाई 100% है, चौड़ाई 50% है मूल ब्लॉक*/
चावल। 2. बिल्कुल स्थित तत्व की ऊंचाई और चौड़ाई
4. तत्व गद्दी
पैडिंग प्रॉपर्टी का उपयोग करके, आप निम्नलिखित क्रम में किसी तत्व के कई पक्षों के लिए एक साथ पैडिंग सेट कर सकते हैं:। यदि तत्व की पृष्ठभूमि है, तो यह पैडिंग पर भी लागू होगा। नकारात्मक मानों की अनुमति नहीं है. संपत्ति विरासत में नहीं मिली है.
यदि तीन मान दिए गए हैं, उदाहरण के लिए, div (पैडिंग: 10px 20px 30px;), तो उन्हें निम्नलिखित क्रम में वितरित किया जाएगा: पहला मान शीर्ष पैडिंग है, दूसरा दाएं और बाएं पैडिंग है, तीसरा है निचला गद्दी है.
यदि दो मान दिए गए हैं, उदाहरण के लिए, div (पैडिंग: 10px 20px;), तो पहला ऊपर और नीचे पैडिंग सेट करेगा, दूसरा दाएं और बाएं सेट करेगा।
एक एकल मान, जैसे div (padding: 10px;) , तत्व के सभी पक्षों पर समान पैडिंग सेट करेगा।
वाक्य - विन्यास
पी (पैडिंग: 5px 10px 15px 10px;)
4.1. किसी तत्व के एक तरफ पैडिंग
किसी तत्व के केवल एक तरफ पैडिंग सेट करने के लिए, आपको पैडिंग-टॉप, पैडिंग-राइट, पैडिंग-बॉटम, पैडिंग-लेफ्ट में से किसी एक गुण का उपयोग करने की आवश्यकता है, उदाहरण के लिए:
पी (पैडिंग-बाएं: 10px;)
5. तत्व मार्जिन
अधिकांश तत्व हाशिये से एक दूसरे से अलग होते हैं। मार्जिन प्रॉपर्टी किसी तत्व के फ़ील्ड को निम्नलिखित क्रम में रिकॉर्ड करने का एक संक्षिप्त रूप है: ऊपर, दाएँ, नीचे, बाएँ. इसका उपयोग तब किया जाता है जब आपको कई पक्षों पर मार्जिन सेट करने की आवश्यकता होती है, लेकिन जरूरी नहीं कि चार पर। ब्लॉक तत्वों के लंबवत आसन्न मार्जिन ध्वस्त हो जाते हैं, और ऊपर और नीचे के मार्जिन का इनलाइन तत्वों पर कोई प्रभाव नहीं पड़ता है। नकारात्मक मानों की अनुमति है. संपत्ति विरासत में नहीं मिली है.
यदि तीन मान दिए गए हैं, उदाहरण के लिए, div (मार्जिन: 10px 20px 30px;), तो उन्हें निम्नलिखित क्रम में वितरित किया जाएगा: पहला मान शीर्ष मार्जिन है, दूसरा दायां और बायां मार्जिन है, तीसरा निचला मार्जिन है.
यदि दो मान दिए गए हैं, उदाहरण के लिए, div (मार्जिन: 10px 20px;), तो पहला शीर्ष और निचला मार्जिन सेट करेगा, दूसरा दाएं और बाएं सेट करेगा।
एक एकल मान, जैसे div (margin: 10px;) , तत्व के सभी पक्षों पर समान मार्जिन सेट करेगा।
(मार्जिन: 0 ऑटो;) केवल तभी काम करेगा जब तत्व की चौड़ाई स्पष्ट रूप से निर्दिष्ट हो।
चावल। 3. मार्जिन: ऑटो; बिल्कुल स्थित तत्व के लिए
वाक्य - विन्यास
डिव (मार्जिन: 5px 10px 2px 5px;)
5.1. तत्व के एक तरफ मार्जिन
गुण मार्जिन-टॉप, मार्जिन-राइट, मार्जिन-बॉटम, मार्जिन-लेफ्ट तत्व के प्रत्येक पक्ष पर संबंधित मार्जिन को नियंत्रित करते हैं, उदाहरण के लिए:
पी (मार्जिन-बाएं: 10px;)
6. चौड़ाई और ऊंचाई की सीमा
सीएसएस वेब पेज तत्वों की ऊंचाई और चौड़ाई निर्धारित करने से संबंधित कई अन्य गुणों का भी समर्थन करता है: न्यूनतम-ऊंचाई, न्यूनतम-चौड़ाई, अधिकतम-ऊंचाई और अधिकतम-चौड़ाई। ये गुण आपको किसी तत्व की चौड़ाई या ऊंचाई के लिए न्यूनतम और अधिकतम मान निर्धारित करने की अनुमति देते हैं, जिससे तत्व को उपलब्ध स्थान को भरने की क्षमता मिलती है। प्रतिक्रियाशील वेब पेज डिज़ाइन के लिए अक्सर गुणों का उपयोग किया जाता है। इनलाइन और टेबल तत्वों को छोड़कर सभी तत्वों पर लागू होता है। वे हमेशा मुख्य नियम के बाद आते हैं, यानी। तत्व को ऊंचाई या चौड़ाई देने के बाद। विरासत में नहीं मिला.
आप माप की कुछ इकाइयों का उपयोग करके नियमित आयाम निर्दिष्ट कर सकते हैं, और अन्य इकाइयों का उपयोग करके आकार प्रतिबंध निर्दिष्ट कर सकते हैं, उदाहरण के लिए:
Div (चौड़ाई: 400px; अधिकतम-चौड़ाई: 50%; )
तत्व की चौड़ाई केवल 400px होगी यदि यह मान कंटेनर ब्लॉक की चौड़ाई के 50% से अधिक नहीं है, अन्यथा इसकी चौड़ाई कम हो जाएगी।
विवरण
ब्लॉक-स्तर या बदले जाने योग्य तत्वों की ऊंचाई निर्धारित करता है (उदाहरण के लिए, टैग ). ऊंचाई में तत्व, पैडिंग या मार्जिन के आसपास की सीमाओं की मोटाई शामिल नहीं है।
यदि ब्लॉक की सामग्री निर्दिष्ट ऊंचाई से अधिक है, तो तत्व की ऊंचाई अपरिवर्तित रहेगी और सामग्री उसके शीर्ष पर प्रदर्शित की जाएगी। इस सुविधा के कारण, जब HTML कोड में तत्व क्रमिक रूप से प्रकट होते हैं तो तत्वों की सामग्री ओवरलैप हो सकती है। ऐसा होने से रोकने के लिए, तत्व की शैली में ओवरफ़्लो: ऑटो जोड़ें।
वाक्य - विन्यास
ऊँचाई: मान | रुचि | ऑटो | इनहेरिट
मान
सीएसएस में स्वीकृत किसी भी लंबाई की इकाइयों को मान के रूप में स्वीकार किया जाता है - उदाहरण के लिए, पिक्सेल (पीएक्स), इंच (इंच), पॉइंट (पीटी), आदि। प्रतिशत नोटेशन का उपयोग करते समय, तत्व की ऊंचाई की गणना ऊंचाई के आधार पर की जाती है मूल तत्व. यदि पेरेंट स्पष्ट रूप से निर्दिष्ट नहीं है, तो ब्राउज़र विंडो उसके रूप में कार्य करती है। स्वचालित रूप से तत्व की सामग्री के आधार पर ऊंचाई निर्धारित करता है
HTML5 CSS2.1 IE Cr Op Sa Fx
परिणाम यह उदाहरणचित्र में दिखाया गया है 1.
चावल। 1. ऊंचाई गुण लागू करना
वस्तु मॉडल
document.getElementById("elementID").style.height
ब्राउज़र्स
इंटरनेट एक्सप्लोरर 6 गलत तरीके से ऊंचाई को न्यूनतम-ऊंचाई के रूप में परिभाषित करता है।
क्विर्क मोड में, 8.0 तक और इसमें शामिल इंटरनेट एक्सप्लोरर संस्करण किसी तत्व की ऊंचाई की गलत गणना करते हैं, बिना पैडिंग, मार्जिन या बॉर्डर मान जोड़े।
7.0 तक और इसमें शामिल इंटरनेट एक्सप्लोरर संस्करण इनहेरिट मान का समर्थन नहीं करते हैं।
डिफ़ॉल्ट रूप से, ब्लॉक तत्व ऑटोविड्थ का उपयोग करते हैं। इसका मतलब यह है कि तत्व क्षैतिज रूप से उतना ही फैलाया जाएगा जितना खाली स्थान है। ब्लॉक तत्वों की डिफ़ॉल्ट ऊंचाई स्वचालित रूप से सेट की जाती है, अर्थात। ब्राउज़र सामग्री क्षेत्र को लंबवत रूप से फैलाता है ताकि सभी सामग्री प्रदर्शित हो सके। किसी तत्व के सामग्री क्षेत्र के लिए कस्टम आयाम सेट करने के लिए, आप चौड़ाई और ऊंचाई गुणों का उपयोग कर सकते हैं।
सीएसएस चौड़ाई संपत्ति आपको तत्व के सामग्री क्षेत्र की चौड़ाई निर्धारित करने की अनुमति देती है, और ऊंचाई संपत्ति आपको सामग्री क्षेत्र की ऊंचाई निर्धारित करने की अनुमति देती है:
ध्यान दें कि चौड़ाई और ऊंचाई गुण केवल सामग्री क्षेत्र का आकार निर्धारित करते हैं; ब्लॉक तत्व की कुल चौड़ाई की गणना करने के लिए, आपको सामग्री क्षेत्र की चौड़ाई, बाएँ और दाएँ पैडिंग, और बाएँ और की चौड़ाई को जोड़ना होगा। दाहिनी सीमा. तत्व की समग्र ऊंचाई के लिए भी यही बात लागू होती है, केवल सभी मानों की गणना लंबवत रूप से की जाती है:
इस पैराग्राफ के लिए, हम केवल चौड़ाई और ऊंचाई निर्धारित करेंगे।
इस पैराग्राफ में चौड़ाई और ऊंचाई के अलावा, एक आंतरिक पैडिंग, एक बॉर्डर और एक बाहरी पैडिंग शामिल है।
कोशिश "उदाहरण स्पष्ट रूप से दिखाता है कि दूसरा तत्व पहले की तुलना में अधिक जगह लेता है। यदि हम अपने सूत्र का उपयोग करके गणना करते हैं, तो पहले पैराग्राफ के आयाम 150x100 पिक्सेल हैं, और दूसरे पैराग्राफ के आयाम हैं:
समग्र ऊंचाई: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130px |
शीर्ष चौखटा | अपर खरोज | ऊंचाई | निचला खरोज | निचला चौखटा |
यानी 180x130 पिक्सल.
तत्व अतिप्रवाह
एक बार जब आप किसी तत्व के लिए चौड़ाई और ऊंचाई निर्धारित कर लेते हैं, तो आपको एक महत्वपूर्ण बिंदु पर ध्यान देना चाहिए - तत्व के अंदर स्थित सामग्री निर्दिष्ट ब्लॉक आकार से अधिक हो सकती है। इस मामले में, कुछ सामग्री तत्व की सीमाओं से परे चली जाएगी, इस अप्रिय क्षण से बचने के लिए, आप सीएसएस अतिप्रवाह संपत्ति का उपयोग कर सकते हैं। ओवरफ़्लो प्रॉपर्टी ब्राउज़र को बताती है कि यदि किसी ब्लॉक की सामग्री उसके आकार से अधिक हो तो क्या करना है। यह संपत्ति चार मानों में से एक ले सकती है:
- दृश्यमान - ब्राउज़र द्वारा उपयोग किया जाने वाला डिफ़ॉल्ट मान। इस मान को सेट करने का वही प्रभाव होगा जो ओवरफ्लो प्रॉपर्टी को सेट न करने का होगा।
- स्क्रॉल - किसी तत्व में लंबवत और क्षैतिज स्क्रॉल बार जोड़ता है।
- ऑटो - यदि आवश्यक हो तो स्क्रॉलबार जोड़ता है।
- छिपा हुआ - सामग्री का वह हिस्सा छुपाता है जो ब्लॉक तत्व की सीमाओं से परे फैला हुआ है।
इस लेख में, हम देखेंगे कि सीएसएस में आप किसी ब्लॉक की ऊंचाई को उसकी चौड़ाई के प्रतिशत के रूप में कैसे सेट कर सकते हैं। आइए विभिन्न आकारों की छवियों से बूटस्ट्रैप हिंडोला (स्लाइडर) बनाने के उदाहरण का उपयोग करके इस तकनीक के उपयोग पर विचार करें।
ऐसी ऊँचाई वाला एक ब्लॉक बनाना जो उसकी चौड़ाई का एक निश्चित प्रतिशत हो
- 2 ब्लॉकों की एक HTML संरचना बनाएं:
- पृष्ठ पर निम्नलिखित सीएसएस कोड जोड़ें: .आइटम-उत्तरदायी (स्थिति: सापेक्ष; /* सापेक्ष स्थिति */ ) .आइटम-उत्तरदायी:पहले (प्रदर्शन: ब्लॉक; /* तत्व को ब्लॉक के रूप में प्रदर्शित करें */ सामग्री: "" ; /* सामग्री छद्म-तत्व */ चौड़ाई: 100%; /* तत्व चौड़ाई */ ) .आइटम-16by9 (पैडिंग-टॉप: 56.25%; /* (9:16)*100% */ ) .आइटम-उत्तरदायी >.सामग्री (स्थिति: पूर्ण; /* तत्व की पूर्ण स्थिति */ शीर्ष: 0; दाएँ: 0; निचला: 0; /* यदि आवश्यक हो (उन ब्लॉकों के लिए जिनमें ये वर्ग हैं) -4बाय3 (पैडिंग-टॉप: 75% ; /* (3:4)*100% */ ) .आइटम-2बाय1 ( पैडिंग-टॉप: 50%; /* (1:2)*100% */ ) .आइटम -1बाय1 ( पैडिंग-टॉप: 100% ; /* (1:1)*100% */ )
बूटस्ट्रैप कैरोसेल बनाने के लिए उपरोक्त तकनीक का उपयोग करना
यदि आप बूटस्ट्रैप से परिचित नहीं हैं और जानना चाहते हैं कि यह क्या है, तो आप बूटस्ट्रैप का परिचय लेख का उपयोग कर सकते हैं।
आइए एक उदाहरण देखें जिसमें हम बूटस्ट्रैप कैरोसेल स्लाइड्स को प्रदर्शित करने के लिए उपरोक्त HTML संरचना और सीएसएस कोड का उपयोग करेंगे।
हम निम्नलिखित फ़ाइलों को छवियों के रूप में उपयोग करेंगे:
- हिंडोला_1.jpg (चौड़ाई = 736px, ऊंचाई = 552px, पहलू अनुपात (ऊंचाई से चौड़ाई) = 1.33);
- हिंडोला_2.jpg (चौड़ाई = 1155px, ऊंचाई = 1280px, पहलू अनुपात (ऊंचाई से चौड़ाई) = 0.9);
- हिंडोला_3.jpg (चौड़ाई = 1846px, ऊंचाई = 1028px, पहलू अनुपात (ऊंचाई से चौड़ाई) = 1.8);
- हिंडोला_4.jpg (चौड़ाई = 1140px, ऊंचाई = 550px, पहलू अनुपात (ऊंचाई से चौड़ाई) = 2.07);
- हिंडोला_5.jpg (चौड़ाई = 800px, ऊंचाई = 600px, पहलू अनुपात (ऊंचाई से चौड़ाई) = 1.33);
हम छवियों को पृष्ठभूमि के रूप में सेट करेंगे। यह आपको अपने बूटस्ट्रैप कैरोसेल में असमान पहलू अनुपात वाली 3 छवियों का उपयोग करने की अनुमति देगा।
हिंडोला का HTML मार्कअप:
हिंडोला सीएसएस कोड:
आइटम-उत्तरदायी (स्थिति: सापेक्ष; / * सापेक्ष स्थिति */) .आइटम-उत्तरदायी: पहले (प्रदर्शन: ब्लॉक; / * तत्व को ब्लॉक के रूप में प्रदर्शित करें */ सामग्री: ""; / * छद्म-तत्व सामग्री */ चौड़ाई : 100%; /* तत्व चौड़ाई */ ) .आइटम-16बी9 (पैडिंग-टॉप: 56.25%; /* (9:16)*100% */ ) .आइटम-उत्तरदायी>.सामग्री (स्थिति: निरपेक्ष; /* तत्व की पूर्ण स्थिति * //* तत्व स्थिति */ शीर्ष: 0; पृष्ठभूमि-आकार: कवर !महत्वपूर्ण)
HTML में अधिकांश तत्वों को आमतौर पर एक विशिष्ट ऊंचाई और चौड़ाई दी जाती है। सीएसएस में इन मापदंडों को सेट करना काफी आसान है और परिणामस्वरूप, व्यावहारिक है। इसके लिए आपको पहले से ज्ञात ऊंचाई और चौड़ाई गुणों का उपयोग किया जाता है। हालाँकि, इस पाठ में हम गैर-निश्चित चौड़ाई और ऊँचाई या रबर के बारे में भी बात करेंगे, जो कि खिड़की की चौड़ाई पर ही निर्भर करता है। आएँ शुरू करें)
चौड़ाई
यह प्रॉपर्टी HTML तत्व के लिए एक विशिष्ट चौड़ाई निर्धारित करती है। मान को पिक्सेल, प्रतिशत में निर्दिष्ट किया जा सकता है (अन्य मान कम बार उपयोग किए जाते हैं)।मेरा खंड(
चौड़ाई: 400px; /*चौड़ाई 400 पिक्सेल*/
}
या प्रतिशत के रूप में:
MyBlockPercent50 (
चौड़ाई: 50%; /* चौड़ाई ब्लॉक या विंडो की चौड़ाई का 50% (यदि निश्चित-चौड़ाई वाले ब्लॉक के अंदर नहीं है) */
रंग: #f1f1f1; /*हल्के भूरे रंग का ब्लॉक*/
}
तदनुसार, हमें एक ब्लॉक मिलता है जो हमेशा पैरेंट की चौड़ाई का आधा होगा।
अब सबसे दिलचस्प हिस्से के बारे में. चौड़ाई में ऐसे पैरामीटर हैं जो अधिकतम या इंगित करते हैं न्यूनतम चौड़ाई. ये क्रमशः न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई गुण हैं। आप उनके लिए पिक्सेल, प्रतिशत और अन्य मानों में भी मान निर्दिष्ट कर सकते हैं। ये गुण तरल और अनुकूली डिज़ाइन () बनाने का आधार हैं।
प्रतिक्रियाशील डिज़ाइन का उदाहरण. देखो, ब्राउज़र विंडो का आकार बदलना:
बेशक, मैं खुद से आगे निकल गया। लेकिन आपको यह समझना होगा कि क्या आवश्यक है और क्यों। हाँ, और सुखद परिणाम को स्पर्श करें)
जैसा कि आप पहले ही समझ चुके हैं, इन गुणों का उपयोग करके आप सामग्री को विकृत किए बिना पृष्ठ पर तत्वों को अधिक लचीले ढंग से संभाल सकते हैं। यह काम किस प्रकार करता है? आइए कोड देखें.
अवरोध पैदा करना (
अधिकतम-चौड़ाई: 800px;
पृष्ठभूमि-रंग: #f1f1f1; /*हल्के भूरे रंग का ब्लॉक*/
पैडिंग: 20px;
}
200 पिक्सेल की मूल चौड़ाई वाला इन गुणों वाला एक ब्लॉक संबंधित मान लेगा, लेकिन यदि मूल ब्लॉक बड़ा है, उदाहरण के लिए, 1000 पिक्सेल, तो यह पहले से ही अपनी अधिकतम चौड़ाई, यानी 800 पिक्सेल ले लेगा। यानी यह तब तक बढ़ती रहेगी जब तक कि पैरेंट ब्लॉक की चौड़ाई 801 पिक्सल या उससे अधिक न हो जाए। आगे ब्लॉक ब्लॉकइसकी अधिकतम अनुमत चौड़ाई हमेशा 800 पिक्सेल होगी।
ऊंचाई
यह गुण तत्व की ऊंचाई के लिए जिम्मेदार है। उपयोग किए गए मान वही हैं जो CSS के लिए उपयुक्त हैं। प्रायः समान प्रतिशत और पिक्सेल।जानकारी (
ऊंचाई: 200px; /* ब्लॉक की ऊंचाई 200 पिक्सेल होगी */
पैडिंग: 10px; /* ब्लॉक के अंदर इंडेंट के बारे में दोहराएं =) */
}
जो तर्कसंगत है, ऊंचाई के लिए आप क्रमशः न्यूनतम-ऊंचाई और अधिकतम-ऊंचाई गुणों वाले तत्व के लिए न्यूनतम और अधिकतम ऊंचाई मान निर्दिष्ट कर सकते हैं।
जानकारी (
अधिकतम-ऊंचाई: 360px; /* अधिकतम ब्लॉक ऊंचाई*/
न्यूनतम-ऊंचाई: 120px; /*न्यूनतम ब्लॉक ऊंचाई*/
}
जैसा कि आप देख सकते हैं, संपत्तियों का उपयोग जोड़े में किया जा सकता है और अक्सर किया भी जाना चाहिए।
या मानों को संयोजित करें:
सामग्री(
ऊंचाई: 100%; /* ऊंचाई हमेशा 100% रहेगी */
चौड़ाई: 760px; /* लेकिन चौड़ाई 760 पिक्सेल निश्चित है */
}
यदि आपके कोई प्रश्न हैं, तो टिप्पणियों में लिखें!
आपके ध्यान देने के लिए धन्यवाद! लेआउट के लिए शुभकामनाएँ!)