实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css box-sizing 方框大小调整 实例 - 自学教程(runoops.com)</title> <style> #example1 { box-sizing: content-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } #example2 { box-sizing: border-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } </style> </head> <body> <h1>box-sizing 属性</h1> <p>定义如何计算一个元素的总宽度和总高度，是否包含内边距和边框。</p> <h2>box-sizing: content-box (默认):</h2> <p>高度和宽度只应用于元素的内容:</p> <div id="example1">这个 div 的宽度为 300px。但完整宽度为 300px + 20px (左边框和右边框) + 60px (左边距和右边距) = 380px!</div> <h2>box-sizing: border-box:</h2> <p>高度和宽度应用于元素的所有部分: 内容、内边距和边框:</p> <div id="example2">不管如何这里的完整宽度为300px!</div> </body> </html>
运行结果：