项目8 CSS盒子模型应用与CSS3动画.pptxVIP

盒子模型基本知识|盒子模型属性|CSS3动画效果|网页版面分栏CSS盒子模型

知识目标识记盒子模型概念01.02.识记盒子模型属性03.理解新增圆角边框属性

能力目标会使用盒子模型属性进行网页设计01.02.能使用圆角边框属性修饰网页布局

任务使用盒子模型布局网页0102盒子模型概念盒子模型属性03圆角边框属性

01盒子模型概念任务使用盒子模型布局网页什么是CSS的盒子模型呢？内容（content）、填充（padding）、边框（border）、边界（margin），CSS盒子模型都具备这些属性。盒子模型平面结构一

01盒子模型概念任务使用盒子模型布局网页盒子的边框、填充（内边距）、边界（外边距）这些属性都分别对应上（top）、下（bottom）、左（left）、右（right）四个边。盒子模型平面结构二

01盒子模型概念元素占用宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界，高度的计算与之相似。元素实践宽度任务使用盒子模型布局网页

02盒子模型属性1.边界（margin）包括margin-top、margin-right、margin-bottom、margin-left，控制块级元素之间的距离。上右下左的顺时针规则任务使用盒子模型布局网页

02盒子模型属性示例8.1上下左右外边距宽度相同的情况核心代码styletype=text/css.d