CSS盒子模型（文章结尾附有CSS相关知识的总结链接）
CSS盒子模型定义了如何将内容（content）、内边距（padding）、边框（border）和外边距（margin）装配到一起，以构成一个完整的盒子。CSS盒子模型有两种：标准模型和IE模型。
标准模型的宽度和高度只包括内容区域，不包括内边距和边框。IE模型的宽度和高度包括内容区域、内边距和边框。
CSS中可以通过box-sizing属性来设置盒子模型：
/* 标准模型 */
element {
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid;
margin: 10px;
}
/* IE模型 */
element {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid;
margin: 10px;
}在实际应用中，建议使用标准模型，并通过box-sizing: border-box;来保证在设置元素宽高后，内边距和边框不会导致元素尺寸变化。这样可以避免布局混乱和额外的计算。
评论已关闭