改变浏览器窗口大小后保持页面布局不变的方法

问题: 

      在项目设计中往往在浏览器全屏下设置好布局后当改变浏览器窗口大小时,某些组件会出现overflow的现象。

 解决方法

        在模板的最外层div在设置组件的最小宽度min-width。 

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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 完美网页设计》

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值