CSS3 使用 Box-Sizing 属性调整框的宽度

cssweb developmentfront end technology更新于 2025/11/27 13:00:17

使用 box-sizing 属性不仅可以更改元素的宽度，还可以更改高度。

以下是使用 CSS3 使用 box-sizing 属性调整框宽度的代码 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 200px;
   height: 200px;
   display: inline-block;
}
.contentBox {
   padding: 50px;
   border: 1px solid rgb(255, 0, 128);
}
.borderBox {
   box-sizing: border-box;
   padding: 50px;
   border: 1px solid rgb(194, 0, 194);
}
</style>
</head>
<body>
<h1>Box sizing example using CSS</h1>
<div class="contentBox">
This div doesn't have box sizing property that's why it looks bigger
</div>
<div class="borderBox">
This div has box sizing property
</div>
</body>
</html>