CSS中的border-box和content-box有什麼區別？

Question

CSS中的border-box和content-box有什麼區別？ 我不清楚這兩個框之間。例如， box-sizing:border-box;和box-sizing:content-box; 兩種樣式的輸出看起來相似。

Answer 1

雖然盒子尺寸：邊框;使用人們已經與Internet Explorer關聯的框模型，其中填充和邊框的尺寸包含在元素的尺寸中。 ^{（圖像source）}

實施例：

^{（圖像source）}

演示添加。

$("#content").on("click", function() { 
 
    $("*").css("box-sizing", $(this).text()); 
 
}); 
 

 
$("#border").on("click", function() { 
 
    $("*").css("box-sizing", $(this).text()); 
 
});

.parent { 
 
    width: 50%; 
 
    border: 5px solid #E18728; 
 
    float: left; 
 
} 
 

 
.child { 
 
    width: 90%; 
 
    padding: 20%; 
 
    border: 4px solid black; 
 
    margin: .5em auto; 
 
} 
 

 
.twins { 
 
    width: 50%; 
 
    padding: 1em; 
 
    border: 4px solid black; 
 
    float: left; 
 
} 
 

 

 
/* styling for Pen, not related to box-sizing or layout */ 
 

 
body { 
 
    font-family: sans-serif; 
 
    font-size: 1.1em; 
 
} 
 

 
.buttons { 
 
    margin-bottom: .5em; 
 
} 
 

 
p:not(.intro) { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="buttons"> 
 
    <p class="intro">Click the <code>border-box</code> button to fix the layout with the power of Box Sizing!</p> 
 
    <button id="content">content-box</button> 
 
    <button id="border">border-box</button> 
 
</div> 
 
<div class="parent"> 
 
    <p>Parent div with 50% width.</p> 
 
    <div class="child"> 
 
    <p>Child div with 90% width, 4px black border, and 20% padding </p> 
 
    </div> 
 
    <div class="twins"> 
 
    <p>Child div with 50% width, 4px black border, and 1em padding</p> 
 
    </div> 
 
    <div class="twins"> 
 
    <p>Child div with 50% width, 4px black border, and 1em padding</p> 
 
    </div> 
 
</div>