一、分类
CSS3 中可以通过 box-sizing
属性 来指定盒子模型大小的计算方法,有2个值:即可指定为 content-box
、border-box
,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)
2. box-sizing: border-box 盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box
, 那padding
和border
就不会撑大盒子了(前提padding
和border
不会超过width宽度)。
二、content-box默认
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3盒子模型大小的计算方法</title>
<style>
.box{
width: 200px;
height: 100px;
background-color: #ccc;
margin: 100px auto;
padding: 30px;
border: 20px solid red;
/* 默认的盒子模型计算方法,所以该语句不写也可以 */
/* 1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的) */
/* 所以整个盒子宽度的大小为 200px + 30px + 30px + 20px + 20px*/
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果:
三、border-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3盒子模型大小的计算方法</title>
<style>
.box{
width: 200px;
height: 100px;
background-color: #ccc;
margin: 100px auto;
padding: 30px;
border: 20px solid red;
/* 2. box-sizing: border-box 盒子大小为 width */
/* 所以此时的content宽度为: 200px - 30*2 - 20*2 == 100px */
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果:
平时开发过程中,这种方法更加常用。