菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<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>
              