老师,请教个问题,什么时候才能用px,什么时候宽度用百分比

老师,请教个问题,什么时候才能用px,什么时候宽度用百分比

老师,请教个问题,什么时候才能用px,什么时候宽度用百分比

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
Miss路 2018-04-19 13:38:13

同学,具体问题具体分析,空谈概念是讲不明白的,你遇到了具体的问题,请粘贴代码,结合实际去分析。祝学习愉快!

  • 提问者 慕粉3125272 #1
    老师,请问下,栅格布局的内容超出格子外怎么办,比如我先在格子内,然后随着屏幕的放大缩小,里面的内容就溢出了,然后两个格子内的东西就相撞了,咋办
    2018-04-19 14:19:20
  • Miss路 回复 提问者 慕粉3125272 #2
    上代码,上具体需求。空说老师想象不出来你的效果和需求呀。还有以后有新的问题,请提出新的提问,不要在之前的问题下连续提问和追加,盖楼太多的话容易漏掉一两条消息。
    2018-04-19 15:32:11
Miss路 2018-04-19 10:47:08
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .pre{
            width: 100%;
            height: 600px;
            background-color: #abcdef;
        }
        .son{
            width: 50%;
            height: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="pre">
        <div class="son"></div>
    </div>
</body>
</html>

以上是当需求要求son的宽高是pre的一半的时候。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .pre{
            width: 100%;
            height: 600px;
            background-color: #abcdef;
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="pre">
        <div class="son"></div>
    </div>
</body>
</html>

以上是当son已经被规定了固定宽度的情况,它的宽高和父元素无关。

建议同学以后要自己去写例子,找到之后可以让老师帮你鉴定是用什么方式。这样才能更加记忆犹新。

祝学习愉快!

Miss路 2018-04-18 18:50:20

首先要分清两个单位的特质,px是固定的单位,%是相对单位。当你想要给某个元素设置固定的宽度为一个具体的值时,就用px,如果你想让它随着父元素的变化而变化的话,就用百分比,因为百分比是相对于父元素来计算的。

你可以写一个小例子去测试一下。

祝学习愉快!

  • 提问者 慕粉3125272 #1
    麻烦举个例子,栅格布局内的元素是不是只能用百分比,不能用固定宽高呢
    2018-04-19 10:39:34
  • 提问者 慕粉3125272 #2
    我写栅格布局的时候,栅格里面的内容我设置了固定宽高,在pc放大缩小的时候就出现了不同格子之间的重叠现象
    2018-04-19 10:57:19
  • 提问者 慕粉3125272 #3
    但是我就算设定了固定宽度与高度,随着分辨率的变化,尺寸还是在进行变化,没有改变呢
    2018-04-19 11:03:34
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师