CSS盒子模型(2h)分析.ppt

课下练习： 2．行内元素（inline） 对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。 比如span/span标签，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。 2．行内元素（inline） 注意： 1.行内元素在DOM树中和块级元素一样，是一个节点。从DOM的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点； 2. 但是从CSS的角度看，二者有很大的区别，块级元素拥有自己的区域，行内元素则没有（display:block或者inline）； 3.标准流就是CSS规定的默认的块级元素和行内元素的排列方式； 小结： 2.7 盒子在标准流中的定位原则 如果要精确地控制盒子的位置，就必须对margin有更深入的了解； padding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。 margin则用于调整不同的盒子之间的位置关系，因此必须对margin在不同情况下的性质有非常深入的了解。 2.7 盒子在标准流中的定位原则 2.7.1 行内元素之间的水平margin 2.7.2 块级元素之间的竖直margin 2.7.3 嵌套盒子之间的margin 2.7.4 margin属性可以设置为负值 2.7.1 行内元素之间的水平margin 1.当两个行内元素相邻时，它们之间的距离为第一个元素的margin-right加上第2个元素的margin-left。 图2.18 行内元素之间的margin 2.7.1 行内元素之间的水平margin 实例文件为04-08.html。 2.7.2 块级元素之间的竖直margin 如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。 两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图2.20所示。 图2.20 块元素之间的margin 1.这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。 2.这个特性在制作网页时要特别注意，否则常常会被增加了margin-top或者margin-bottom值时发现块“没有移动”的假象所迷惑。 2.示例文件02-09.html。 示例文件02-09.html。 2.7.3 嵌套盒子之间的margin 除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。 当一个div块包含在另一个div块中时，便形成了典型的父子关系。 其中子块的margin将以父块的内容为参考，如图2.22所示。 图2.22 父子块的margin 1.在标准流中，一个块级元素的盒子水平方向的宽度会自动延伸，直到上一级盒子的限制位置。 2.实例文件02-10.html 说明： 1.外层的盒子的宽度会自动延伸，直到浏览器窗口的边界为止； 2.内层div宽度也会自动延伸，直到父div的边界为止。 3.子div距离父div上边框为40px； 4.上面所说的自动延伸是指宽度。对于高度，div都是以里面的内容的高度来确定的，也就是会自动收缩到能够包容下内容的最小高度； 5.宽度方向自动延伸，高度方向自动收缩，都是在没有设定width和height属性的情况下的表现； 6.width(height)==content 盒子占用的宽度或者高度=content+padding+border+margin 2.7.4 margin属性可以设置为负值 上面提及margin的时候，它的值都是正数。 其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多，这里先分析margin设为负数时产生的排版效果。 当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。 实例文件为“02-12.html”。 Display用法示例：创建基于列表的导航菜单 示例文件：导航菜单.html。P140 注意：display:block语句使得超链接被设置成了块元素。当鼠标指针进入该块的任何部分时都会被激活，而不是仅在文字上方时才被激活。 Display用法示例：创建基于列表的导航菜单 第一步：建立html基本结构，将菜单的各个项用项目列表ul表示。