tutorial - types of css




प्रतिशत में सीमा की मोटाई कैसे सेट करें? (6)

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

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

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

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

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

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

    border-width:10%;

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

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

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

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


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

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


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

-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-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);

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

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

या

border: 9vw solid #F5E5D6;




css