开发工具:
文件大小: 37kb
下载次数: 0
上传时间: 2011-04-03
详细说明： CSS 定位属性允许我们操作自然的文档流，在页面上排列方框，以达到美观且用户友好的设计。在实际创建 CSS 布局之前，这是需要理解的最后一个概念。 不同的定位类型(静态、绝对、相对和固定)，以及位置的浮动，涵盖了大多数布局场景。在探讨每种定位类型是如何工作的之后，将进行一些练习，使它们真正发挥作用。 1.静态定位 静态定位是页面默认值。元素按照它们在源代码中的顺序依次流动，用块元素和行内元素充满浏览器窗口。静态定位基本上意味着元素没有定位，只是常规的页面流。 尽管它是默认值，但是有时候需要重新设置应用另一种定位的元素时，还是有必要显式地设置为静态定位。例如，打印机会对具有任何定位的页面无所适从，只有一个页面会打印出来，或者元素将会被截断。可以创建一个打印样式，用于将已定位的元素重新设置为静态定位，以便它们可以正确地打印出来。 2.相对定位 相对定位可以相对于元素在文档流中的静态位置，给元素指定一个位置。如果将一个元素设置为相对定位，但是没有为 top、right、bottom、left 等属性设置值，那么元素将保持在文档流中的相同位置，就像使用的是静态定位一样。但是一旦设置了这些属性，元素将根据所指定的数量，偏离其在页面中的自然位置。但是它填充页面流的 空间保持不变。因此，如果给元素指定 50 像素的 top 值和 50 像素的 left 值，那么元素将在这两个方向移动 50 像素，但是在其上边和左边将会出现 50 像素的空白，没有任何东西填充该区域。如图所示。 （图片） 注意：也可以对这些属性使用负值。 3.绝对定位 绝对定位(AP)可用于在页面上精确的 X(水平)和 Y(垂直)坐标位置放置对象。AP 元素的起点值起源于最后一个已定位的父元素。这可能不是直接父元素，如果 AP 元素的父元素使用静态定位，即不会被认为是已定位的，所以 AP 元素在文档树中继续向上寻找已定位的祖先。可能会一直沿着文档树向上寻找，直到找到 body 元素(它被认为是已定位的)，并从这一点开始设置 X 和 Y 坐标。 如果想要将绝对定位的元素包含在一个特定的父元素中，请确保将父元素的位置值设置为相对。正如上面所提到的，没有指定值的相对定位不会影响元素，除非给元素指定一个位置。子元素将使用该位置来计算出自己的位置值。 一旦父元素有了定位，就可以为绝对定位的元素设置 top(或bottom)和 right(或left)等属性的值(没有同时使用 right 和 left，以及 top 和 bottom，是因为这些坐标可以相互计算出来，没有必要那么啰嗦)。 记住，(X)HTML 提供一种自然的、从浏览器窗口左上角开始的元素流。尽管利用 CSS 对元素进行移动，但是元素流定义了元素之间的相对关系。这不包括 AP 元素。 AP 元素不是很友好，不合群。尽管它们相对于父元素进行定位，但是它们排除在页面上自然元素流之外；其他元素不能相对于它们，也不知道 AP 元素从何处开始、何处结束。这会导致内容重叠和其他混乱，除非仔细规划 AP 元素的使用。 4.固定定位 与绝对定位一样，固定定位的元素被设置在页面上的特定 X 和 Y 坐标位置。但是位置总是设置为相对于浏览器窗口的可见区域(即视口)，而不是像 AP 元素那样相对于父元素。访问者滚动页面时，固定内容将保持在屏幕上的确切位置上。 固定定位可以创造性地用于背景图像或者导航区域。即使你滚动页面以阅读更多内容时，导致区域仍然保持在相同位置。不幸的是，唯一支持固定定位的 Internet Explorer 版本是最后一个版本，即 Internet Explorer7 (该技术越早采纳，大家就越早享受它)。高级 CSS 设计者使用脚本来迫使早期版本的 Internet Explorer 模拟固定定位的效果。但是在练习中，这通常会导致延迟或闪动的页面刷新。如果针对的是早期版本的 IE，那么在决定采用固定定位解决方案之前，应该多多思考和测试。 内容摘自《CSS 与 Dreamweaver CS3 完美网页设计》 ...展开收缩
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
