代码实例
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {
width: 75%;
height: 100px;
border: thin solid black;
}
img {
background: lightgray;
border: 4px solid black;
margin: 2px;
height: 50%;
}
#first {
box-sizing: border-box;
width: 50%;
}
#second {
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<img id="first" src="/uploads/allimg/20220616/1-220616013434R2.png" alt="small banana">
<img id="second" src="/uploads/allimg/20220616/1-220616013434R2.png" alt="small banana">
</div>
</body>
</html> 尝试一下 »
点击“尝试一下”按钮查看在线实例
box-sizing属性更改大小属性适用的元素框。
默认情况下，计算并应用元素的内容框的高度和宽度。或者例如，如果元素的height属性设置为100px，则屏幕上的实际高度将为100像素，加上顶部和底部填充，边框和边距值。
其值可以是以下之一：
- content-box
- padding-box
- border-box
- margin-box
以下代码显示如何设置元素的大小。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {
width: 75%;
height: 100px;
border: thin solid black;
}
img {
background: lightgray;
border: 4px solid black;
margin: 2px;
height: 50%;
}
#first {
box-sizing: border-box;
width: 50%;
}
#second {
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<img id="first" src="/uploads/allimg/20220616/1-220616013434R2.png" alt="small banana">
<img id="second" src="/uploads/allimg/20220616/1-220616013434R2.png" alt="small banana">
</div>
</body>
</html>