简单教程
提交运行
代码编辑器：
<style> div.container{ width:300px; border:1px solid; } div.box{ width:150px; border:3px solid coral; float:left; padding:10px; } </style> <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>
运行结果：