<html>
<head>
<style>
div.container
{
width:300px;
border:1px solid;
}
div.box
{
width:150px;
border:3px solid coral;
float:left;
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1">这是第一个框。</div>
<div class="box" id="box2">这是第二个框。</div>
<div style="clear:both;"></div>
</div>
<p>在一个 300 像素的容器内有两个 150 像素的框。由于边框和内边距，两个框各自都占用了超过 150 像素的控件。这个问题可通过设置 boxSizing 属性为 "border-box" 来解决。</p>
<p>点击“尝试一下”按钮设置两个框的 boxSizing 属性为 "border-box"：</p>
<button onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("box1").style.boxSizing = "border-box";
document.getElementById("box2").style.boxSizing = "border-box";
document.getElementById("box1").style.MozBoxSizing = "border-box"; /* 针对 Firefox 的代码 */
document.getElementById("box2").style.MozBoxSizing = "border-box"; /* 针对 Firefox 的代码 */
}
</script>
</body>
</html>