造型進度條 - 計算寬度

Question

我有以下代碼：

.mod-prb { 
 
    display: block; 
 
    width: 250px; 
 
    height: 35px; 
 
    border: 2px solid #809097; 
 
    border-radius: 8px; 
 
    padding: 3px; 
 
} 
 
.mod-prb > div { 
 
    display: block; 
 
    height: 20px; 
 
    height: 30px; 
 
    border: inherit; 
 
    border-radius: 8px; 
 
    text-align: right; 
 
    padding: 0 10px; 
 
}

<div class="mod mod-prb"> 
 
    <div class="perc"></div> 
 
</div>

的問題是<div class="perc">可以達到width:95%;。我將如何去計算像素，以便我可以使用JS 1％-100％。澄清：我用JS添加寬度，所以這不是問題。

Answer 1

爲什麼發生這種情況

這個問題發生，因爲你的寬度設置爲100％，但其內盒也有10px的的填充（左，右）和2像素的邊界。這使得它的父寬度爲+ 20px（兩邊爲10px）+ 4px（兩邊爲2px邊框）的實際寬度爲100％。

如何修復

你可以解決它以不同的方式。最簡單的一個是使用box-sizing與border-box一個值：

的寬度和高度屬性包括填充和邊界，而不是幅度。

的代碼應該是這樣的（注意height如何改變太）：

.mod-prb { 
 
    display: block; 
 
    width: 250px; 
 
    height: 35px; 
 
    border: 2px solid #809097; 
 
    border-radius: 8px; 
 
    padding: 3px; 
 
} 
 
.mod-prb > div { 
 
    display: block; 
 
    height: 35px; 
 
    width:100%; 
 
    border: inherit; 
 
    border-radius: 8px; 
 
    text-align: right; 
 
    padding: 0 10px; 
 
    box-sizing:border-box; 
 
}

<div class="mod mod-prb"> 
 
    <div class="perc"></div> 
 
</div>