<!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>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: black;
border: 20px red solid;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
默认情况下,盒子的可见框的大小由内容区,内边距和边框共同决定
box-sizing
box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值:
content-box
默认值,宽度和高度用来设置内容区的大小
border-box
宽度和高度用来设置整个盒子可见框的大小(也就是说,width和height指的是内容区和内边距和边框的总大小)
设置box-sizing之后,在对盒子进行padding的设定,实际上
它会减少内容区的空间,会自动调整内容区的空间以适应盒子的大小
<!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>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: black;
padding: 50px;
border: 50px red solid;
/*设置box-sizing之后,在对盒子进行padding的设定,实际上
它会减少内容区的空间,会自动调整内容区的空间以适应盒子的大小*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>