css tutorial प्रतिशत में सीमा की मोटाई कैसे सेट करें?




types of css (8)

कैल्क () विनिर्देश पर एक नज़र डालें। उपयोग का एक उदाहरण यहां दिया गया है:

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);

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

    border-width:10%;

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

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

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

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


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

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

या

border: 9vw solid #F5E5D6;

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

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

'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 को सफेद पर सेट करें (या जो कुछ भी होना चाहिए)

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

उदाहरण में एचटीएमएल इस्तेमाल किया

.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>

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

स्क्रिप्ट समाधान

@ बोल्टक्लॉक ने स्क्रिप्ट किए गए समाधान का उल्लेख किया जहां आप तत्व आकार के अनुसार सीमाबद्ध चौड़ाई की गणना कर सकते हैं।

यह jQuery का उपयोग कर बेहद सरल लिपि के साथ ऐसा एक उदाहरण है

var el = $(".content");
var w = el.width() / 4 | 0; // calculate & trim decimals
el.css("border-width", "1px " + w + "px");
.content { border: 1px solid #f00; }
<div class="content">
    This is the element to have percentage borders.
</div>

लेकिन आपको अवगत होना होगा कि जब भी आपका कंटेनर आकार बदलता है (यानी ब्राउज़र विंडो का आकार बदलता है) आपको सीमा चौड़ाई समायोजित करना होगा। रैपर तत्व के साथ मेरा पहला कामकाज बहुत आसान लगता है क्योंकि यह स्वचालित रूप से इन परिस्थितियों में चौड़ाई समायोजित करेगा।

लिखित समाधान का सकारात्मक पक्ष यह है कि यह मेरे पिछले गैर-स्क्रिप्टेड समाधान में वर्णित पृष्ठभूमि समस्याओं से ग्रस्त नहीं है।


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


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

उदाहरण:

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

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

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

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

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

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


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

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


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

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

border: 5vw solid red;

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





css