浮动与定位.pptx

浮动和定位 浮动与定位 浮动一个元素是指左右移动元素，并允许接着的文本环绕它； 定位是指以像素精确指定元素在网页上的位置。 普通流 CSS 布局模型中，文本元素依源码中的顺序从上到下排列，然后从左到右； 块元素一个累一个，填满浏览器窗口或其他窗口元素的所有可用宽度； 内嵌元素和文本字符一行接一行的填满块元素。 当窗口或窗口元素重置大小的时候，块元素随着新宽度增大或缩小，而内嵌内容重新流动来适应宽度。 浮动 属性名：float 属性值：left | right | none | inherit 默认值：none 适用对象：所有元素 是否可继承：否 float属性尽可能远的向左或向右移动元素，允许后面的内容环绕它。 浮动是现代基于CSS网页设计的主要工具之一，用于创建多列布局、列表中的导航工具条和无表格的类表格的排列等。 例：float1~float3 浮动总结 浮动元素像水流中的岛 上例中，图像从普通流的位置中移除，同时继续影响周围内容；接下来的段落文本重新流动来给浮动的img元素提供空间。 浮动元素在包含元素的内容区中 浮动图像位于包含它的段落的内容区中； 它不能扩展到段落的填充区。 空白边也被包括 整个元素盒子，都在浮动。 浮动示例 利用CSS，所有的(X)HTML元素都可能浮动。 浮动内嵌文本元素 总是需要提供浮动文本元素的宽度，例：float4 浮动内嵌元素表现为块元素，即一旦浮动内嵌元素，它就遵循块级别元素的显示规则，例：float5 浮动块元素 例：float6 必须提供浮动块元素的宽度，例：float7 浮动元素不高过它们在源码中的参照物 浮动多个元素 浮动元素将位于空间允许的，尽可能左（或右）且相对较高的地方，例：float8 清除浮动元素 取消文本环绕，恢复平常布局； 可通过清除浮动元素下面开始排列的元素来完成； 应用clear属性到一个元素来防止元素紧接着浮动元素出现，并强制它从下一个可用的浮动元素下面的空间开始。 clear属性 属性值：left | right | both | none | inherit 默认值：none 应用对象：仅块级元素 是否可继承：否 例：float9, float10 定位 定位的类型 属性名：position 属性值：static | relative | absolute | fixed | inherit 默认值：static 适用对象：所有元素 是否可继承：否 position属性指示元素将被定位，并指定将使用的定位方法 定位属性值的说明 static 普通的定位方案，元素将如同在普通文档流中一样定位 relative 相对定位将盒子相对于它在流中的原始位置移动 它将保留元素在普通流中占据的空间 absolute 绝对定位的元素从文档流中完整的移除，并且相对于容器元素定位 它所占据的空间将被关闭 它对周围元素的布局没有任何影响 fixed 固定定位的特性是元素将呆在窗口的一个位置 指定偏移属性 确定了定位方法后，真正要做的是指定四个偏移属性 属性：top、right、bottom、left 属性值：长度计量值|百分比值|auto|inherit 默认值：auto 适用对象：可定位元素（即元素的position属性为relative，absolute或fixed） 是否可继承：否 这些值提供了各个元素与相应边距离的偏移属性 相对定位(relative) 相对定位是相对于元素在流中的原始位置移动；它将保留元素在普通流中占据的空间，并继续影响周围内容的布局，例：position1 说明： 文档流中的原始空间被保留 可能与其他元素发生重叠 通常用于为绝对定位元素创建定位上下文 绝对定位(absolute) 绝对定位的元素从文档流中完整的移除，并且相对于最近的容器块定位 它所占据的空间将被关闭 它对周围元素的布局没有任何影响 例：position2 容器块 元素盒子的位置和尺寸有时相对于某个称为元素的容器块的矩形计算 判断元素容器块的规则 如果定位元素没有包含在另一个定位元素中，那么它将相对于初始容器块（由html元素创建的）确定位置 如果元素有一个祖先，祖先的position属性设置为relative，absolute或fixed，元素将相对于元素的边定位 一个绝对定位元素的容器块是最近的定位祖先元素(也就是任何position属性值不为static的元素) 转变元素为容器块最普通的方法是设置position属性值为relative，但不用偏移值来移动它。即通常用相对定位给绝对定位元素创建上下文 例：position3，偏移是相对于填充边缘，不是内容区边缘 绝对定位对象的更多方面 偏移值应用于元素盒子的外边缘，例：position4 绝对定位元素总是表现为块级元素，同时