实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css box-sizing 方框大小调整 实例 - 自学教程(runoops.com)</title> <style> * { box-sizing: border-box; } #example1 { width: 300px; padding: 40px; border: 15px solid blue; } #example2 { width: 300px; padding: 10px; border: 2px solid red; } </style> </head> <body> <h1>通用的 box-sizing</h1> <p>使用 “box-sizing:border-box” 可以让前端开发人员减少很多工作。 上面 head 部分中的第一个样式确保所有元素都以这种更直观的方式调整大小。 你设置的宽度就是实际的宽度，不需要考虑内边距和边框：</p> <div id="example1">div 的完整宽度为 300px, 不需要考虑内边距和边框。</div> <br> <div id="example2">这个 div 的完整宽度也是 300px, 也不需要考虑内边距和边框。</div> </body> </html>
运行结果：