box-sizing 属性
box-sizing
是用于告诉浏览器如何计算一个元素是总宽度和总高度
box-sizing: content-box;
- 盒子的总宽度 = width + border + padding(width = 200px + 20px * 2 + 10px * 2)
- 盒子的总高度 = height + border + padding(height = 200px + 20px * 2 + 10px * 2)
box-sizing: border-box;
- 盒子的总宽度 = width + border + padding(width = 200px)
- 盒子的总高度 = height + border + padding(height = 200px)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
</head>
<style type="text/css">
div{
margin: 50px auto;
text-align: center;
line-height: 200px;
color: white;
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid purple;
}
.box1{
background-color: red;
box-sizing: content-box;
}
.box2{
background-color: blue;
box-sizing: border-box;
}
</style>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</body>
</html>
效果如下: