css有哪几种模型 |css中span的作用

.box {
width: 200px;
height: 100px;
padding: 10px; 
margin: 20px; 
border: 2px solid black;
}

标准盒子模型（content-box）是默认模型，其宽度和高度只包括内容的宽度和高度，不包括任何边框、内边距和外边距。上述代码中的盒子就是标准盒子模型的例子。

.box {
width: 200px;
height: 100px;
padding: 10px; 
margin: 20px; 
border: 2px solid black;
box-sizing: border-box;
}

IE盒子模型（border-box）是IE浏览器用于模拟怪异模式下的盒子模型，其宽度和高度包括了内容、内边距和边框，而不包括外边距。上述代码中，添加了一个box-sizing属性，值为border-box，就是使用IE盒子模型。

.box {
width: 200px;
height: 100px;
padding: 10px; 
margin: 20px; 
border: 2px solid black;
box-sizing: content-box;
}
.box:hover{
width: 250px;
height: 150px;
}

CSS3盒子模型（padding-box）是CSS3新增的一种盒子模型，其宽度和高度包括了内容和内边距，但不包括边框和外边距。在上述代码中，box-sizing属性值为content-box，即使用标准盒子模型，当盒子被鼠标悬停时，盒子变大，但不会改变边框大小。

以上三种盒子模型的选择还要视具体情况而定，合理选择盒子模型对于布局的开发非常重要。