开发者学堂课程【前端开发CSS基础：CSS怪异盒子 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4262
CSS 怪异盒子
1、打开集成开发环境，创建新文件，名字改成 borderbox 怪异盒子。
2、标准的盒子模型。
<！DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title></title>
<style>
box{
width: 100px;宽度
height:100px;高度
background-color：pink;盒子颜色设置为粉色
padding: 20px ;
}
content{
width: 100px;
height: 100px;
background-color:palegreen;
}
</style>
</head>
<body>
<div class="box”>
<div class="content" >
</div>
</div>
这就是标准的盒子模型，可以审查元素，内层为 100*100，外层是20的外边距。
3、以下就是 css 怪异盒子模型代码：
<！DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title></title>
<style>
box{
width: 100px;宽度
height:100px;高度
background-color：pink;盒子颜色设置为粉色
padding: 20px ;
box-sizing：border-box；
它有三个值，第一个是正常的盒子模型，第二个是怪异盒子模型。
}
content{
width: 100px;
height: 10Dpx;
background-color:palegreen;
}
</style>
</head>
<body>
<div class="box”>
<div class="content" >
</div>
</div>
以上的布局是怪异盒子模型。
审查怪异盒子模型的元素，可以看到 padding 属性是生效的，内容大小变小了，变成了60*60，但是整个盒子的大小还是100*100，这就是怪异盒子的特点，固定了盒子的大小，无论里边是添加内边距还是边框，整个盒子大小还是不变的，100*100。
