दिलचस्प पोस्ट
शुद्ध सीएसएस बहु स्तरीय ड्रॉप-डाउन मेनू PHP में एक उपयोगकर्ता के लिए एक सीएसवी फाइल बनाएँ पृष्ठभूमि छवि डेटा को सीएसएस में Base64 अच्छा या बुरा अभ्यास के रूप में एम्बेड करना है? कैसे sed में एकल बोली से बचने के लिए? ASP.NET MVC: इस ऑब्जेक्ट के लिए पैरामीटर रहित निर्माता परिभाषित नहीं है जावा में हाइबरनेट का उपयोग करके डेटाबेस से कंबलबॉक्स को भरना Require_relative के बीच अंतर क्या है और रूबी की आवश्यकता है? मानक Guid पर अनुक्रमिक मार्गदर्शिका में प्रदर्शन में सुधार क्या है? फाइल में सबसे छोटा फ्लोट ढूंढना और उसके ऊपर की रेखा प्रिंट करना Visual Studio 2010 द्वारा .NET Framework 4.5 लक्ष्यीकरण एचटीएमएल 5 कैनवास आकार (डाउनस्केल) छवि उच्च गुणवत्ता? एंड्रॉइड: स्लाइडिंग ड्रॉवर की ऊंचाई wrap_content के साथ सेट की जा सकती है? स्ट्रिंग के बाएं हिस्से को कैसे निकालें? एक तत्व पर एकाधिक सीएसएस बदलाव कैसे करें? अतिरिक्त क्लासपाथ विकल्प के साथ "java -jar myfile.jar" कॉल करें

सीमाओं की सीमा की मोटाई कैसे सेट करें?

कैसे एक तत्व की सीमा चौड़ाई प्रतिशत में सेट करने के लिए? मैंने वाक्यविन्यास की कोशिश की

border-width:10%; 

लेकिन यह काम नहीं करता है

संपादित करें:

कारण मैं सीमा-चौड़ाई को प्रतिशत में सेट करना चाहता हूं क्योंकि मेरे पास width: 80%; वाला एक तत्व है width: 80%; और height:80%; , और मैं तत्व को पूरे ब्राउज़र विंडो में शामिल करना चाहता हूं, इसलिए मैं सभी सीमाओं को 10% सेट करना चाहता हूं। मैं इसे दो तत्वों की विधि से नहीं कर रहा हूं, जिसमें एक दूसरे के पीछे स्थित होगा और सीमा के रूप में कार्य करेगा, क्योंकि तत्व की पृष्ठभूमि पारदर्शी है और इसके पीछे एक तत्व की स्थिति इसकी पारदर्शिता को प्रभावित करेगी।

मुझे पता है कि जावास्क्रिप्ट के माध्यम से यह किया जा सकता है, लेकिन मैं एक सीएसएस केवल विधि की तलाश कर रहा हूं, यदि सभी संभव हो तो।

वेब के समाधान से एकत्रित समाधान "सीमाओं की सीमा की मोटाई कैसे सेट करें?"

सीमा प्रतिशत का समर्थन नहीं करता … लेकिन यह अभी भी संभव है …

जैसा कि दूसरों ने सीएसएस विनिर्देश की ओर इशारा किया है, सीमाएं सीमाओं पर समर्थित नहीं हैं:

 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' Value: <border-width> | inherit Initial: medium Applies to: all elements Inherited: no Percentages: N/A Media: visual Computed value: absolute length; '0' if the border style is 'none' or 'hidden' 

जैसा कि आप देख सकते हैं यह प्रतिशत कहते हैं : एन / ए

गैर-पटकथा समाधान

आप एक आवरण तत्व के साथ अपनी प्रतिशत सीमाओं का अनुकरण कर सकते हैं जहां आप चाहते हैं:

  1. अंगूठी तत्व का background-color अपने इच्छित सीमा रंग में सेट करें
  2. प्रतिशत में आवरण तत्व के padding सेट करें (क्योंकि वे समर्थित हैं)
  3. अपने तत्वों को background-color को सफेद background-color सेट करें (या जो कुछ भी होना चाहिए)

यह किसी तरह आपकी प्रतिशत सीमाओं को अनुकरण करेगा। यहां इस तकनीक का उपयोग करने वाली 25% चौड़ाई वाली सीमाओं वाला एक तत्व का एक उदाहरण है

उदाहरण में उपयोग किया गया HTML

 .faux-borders { background-color: #f00; padding: 1px 25%; /* set padding to simulate border */ } .content { background-color: #fff; } 
 <div class="faux-borders"> <div class="content"> This is the element to have percentage borders. </div> </div> 

तो यह एक पुराना प्रश्न है, लेकिन उन लोगों के लिए जो अभी भी एक जवाब की तलाश में हैं, सीएसएस संपत्ति बॉक्स-साइजिंग यहाँ अनमोल है:

 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; 

इसका मतलब है कि आप Div की चौड़ाई को एक प्रतिशत तक सेट कर सकते हैं, और आप उस डिवेल में जो भी सीमा जोड़ते हैं, उस प्रतिशत में शामिल किया जाएगा। इसलिए, उदाहरण के लिए, निम्न 1px सीमा को डिवा के चौड़ाई के अंदर जोड़ देगा:

 div { box-sizing:border-box; width:50%; border-right:1px solid #000; } 

यदि आप अधिक जानकारी चाहते हैं: http://css-tricks.com/box-sizing/

आप भी उपयोग कर सकते हैं

 border-left: 9vw solid #F5E5D6; border-right: 9vw solid #F5E5D6; 

या

 border: 9vw solid #F5E5D6; 

आप पिक्सल के बदले उन्हें प्रतिशत के लिए उपयोग कर सकते हैं,

उदाहरण:

 border:10PX dotted #c1a9ff; /* In Pixels */ border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */ 

सीएसएस में border-width लिए प्रतिशत मूल्य लागू नहीं हैं। यह विशिष्ट में सूचीबद्ध है

आपको तत्व की चौड़ाई के प्रतिशत की गणना करने के लिए जावास्क्रिप्ट का उपयोग करना होगा या आपको जितनी लंबाई की मात्रा चाहिए, और परिणाम को px या तत्व की सीमाओं के समान लागू करना होगा।

आधुनिक ब्राउज़र VH और VW इकाइयों का समर्थन करते हैं, जो विंडो व्यूपोर्ट का प्रतिशत हैं।

तो आप खिड़की के आकार के प्रतिशत के रूप में शुद्ध सीएसएस सीमाएं हो सकते हैं:

 border: 5vw solid red; 

इस उदाहरण का प्रयास करें और विंडो की चौड़ाई बदलें; सीमा मोटाई बदल जाएगी क्योंकि खिड़की आकार बदलती है box-sizing: border-box; उपयोगी भी हो सकता है

बॉक्स साइज़िंग
सीमा बॉक्स बॉक्स आकार बदलने के लिए बॉक्स सेट करें box-sizing: border-box; और 100% तक चौड़ाई निर्धारित करें और सीमा के लिए एक निश्चित चौड़ाई फिर एक न्यूनतम चौड़ाई जोड़ें ताकि एक छोटी सी स्क्रीन के लिए सीमा पूरी स्क्रीन से आगे नहीं बढ़ जाएगी

आप एक अवधि का उपयोग करके एक कस्टम सीमा बना सकते हैं। एक कक्षा के साथ एक स्पैन करें (जिस दिशा में सीमा जा रही है निर्दिष्ट करें) और एक आईडी:

 <html> <body> <div class="mdiv"> <span class="VerticalBorder" id="Span1"></span> <header class="mheader"> <span class="HorizontalBorder" id="Span2"></span> </header> </div> </body> </html> 

इसके बाद, आप सीएसएस पर जाएं और वर्ग को position:absolute सेट करें position:absolute , height:100% (वर्टिकल बॉर्डर्स के लिए), width:100% (क्षैतिज सीमाओं के लिए), margin:0% और background-color:#000000; । कभी भी कुछ और जोड़ना जरूरी है:

 body{ margin:0%; } div.mdiv{ position:absolute; width:100%; height:100%; top:0%; left:0%; margin:0%; } header.mheader{ position:absolute; width:100%; height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */ top:0%; left:0%; margin:0%; } span.HorizontalBorder{ position:absolute; width:100%; margin:0%; background-color:#000000; } span.VerticalBorder{ position:absolute; height:100%; margin:0%; background-color:#000000; } 

फिर उस class="VerticalBorder" को सेट करें जो class="VerticalBorder" से top:0%; , left:0%; , width:1%; (चूंकि एमडीआईवी की चौड़ाई 100% पर मोरेडर की चौड़ाई के बराबर है, इसलिए चौड़ाई 100% होगी जो आपने तय की है। अगर आप चौड़ाई को 1% तक सेट करते हैं तो सीमा खिड़की की चौड़ाई का 1% होगा) । उस class="HorizontalBorder" को सेट करें, जो class="HorizontalBorder" से top:99% (चूंकि यह हैडर कंटेनर में है शीर्ष शीर्ष उस स्थिति को संदर्भित करता है जो कि हैडर के अनुसार है। यह + ऊंचाई 100% तक जोड़नी चाहिए यदि आप इसे नीचे तक पहुंचने के लिए चाहते हैं), left:0%; और height:1% (चूंकि एमडीआईवी की ऊँचाई महेडर की ऊंचाई [100% = 100, 20% = 20, 100/20 = 5] से 5 गुना अधिक होती है, इसलिए आप इसे सेट किए जाने की ऊंचाई 20% होगी। यदि आप ऊंचाई को 1% तक सेट करते हैं तो सीमा विंडो की ऊँचाई का 2% होगा।) यह कैसे दिखेगा:

 span#Span1{ top:0%; left:0%; width:.4%; } span#Span2{ top:99%; left:0%; width:1%; } 

अस्वीकरण: यदि आप विंडो को छोटे आकार के आकार में बदलते हैं, तो सीमाएं गायब हो जाएंगी। एक समाधान सीमा के आकार की टोपी के लिए होगा अगर खिड़की एक निश्चित बिंदु के लिए बदल दिया है मैंने जो किया था यह रहा:

 window.addEventListener("load", Loaded); function Loaded() { window.addEventListener("resize", Resized); function Resized() { var WindowWidth = window.innerWidth; var WindowHeight = window.innerHeight; var Span1 = document.getElementById("Span1"); var Span2 = document.getElementById("Span2"); if (WindowWidth <= 800) { Span1.style.width = .4; } if (WindowHeight <= 600) { Span2.style.height = 1; } } } 

यदि आपने सब कुछ ठीक किया है, तो यह इस लिंक की तरह दिखना चाहिए: https://jsfiddle.net/umhgkvq8/12/ कुछ अजीब कारणों के लिए, सीमा जस्फील्ड में गायब हो जाएगी लेकिन अगर आप इसे किसी ब्राउज़र में लॉन्च नहीं करेंगे ।