《HTML CSS JavaScript网页制作三合一案例教程》教学课件 09第九章.pptxVIP

主编：徐照兴、谭鸿健、郑宁健;第九章 CSS标准流布局——制作企业网站的新闻显示页面;;案例一 对页面进行整体布局 ——盒子模型;案例一 对页面进行整体布局 ——盒子模型;——盒子模型的概念;网页中的每个元素都是长方形的盒子，那么盒子的尺寸是怎样精确计算的呢？在不考虑content（内容）溢出盒子的情况下，标准模型中盒子的实际大小计算方式如表9-1所示。;案例二 制作页头部分——标准流布局概念;案例二 制作页头部分——标准流布局概念;——标准流的概念;案例三 制作新闻正文显示部分;案例三 制作新闻正文显示部分;（1）当一个块元素出现在另一个块元素上面时，上方元素的下外边距与下方元素的上外边距会发生合并。合并后的外边距高度等于两个发生合并的外边距高度中的较大者，如图9-17所示。在制作网页时，有时候会发现增加了margin-bottom或margin-top的值，但元素却没有移动的情况，便是这个原因。;（2）当一个块元素包含在另一个块元素中时（假设没有内边距或边框把外边距分隔开），它们的上和下外边距也会发生合并，如图9-18所示。;外边距合并看起来可能有点奇怪，但实际上它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距与下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了，如图9-21所示。;图9-20 空元素与普通元素外边距合并前后效果;（4）行内元素不占上下外边距，其左右外边距不会合并。当两个行内元素紧邻的时候，它们之间的距离为第一个元素的margin-right加上第2个元素的margin-left，如图9-22所示。;（5）当外层盒子没有设置高与宽，则内层盒子设置的margin-top不起作用（在Firefox和IE 8中测试），读者可以自行测试；外层盒子设置高与宽之后，内层盒子如果设置margin-top会在IE 8中起作用，而在Firefox中不起作用。因此在盒子内部有间距的情况下，我们首先选择设置内间距padding来实现。（6）当将margin值设置为负数时，设为负数的盒子会向相反方向移动，甚至覆盖在另外的盒子上；如果盒子之间是父子关系，则还可以使得子盒子从父盒子中“分离”出来。因此，指定负的外边距值时要小心。;Thank you！