知识点
一、box-sizing的作用
保证了增加 边框、内边距时, 元素的实际宽高不变
二、普通盒子和怪异盒子如何设置，两者实际宽高的区别
- 普通盒子：box-sizing: content-box;
实际宽高 = 内容区域 + 内边距 + 边框 - 怪异盒子：box-sizing: border-box;
实际宽高 = 内容区域
(最初设置的宽高; PS: 如果设置的padding和border超出内容区域, 则盒子也会变大)
原文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子的 box-sizing 属性</title>
<style>
div {
width: 300px;
height: 300px;
}
.box {
background-color: rgb(231, 64, 50);
margin-bottom: 50px;
padding: 20px;
border: 5px solid black;
/* 350 × 350 */
}
.box1 {
background-color: rgb( 46,124,238);
padding: 20px;
border: 5px solid black;
/*
box-sizing:
CSS3新增属性 保证了增加 边框 内边距时, 元素的实际宽高不变
普通盒子:
box-sizing: content-box; 实际宽高 = 内容区域 + 内边距 + 边框
怪异盒子:
box-sizing: border-box; 实际宽高 = 内容区域(最初设置的宽高; PS: 如果设置的padding和border超出内容区域, 则盒子也会变大)
*/
box-sizing: border-box;
/* box-sizing */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>