前端基础三天笔记.pptx

CSS基础第三天-DAY05

课程内容CSS三大特性:层叠性，继承性，优先级（重点）网页布局的本质盒子模型（重点）：边框、内外边距Fireworks测量工具的使用（掌握）盒子居中和背景图片居中的区别外边距合并问题（掌握）

1.1今日目标课程信息课程时长：2分钟课程名称：今日目标.avi课程详情理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例

1.2看透网页布局的本质课程信息课程时长：2分钟课程名称：看透网页布局的本质.avi问答与练习网页布局其实就是摆放盒子的过程

2.1认识盒子模型课程信息课程时长：5分钟课程名称：认识盒子模型.avi问答与练习盒子模型：margin外边距border边框padding内边距内容区content

2.2盒子边框课程信息课程时长：8分钟课程名称：盒子边框.avi问答与练习border:border-widthborder-style(solid)border-color

2.3分别指定边框课程信息课程时长：7分钟课程名称：分别指定边框.avi问答与练习border-top:1pxsolid#ff3040;border-left:1pxsolid#ff3040;border：0；清除浏览器默认的边框样式

2.4合并细线表格课程信息课程时长：7分钟课程名称：合并细线表格avi问答与练习border-collapse：collapse合并单元格相邻边框

3.1盒子内边距课程信息课程时长：11分钟课程名称：盒子内边距avi问答与练习padding：上下左右padding:上下左右padding：上左右下padding:上右下左

3.2课堂一练课程信息课程时长：3分钟课程名称：课堂一练.avi问答与练习1.要求盒子有一个左边内边距是5像素2.要求简写的形式写出一个盒子上下是25像素左右是15像素。3.要求简写的形式写出一个盒子上内边距是12像素下内边距是0左内边距是25像素右内边距是10像素

3.3新浪导航（一）课程信息课程时长：8分钟课程名称：新浪导航.avi问答与练习切片的快捷键是K

3.4新浪导航栏（二）课程信息课程时长：6分钟课程名称：新浪导航栏.avi问答与练习

3.5计算盒子实际大小课程信息课程时长：8分钟课程名称：计算盒子实际大小.avi问答与练习盒子的实际大小数如何计算的？盒子本身实际大小（浏览器）=内容的宽度width+内边距padding+边框border

3.6课堂一练计算题课程信息课程时长：7分钟课程名称：课堂一练计算题.avi问答与练习

3.7padding不影响盒子大小的情况课程信息课程时长：4分钟课程名称：padding不影响盒子大小的情况.avi问答与练习当我们块级元素的盒子不设置或者不指定固定内容的宽度和高度的时候，设置padding不会影响盒子的大小行内块元素不管有没有固定宽度都会撑开盒子

4.1margin外边距课程信息课程时长：5分钟课程名称：margin外边距.avi问答与练习margin：上下左右margin:上下左右margin：上左右下margin:上右下左

4.2块级盒子水平居中课程信息课程时长：5分钟课程名称：块级盒子水平居中.avi问答与练习必须是一个块级元素，必须有宽度盒子水平居中：margin：0auto;

4.3文字居中和盒子居中*课程信息课程时长：4分钟课程名称：文字居中和盒子居中.avi问答与练习text-align:center;文字行内元素行内块元素水平居中margin:10pxauto;块级盒子水平居中左右margin改为auto就阔以了上下margin都可以

4.4插入图片和背景图片区别课程信息课程时长：5分钟课程名称：插入图片和背景图片区别.avi问答与练习盒子居中和背景图片居中的区别插入的图片和背景的图片区别：img占位置背景图片不占位置

4.5清除内外边距课程信息课程时长：5分钟课程名称：清除内外边距.avi问答与练习1、通配符选择器*{margin:0;padding:0;}

4.6外边距合并问题（一）课程信息课程时长：4分钟课程名称：外边距合并问题（一）.avi问答与练习