下载文档原格式
属性作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px;上下左右内边距均为 10像素padding:5px 10px;上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px;上内边距是5px ，左右内边距是10px ，下边距是15px padding:5px 10px 15px 20px;上是5px ，右是10px ，下是15px ，左是20px 从上顺时针（⼆）css 盒⼦模型记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~⼀、⽹页布局的本质⽹页布局过程： 1、先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box 2、利⽤CSS 设置好盒⼦样式，然后摆放到相应位置 3、往盒⼦⾥装内容⽹页布局的核⼼本质：就是利⽤CSS 摆盒⼦。
⼆、盒⼦模型所谓盒⼦模型：就是把HTML 页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
CSS 盒⼦模型本质上是⼀个盒⼦，封装周围的HTML 元素，它包括：边框、外边框、内边距和实际内容其中：content ：实际内容padding （内边距）：盒⼦边框与内容之间的距离margin （外边距）：盒⼦与盒⼦之间的距离border （边框）：字⾯意思三、内边距（padding ）padding 属性⽤于设置内边距，即边框与内容之间的距离padding 属性的复合写法可以有⼀到四个值也可以单独指定padding 值：padding-top ：10px; （其他⽅位同理）注：padding 可能会影响盒⼦的实际⼤⼩。
属性作⽤margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距如上图，⼀个100 x 100的盒⼦，在设置padding 为30px 以后，盒⼦实际⼤⼩变为160 x 160因此在使⽤时，应当注意padding 对盒⼦⼤⼩的影响，以设置盒⼦的最终⼤⼩。
css课程设计一、课程目标知识目标：1. 理解CSS（层叠样式表）的基本概念与功能，掌握CSS选择器、属性和值的使用方法。
2. 学会使用CSS对HTML文档进行美化和布局，掌握盒模型、浮动、定位等核心CSS技术。
3. 了解CSS的继承、层叠、优先级和伪类等高级特性。
技能目标：1. 能够编写结构清晰、可维护性强的CSS代码，实现网页的视觉效果。
2. 能够运用所学CSS知识对现有网页进行优化和美化，提高用户体验。
3. 能够利用CSS解决跨浏览器兼容性问题，确保网页在不同浏览器中的表现一致。
情感态度价值观目标：1. 培养学生对前端开发的兴趣，激发学习热情，增强自信心。
2. 培养学生良好的审美观，提高对网页设计美学的认识。
3. 培养学生的团队协作精神，鼓励相互学习、交流、分享，提高沟通能力。
本课程针对初中年级学生，结合学科特点，注重实用性，将CSS知识与实际案例相结合，使学生在掌握知识的同时，提高实际操作能力。
课程设计充分考虑学生的认知水平和学习需求，通过循序渐进的教学方法，帮助学生更好地理解和运用CSS，培养其在前端开发领域的兴趣和能力。
在教学过程中，关注学生的学习反馈，及时调整教学策略，确保课程目标的达成。
二、教学内容1. CSS基础- CSS概念与作用- CSS的引入方式- 选择器（标签、类、ID、属性等）- CSS属性与值（颜色、字体、文本、背景等）2. CSS布局与盒模型- 盒模型概念- margin、padding、border属性- 盒子水平垂直居中- 浮动布局与清除浮动- 定位（相对、绝对、固定、静态）3. CSS高级特性- 继承与层叠- 优先级与特殊性- 伪类与伪元素- 媒体查询与响应式设计4. CSS兼容性与优化- 跨浏览器兼容性问题- CSS代码优化与压缩- 常用CSS框架介绍（如Bootstrap）5. 实战案例与拓展- 网页布局案例- 响应式设计案例- CSS动画与过渡效果教学内容按照课程目标进行科学组织和系统安排，结合教材章节，由浅入深，循序渐进。
课程名称WEB前端开发（1）课次13 任务、项目、课题名称盒子模型课时2学时教学内容盒子模型概念盒子大小计算方式盒子模型的相关属性教学目标理解盒子模型概念掌握盒子大小计算方式掌握盒子模型的相关属性教学重点盒子模型的相关属性教学难点盒子大小计算方式教学活动及主要环节复习提问：1. CSS的高级特性包含？导入新课：互动——盒子模型？盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。
新授：一．认识盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框(border)和外边距(margin)组成。
二．盒子大小计算方式一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。
（后跟习题见PPT）三．盒子模型的相关属性1．边框（border）属性边框（border）属性设置方式如下：●border-top：上边框宽度样式颜色●border-right：右边框宽度样式颜色●border-bottom：下边框宽度样式颜色●border-left：左边框宽度样式颜色若四个边框具有相同的宽度、样式和颜色，则可以一个次设置如下：●border：边框宽度样式颜色注意：边框宽度、样式和颜色属性的顺序可以随意。
2．内边距（padding）属性内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。
其设置方法类似于padding属性的设置，其设置方式如下：●padding-top：上内边距大小●padding-right：右内边距大小●padding-bottom：下内边距大小●padding-left：左内边距大小若四个内边距具有相同的大小，则可以一个次设置如下：●padding：内边距大小3．外边距（margin）属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。
《HTML5+CSS3网站设计基础教程》教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级：20XX年级授课学期：20XX学年第XX学期教师姓名：XX老师20XX 年XX 月XX 日1课题名称第5章 CSS盒子模型计划课时8课时内容分析盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。
本章将对盒子模型的概念、盒子模型相关属性及元素的类型和转换进行详细讲解。
教学目标●掌握盒子的相关属性，能够制作常见的盒子模型效果。
●掌握背景属性的设置方法，能够设置背景颜色和图像。
●理解渐变属性的原理，能够设置渐变背景。
●熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。
重点及措施教学重点：认识盒子模型、<div>标记、盒子模型相关属性、背景属性、CSS3渐变属性。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：盒子模型相关属性、背景属性、CSS3渐变属性。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（讲解认识盒子模型、<div>标记、盒子的宽与高）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS3选择器”的相关知识。
1、通过上一章的学习，我们知道在CSS3中新增了很多新的选择器，例如属性选择器、关系选择器等。
本节课，我们将学习CSS3中重要的选择器—结构化伪类选择器。
那么，到底什么是结构化伪类选择器呢？常见的结构化伪类选择器有哪些？答案：CSS基础选择器主要包括四种，具体如下：结构化伪类选择器是CSS3中新增加的选择器。
常用的结构化伪类选择器有:root选择器、:not选择器、:only-child 选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n) 选择器、:empty选择器、:target选择器。
