gpt4 book ai didi

css - 在浏览器中放大或缩小时的网站布局 "breaks apart"+ 其他一些基本的 css 问题

转载 作者:技术小花猫 更新时间:2023-10-29 10:56:45 24 4
gpt4 key购买 nike

我对 CSS 几乎是个新手,我现在想做的只是为小型企业设计一个非常简单/基本的初始页面或登录页面。

这是站点的 URL:My site

现在,如果您继续使用任何浏览器,比如谷歌浏览器,然后缩小或放大 (ctrl -/+),您会注意到网站布局开始“ split ”,因为我的所有 div 都开始四处移动。我显然不想要这个,只是希望网站在人们放大或缩小时保持不变,就像所有好的网站一样哈哈。

我知道这一定与定位有关,但我想不通这对生活或我来说是什么。昨晚我花了几个小时浏览类似的问题,但我能弄明白。

我不是为了占用更多空间而发布代码,我假设既然我给了你 URL,你就可以从那里检索代码。

我还有一些更小的问题:

1) 如果你在 chrome 上打开我的网站,或者你会注意到在页面底部的“条款和条件”之后,网站就结束了,就像它应该的那样。但是,如果您继续使用 Firefox,您会注意到在“条款和条件”之后,背景可以说会持续一段时间。为什么会这样,我该如何解决?

2) 您会注意到在不同的浏览器上元素的定位略有不同。最明显的是,如果您查看 chrome/firefox,然后查看 Internet Explorer 9,您会注意到“条款和条件”比 chrome 或 ff 略高,因此略微触及主要内容区域。有办法解决这个问题吗?

3) 什么是使 div 居中的有效方法?例如,我想在主要内容区域中将“注册”按钮完全居中。我几乎一直在关注它并使用相对定位来居中。什么是更准确的居中方式?

谢谢,如果这些问题看起来有点多余,我们深表歉意。如果您需要任何澄清,我会像鹰一样监视这个问题。

干杯

最佳答案

  1. 放大或缩小时,您会遇到舍入和文本渲染方面的问题。确保布局能够经受一点拉伸(stretch)而不会崩溃是个好主意。

  2. 相对定位受到#1 中提到的问题的影响,因此不可靠。

  3. 研究使用某些方法来删除各种浏览器将应用的属性。你可以使用 reset给你一些更可行的东西或尝试normalize使它们在浏览器之间更加均衡的值。

  4. 对于(水平)居中,您有一些选择:

    • 如果您有一个带有“text-align:center”的容器,它会将所有内联 block 或内联子元素居中。
    • 如果您想将 block 元素居中,可以使用“margin: 0 auto”使其水平居中并移除垂直边距。
    • 如果你想让一个绝对定位的元素居中,你可以使用“left: 50%, margin-left: -(width of element/2)”。

除了尝试摆脱相对定位之外,我还建议您不要显式设置 body 元素的高度。通常,您希望元素管理它们自己的大小,这样它们会更健壮。

如果您现在使用“position: relative”,因为这是您知道的用法,我建议您尝试使用“float: left”(或right),或更改显示类型(display: inline-block) .这可能会帮助您朝着正确的方向开始。

关于css - 在浏览器中放大或缩小时的网站布局 "breaks apart"+ 其他一些基本的 css 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11488114/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com