大学课程《Web前端开发与应用教程》PPT教学课件：项目四任务1 认识盒子模型.pptxVIP

项目4盒子模型

掌握盒子相关属性1了解盒子模型的概念42理解元素的转换3熟悉元素的类型掌握理解了解熟悉?学习目标

任务1认识盒子模型

盒子模型是CSS网页布局的核心基础，只有掌握盒子模型的结构和用法，才可以更好的控制网页中各个内容元素的呈现效果。盒子模型是CSS的基石之一，布局最重要的概念，它指定元素如何呈现在页面当中。网页就是由许多个盒子通过不同的排列方式（纵向排列，横向排列，嵌套排列）堆积而成。

什么是盒子模型？1.1认识盒子模型

联想一下生活中常见的盒子？总结一下它们的共同特点1.1认识盒子模型

盒子模型是指将网页设计页面中的内容元素看作一个装了东西的矩形盒子。每个矩形盒子都由内容（content）、内边距（padding）、边框（border）和外边距（margin）4个部分组成，如下图。1.1认识盒子模型

1.1认识盒子模型?内容（content）:盒子里面所包含的元素和内容。?内边距(padding):盒子里面的内容到盒子的边框之间的距离。padding-left、padding-right、padding-top、padding-bottom?外边距(margin):边框外和其它盒子之间。 margin-left、margin-right、