HTML
CSS
JavaScript
Vue
React
Python
PHP
Java
.Net
Java9手册
PHP手册
CSS3手册
jQuery手册
源代码
在线运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>代码学院(codexy.cn)</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>
动行结果
