配色与网页设计 项目8：CSS标准流布局 项目八 CSS标准流布局.pptx

掌握标准流的基本概念； 掌握盒子模型的基本概念； 掌握块元素和行内元素的区别； 掌握设置元素边框、边界、填充和宽度等控制大小和间距的CSS属性；;任务说明;任务步骤;定义站点和新建文件;;;;;;;;支撑知识点; content就是盒子里装的东西，我们使用width和height属性为盒子设置宽度和高度时，实际上设置的是content的宽度和高度，不是盒子的实际大小；border是盒子的边框，它具有border-style（边框线型）、border-width（边框宽度）和border-color（边框颜色）属性；padding是content与border之间的距离；margin是盒子与其他盒子间的距离。; 与标准W3C盒子模型不同的是，IE盒子模型的width和height部分包含了border和padding。当content超出盒子设定的width和height时，盒子会随着content的内容变大。在不考虑content内容超出设定的width和height的情况下，IE盒子本身的大小就是为盒子的width和height设定的值，border和padding包含在里面。;掌握标准流的基本概念； 掌握盒子模型的基本概念； 掌握块元素和行内元素的区别； 掌握设置元素边框、边界、填充和宽度等控制大小和间距的CSS属性；;任务说明;构建HTML结构;;;;设置CSS样式;;;; 在没有为网页元素添加CSS定位或浮动等属性的情况下，网页元素都是按HTML代码的顺序自上而下或自左向右逐步分布的，就像流水一样，我们将这种流动方式称为标准流或文档流。标准流布局具有以下两个比较典型的特征。;掌握标准流的基本概念； 掌握盒子模型的基本概念； 掌握块元素和行内元素的区别； 掌握设置元素边框、边界、填充和宽度等控制大小和间距的CSS属性；;任务说明;;构建CSS样式;;;#content img{ display:block; /*将图像转换为块元素*/ margin: auto; /*设置图像居中对齐*/ max-width: 600px; /*设置图像的最大显示宽度*/ max-height: 400px; /*设置图像的最大显示高度*/ };;（2）当一个块元素包含在另一个块元素中时（假设没有内边距或边框把外边距分隔开），它们的上和下外边距也会发生合并。;（3）块元素的外边距甚至可以与其自身发生合并。假设有一个空元素，它有外边距，但没有边框或填充。这种情况下，上外边距与下外边距就碰??了一起，它们会发生合并。如果这个外边距遇到另一个元素的外边距，它还会发生合并。; 外边距合并看起来可能有点奇怪，但实际上它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距与下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。;（4）行内元素不占上下外边距，其左右外边距不会合并。当两个行内元素紧邻的时候，它们之间的距离为第一个元素的margin-right加上第2个元素的margin-left。;（5）当外层盒子没有设置高与宽，则内层盒子设置的margin-top不起作用（在Firefox和IE 8中测试），读者可以自行测试；外层盒子设置高与宽之后，内层盒子如果设置margin-top会在IE 8中起作用，而在Firefox中不起作用。因此在盒子内部有间距的情况下，我们首先选择设置内间距padding来实现。