第18讲 CSS标准流布局(一).pptVIP

第18讲 CSS标准流布局（一） 教学重难点 2 任务一 盒子的内部结构（模型） 学习盒子模型前，先看个相框示意图： 任务一 盒子的内部结构（模型） 像相框一样的图形，生活中到处可见，如： 因此，padding-border-margin是一个极其通用的描述矩形对象的方法，这种矩形对象称为“盒子”。英文称“box” 任务一 盒子的内部结构（模型） 模型 就是对某种事物的本质特性的抽象。 在css中一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成，如下页图所示： 任务一 盒子的内部结构（模型） 任务一 盒子的内部结构（模型） HTML中的大部分元素（特别是块状元素）都可以看做一个盒子，网页元素的定位实际就是这些大大小小的盒子在网页中的定位。 网页布局就是如何在网页中摆放、嵌套这些盒子。摆放或嵌套这些盒子的时候需要精确计算。 任务一 盒子的内部结构（模型） 盒子模型的一般计算方式 实际width width+padding-left+padding-right+border-left+border-right+margin-left+margin-right 实际height height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom 任务一 盒子的内部结构（模型） 实例：9-1.html 任务一 盒子的内部结构（模型） 案例制作 xinwen.html 任务说明 本任务主要利用div完成整个新闻页面的布局，为其搭建好框架，以便在网页中各元素能“各就各位”以便更好的理解“盒子模型”。 任务一 盒子的内部结构（模型） 步骤 1.设置站点并建立外部CSS文件 任务一 盒子的内部结构（模型） 步骤 2.设置HTML内容框架（实例：xinwen-1.html） 任务一 盒子的内部结构（模型） 步骤 3.构建CSS（本任务设置BOX与footer两个DIV） 1.设置页面的整体样式 任务一 盒子的内部结构（模型） 步骤 3.构建CSS（本任务设置BOX与footer两个DIV） 2.设置外层div 任务一 盒子的内部结构（模型） 步骤 3.构建CSS（本任务设置BOX与footer两个DIV） 3.设置页面底部样式 任务二 标准文档流 标准文档流 标准流：指不使用其他的与排列和定位相关的特殊CSS规则时，各元素的排列规则。 标准流是网页默认的元素排列方式 任务二 标准文档流 标准流的特征（实例：9-2.html） 块级元素（block level） 实例中的li即是一个块级元素 行内元素（inline） 对于文字这类元素，各字母之间横向排列，到最右端才折行，这就是行内元素。 比如：strong/strong标记 本讲总结 18 本讲学习CSS的布局方式中标准流布局的应用及盒子模型概念的理解。 本讲作业 必做： 完成“xinwen.html”。 提升练习 制作课本202页项目实训 制作博客网站日志页面 19