1.盒子模型的内容包括：content，padding，border，margin
2.盒子模型分类：
标准盒：正常盒，怪异盒
伸缩盒：新，旧
内边距：padding
1.内边距在content外，边框内
padding 设置所有边距
padding-bottom 设置底边距
padding-left 设置左边距
padding-right 设置右边距
padding-top 设置上边距
添加内边距的时候，只需要设置padding，不需要改变content大小，padding会自动撑开。
边框：border
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
border-radius 设置圆角边框
box-shadow 设置对象阴影
border-image 边框背景图片
外边距：margin
1.围绕在内容边框的区域就是外边距，外边距默认为透明区域
2.外边距接受任何长度单位，百分数值
margin 设置所有边距
margin-bottom 设置底边距
margin-left 设置左边距
margin-right 设置右边距
margin-top 设置上边距
注意：外边距合并
3.标准盒子模型
<div class="a">
<div class="b">
</div>
</div>
4.怪异盒子模型
box-sizing：border-box； 固定了盒子的大小，只在盒子内部改变值。
5.css伸缩盒子(旧)
-1.css3引入了一种新的布局模式-Flexbox布局，即伸缩布局盒模型(Flexible Box)，用来提供一个更加有效的方式制定，调整和分布一个容器里项目布局，
即使它们的大小是未知或者动态的。
-2.Flexbox布局可以轻松的实现屏幕和浏览器窗口大小发生变化时，保持元素的相对位置和大小不变。
-3.属性
box-orient 伸缩盒对象的子元素的排列方式
box-pack 水平居中
box-align 垂直居中
box-flex 伸缩盒对象的子元素如何分配其剩余空间
box-direction 伸缩盒对象的子元素的排列顺序是否反转
例子如下：
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styleCss.css" type="text/css">
</head>
<body>
<div class="container">
<div class="one">d1</div>
<div class="two">d2</div>
<div class="three">d3</div>
</div>
</body>
</html>
css
.one{
width: 100px;
height: 100px;
background-color: blue;
-webkit-box-flex: 1;
}
.two{
width: 100px;
height: 100px;
background-color: pink;
-webkit-box-flex: 1;
}
.three{
width: 100px;
height: 100px;
background-color: green;
-webkit-box-flex: 1;
}
.container{
width: 600px;
height: 600px;
background-color: dimgrey;
display: -webkit-box; /*变成盒子*/
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-box-direction: reverse;
}
6.css伸缩盒模型（新）
属性
flex 复合属性，设置伸缩盒对象的子元素如何分配空间
flex-grow 弹性盒的扩展比率，按比例平均分配
flex-flow 复合属性，设置伸缩盒对象的子元素排列方式
flex-direction 伸缩盒对象的子元素在父容器中的位置
flex-wrap 设置伸缩盒对象的子元素超出父容器时是否换行
3个div 每个宽度200px，父容器为300px，超出了300px，但是三个div每个都会变成100px，这时需要设置flex-flow：wrap；（即超过部分换行，div会变成3行显示）
order 设置伸缩盒对象的子元素出现的顺序
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one{
width: 100px;
height: 100px;
background-color: blue;
-webkit-flex-grow: 1;
/*第一个div 第三个显示*/
-webkit-order: 3;
}
.two{
width: 100px;
height: 100px;
background-color: pink;
-webkit-flex-grow: 1;
/*第二个div 第一个显示*/
-webkit-order: 1;
}
.three{
width: 100px;
height: 100px;
background-color: green;
-webkit-flex-grow: 1;
/*第三个div 第二个显示*/
-webkit-order: 2;
}
.container{
width: 600px;
height: 600px;
background-color: dimgrey;
/*变成盒子*/
display: -webkit-flex;
-webkit-flex-direction: column;
/*超出父容器时换行*/
-webkit-flex-flow: wrap;
}
</style>
</head>
<body>
<div class="container">
<div class="one">d1</div>
<div class="two">d2</div>
<div class="three">d3</div>
</div>
</body>
</html>