网页设计中，经常会使用CSS盒型模型来布局和设计，而CSS盒型模型又有三种不同的调用方式，分别是标准盒模型、IE盒模型和flex盒模型。下面将详细介绍这三种盒模型的差异和使用方法。
标准盒模型
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
标准盒模型是W3C规范定义的盒模型，在这个盒子模型中，元素的width和height只包括content部分的大小，不包括padding、border和margin等部分，如上述代码中，实际的宽度是200px，高度是100px，那么在padding和border的情况下，元素实际所占据的空间为222px宽（200+10+10+1+1）和122px高（100+10+10+1+1），margin则是元素与其他元素的距离。
IE盒模型
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
box-sizing: border-box;
}
IE盒模型不是W3C规范，而是微软提出的盒模型，现在被大多数浏览器所支持，它的特点是通过box-sizing属性来控制元素宽度的计算方式，将width和height包括content、padding和border部分，如上述代码中，元素实际所占据的空间仍是200px宽和100px高，因为border和padding被计算在width和height之内，因此content所占据的空间会自动缩小，margin则是元素与其他元素的距离。
flex盒模型
.container {
display: flex;
justify-content: center;
align-items: center;
}
.box {
flex: 1;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
flex盒模型是CSS3中提出的一种全新的盒模型，可实现屏幕自适应布局，通过display属性设置元素为flex容器，元素内部通过flex属性来设置各个子元素的自适应效果，如上述代码中，容器通过justify-content和align-items属性来实现水平和垂直居中，子元素使用flex属性实现子元素等分模板，并且padding、border和margin将再次影响元素的大小，因此在布局时需要特别注意这三个属性的使用。
