页面布局基础知识及技能训练-金旭亮.PDFVIP

页面布局基础知识及技能训练 北京理工大学计算机学院 金旭亮 温故而知新 有两种最主要的HTML元素类型 块元素 内联元素 （block element） （block element） 对页面布局影响最大的，是块元素。 1 流式布局 默认情况下的布局方式 行内元素与块元素的显示 ▪默认情况下，浏览器新起一行显示块元素， 而在同一行显示行内元素，这种方式被称 为“标准流式布局”。 示例：ShowBlockAndInlineElement.htm 行内元素的间距如何确定？ 右边距 左边距 行内元素之间的左右距离 ＝ 左元素的右边距 + 右元素的左边距 示例：InlineMargin.htm 块元素的上下间距如何确定？ 下边距： 上边距： 20px 50px 50px 两块之间的上下间距＝ max{上一个块元素的下边距，下一个块元素的上边距} 示例：BlockMargin.htm 嵌套块元素的定位基准 40px 子块元素是以父元素为基准定位的。 示例：EmbedBoxMargin.htm 如何确定元素盒子的真实宽度？ ▪如果不设置块级元素的width 属性，那么这个属性的默认值是auto ，结 果会让元素的宽度扩展到与父元素同宽，这时，如果为元素添加“边框 （border ）”、“内边距（padding ）”和“外边距（margin ）”，会导致” 内容（content ）”宽度减少，减少量等于水平边框、内边距和外边距 的和。 ▪为设定了宽度的盒子添加边框、内边距和 外边距，会导致盒子扩展得更宽。实际上， 盒子的width 属性设定的只是盒子内容区 的宽度，而非盒子要占据的水平宽度。 2 浮动布局 让一切“动”起来！ 复习一下默认情况下的布局模式 在streamLayout.htm 网页中，包 容3个div元素和一个p元素，它们 都属于块元素，在默认情况下， 浏览器在新的一行中显示块元素。 因此，我们会看到四个块元素依 据在HTML文档中声明的顺序显示。 示例：StreamLayout.htm 盒子的”浮动（float ）”