标签（空格分隔）： 盒模型
盒模型的概念：
在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。
盒模型的属性：
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
如果让你做一个宽高402*402的盒子，您如何来设计呢？
答案有上万种，甚至上一种。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重</title>
<style type="text/css">
div{
width:200px;
height: 200px;
padding: 20px;
border:1px solid red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
如上述的代码产生的如下图的页面，右下角就是对应的盒模型；
盒模型的重要属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重</title>
<style type="text/css">
div{
width:200px;
height: 200px;
/*padding: 20px;*/
/*border:1px solid red;*/
}
</style>
</head>
<body>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重</title>
<style type="text/css">
div{
width:200px;
height: 200px;
padding: 20px;
border:1px solid red;
}
</style>
</head>
<body>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
通过上述的效果大家可以进行对比一下；
总结：在网页中基本都会显示一些方方正正的盒子，这种盒子被我们称为盒模型，重要的属性就是：width,height,padding,border,margin
width:指的是内容宽度，而不是整个盒子的宽度；
heigth:指的是内容的高度，而不是整个盒子真实的高度；
盒模型的计算
做一个402*402的盒子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>和模型的计算</title>
<style type="text/css">
div{
width:400px;
height: 400px;
border:1px solid red;
}
</style>
</head>
<body>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
如下图查看对应的图片展示，200+border(上下)=402,200+border(上下)=402
第二种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>和模型的计算</title>
<style type="text/css">
/*div{*/
/*width:400px;*/
/*height: 400px;*/
/*border:1px solid red;*/
/*}*/
div{
width:200px;
height: 200px;
border:1px solid red;
padding: 100px;
}
</style>
</head>
<body>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
总结：如果一个盒子设置了padding，border，width，height，margin(咱们先不要设置margin，margin有坑，后面课程会讲解)
盒子的真实宽度=width+2padding+2border
盒子的真实宽度=height+2padding+2border
那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。
另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。
