菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小鸟启蒙(facesoho.com)</title> <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>
运行结果