CSS盒子模型是网页设计中重要的一部分，它定义了网页中的元素如何在屏幕上布局和显示。下面是一份CSS盒子模型教案，可以帮助初学者更好地理解盒子模型。
/* 盒子模型语法 */
box-sizing: content-box|border-box;
/* 示例代码 */
div {
width: 200px;
height: 150px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box;
}
首先，我们需要理解盒子模型的概念。盒子模型将每个元素看做一个矩形的盒子，它包括内容区域、内边距、边框和外边距。这些部分相互影响，决定了元素实际在屏幕上的大小和位置。
其中，box-sizing属性用于定义元素的盒子模型。默认值为content-box，即盒子模型只包括内容区域，不包括内边距、边框和外边距。而border-box值则表示盒子模型包括内容区域、内边距和边框，但不包括外边距。
在示例代码中，我们创建了一个div元素，宽度为200px，高度为150px。我们设置了20px的内边距、5px的边框和10px的外边距，使用border-box值来定义盒子模型。这意味着实际的盒子大小为200px+5px*2=210px宽，150px+5px*2=160px高。而最终显示在屏幕上的大小则包括内边距在内，为210px宽，160px高。
了解CSS盒子模型的概念和语法，可以帮助我们更好地掌握网页设计和布局技巧。希望这份教案能对初学者有所帮助。
