第4章CSS盒子模型.ppt

图4.18 行内元素之间的margin 4.7.2 块级元素之间的竖直margin 如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。 两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图4.20所示。 这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。 图4.20 块元素之间的margin 4.7.3 嵌套盒子之间的margin 除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。 当一个div块包含在另一个div块中时，便形成了典型的父子关系。 其中子块的margin将以父块的内容为参考，如图4.22所示。 图4.22 父子块的margin 图4.23 父子块的margin 图4.24 IE与Firefox对待父height的不同处理 4.7.4 margin属性可以设置为负值 上面提及margin的时候，它的值都是正数。 其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多，在后续章节中都会陆续介绍。 这里先分析margin设为负数时产生的排版效果。 当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。 实例代码如下，实例文件为“04-12.html”。 图4.26 父子块设置margin为负数 ? 设置2个属性值时，前者为上下padding的值，后者为左右padding的值。 ? 设置3个属性值时，第1个为上padding的值，第2个为左右padding的值，第3个为下padding的值。 ? 设置4个属性值时，按照顺时针方向，依次为上、右、下、左padding的值。 如果需要专门设置某一个方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。 例如有如下代码，实例文件为“04-04.html”。 图4.8 padding示意图 4.5 设置外边距 外边距（margin）指的是元素与元素之间的距离。 观察图4.7，可以看到边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。 这是因为body本身也是一个盒子，在默认情况下，body会有一个若干像素的margin，具体数值因各个浏览器而不尽相同。 因此在body中的其他盒子就不会紧贴着浏览器窗口的边框了。 为了验证这一点，可以给body这个盒子也加一个边框，代码如下。 body{ border:1px black solid; background:#cc0; } 图4.10 margin的效果 4.6 盒子之间的关系 4.6.1 HTML与DOM 1．“树”的概念 图4.12 家谱示意图 2．DOM树 图4.14 打开新窗口 图4.15 DOM树与页面布局的对应关系 4.6.2 标准文档流 “标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。 1．块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。 2．行内元素（inline） 对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。 比如strong/strong标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。 再比如，最常用的a标记，也是一个行内元素。 4