为什么在使用百分比和px来定义身高时存在差异？
在使用百分比和px来定义身高时存在差异是因为它们是基于不同的尺度进行计算的。
首先，百分比是相对于父元素的尺寸进行计算的。当我们使用百分比来定义身高时，它会根据父元素的尺寸进行相应的计算。例如，如果父元素的高度是200px，而我们将子元素的身高定义为50%，那么子元素的身高将会是100px（50% * 200px）。
而px（像素）是一个绝对单位，它是屏幕上的一个物理点。当我们使用px来定义身高时，它会直接指定元素的具体尺寸。例如，如果我们将身高定义为100px，那么元素的身高就会是100个像素点。
因此，使用百分比和px来定义身高存在差异。百分比是相对的，它会根据父元素的尺寸进行计算，而px是绝对的，它直接指定元素的具体尺寸。
在实际应用中，使用百分比可以实现响应式布局，使元素根据父元素的尺寸进行自适应调整。而使用px可以精确地指定元素的尺寸，适用于需要固定尺寸的场景。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云计算服务：https://cloud.tencent.com/product/cvm
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
相关·内容
所以我定义了一个固定高度的容器。<div class="container"></div>如果我使用px设置容器的高度，"content.container {}
但是如果我设置"height: 90%;"，那么它就会。<e
浏览 27提问于2018-07-24得票数 0
回答已采纳
1回答
我正在做这个CSS，我在一个div里面包装了一篇文章。我已经给出了两者的百分比宽度，以及div的填充。在我给文章添加边框之前，我的填充似乎是“不适用的”。您可以通过注释应用于文章的边框来查看差异。我的文章是身高收缩。为什么会发生这种情况？<style> margin:100px;.content{padding:.9746589%; }.co
浏览 3提问于2013-08-24得票数 0
2回答
当你把最小高度给父母，给孩子百分比身高时，孩子不会得到任何高度。</div>但是，如果你给父母显式的高度，即使它小于最小高度，孩子也会得到一个高度，但它是相对于最小高度而不是提供的高度(当高度<最小高度时).p { height: 1px; h
浏览 4提问于2019-05-13得票数 4
2回答
下面的代码在Chrome (版本71.0.3578.98 (正式构建)(64位)和Firefox (64.0 (64位))中有不同的行为。div { border: 1px solid gray; display: grid; height: 100px; grid-row: 1/2;
div.co
浏览 0提问于2018-12-28得票数 1
回答已采纳
当屏幕大小像桌面计算机一样大时，div的内容类似于(没有其他文本内容，只有使用背景图像填充图像的div )： background-image: url('images/pc-content01.jpg'); height: 1129px;当屏幕大小变小时，css样式会发生如下变化： backgroun
浏览 5提问于2017-07-24得票数 2
回答已采纳
2回答
嗨，我想在ion-fab中做一些自定义样式，但是当我们单击fab按钮和fab列表打开时，没有发现任何可以移除交叉图标的东西，我不想要交叉图标。
允许高度:像素身高:百分比<ion-fab-button>
<ion-
浏览 0提问于2019-07-10得票数 1
2回答
因此，我想使用jquery来检查css类的属性值是否等于某个值。如果是，则执行一些代码，如果不执行，则执行其他代码。 }if (jQuery( ".mobile_swap" ).css('height') == '100px所以我的问题是为什么它承认px而不是百分比？它也不适用于汽车。
浏览 2提问于2014-01-14得票数 0
回答已采纳
我正在使用"React布局“包来调整组件的大小。 <div id="wrapper"> </div>我的部分解决方案是像这样确定父母的身高：
let parentHei
浏览 1提问于2018-05-04得票数 0
我正在建立一个网站，在那里人们可以得到一些基于他们的体重和身高的信息。如何构造一个查询，使其提供与用户输入的值最接近的两个特定值的行？
我在stackoverflow上发现了，它非常有帮助。我正在尝试用2个1的值来完成类似的事情。
浏览 1提问于2011-02-10得票数 5
回答已采纳
我在localhost和我的ElasticBeanstalk服务器上运行相同的代码，其中有几个类使用百分比作为宽度。百分比的表示使用百分比
将大小定义为相对于元素的父对象。然而，在整个DOM树中，宽度值最终被.005关闭(见图)。我的假设是，应用程序的根大小略有不同，在计算百分比时会产生细微的差异。当这些小值加起来时，它们会使事情看起来偏离了他们想要的位置。这一切为什么要发生？我
浏览 3提问于2021-02-25得票数 1
回答已采纳
1回答
我正在尝试创建一个SVG元素，其宽度由父元素的百分比和固定值定义，比如50% + 20px。对于普通的html元素，在CSS中可以使用calc(50% + 20px)。对于嵌入式SVG，有没有等效的方法来做到这一点？具体地说，我使用的是snap.svg，尽管我不确定SVG中是否普遍存在这种功能。我试着用百分比和px来设置<svg&
浏览 6提问于2016-03-24得票数 4
我在一个容器中有一堆div。它们溢出，我希望有一个滚动条来允许滚动。除了，我发布的链接有一个固定的height: 200px;。我想要一个百分比的身高。我尝试设定一个百分比height和max-height，但没有运气。这是我的进步：非常感谢
PS。我知道这可以使用Javascript/jQuery完成，但我正在寻找一种CSS专用的解决方案。
浏览 7提问于2015-10-12得票数 8
回答已采纳
1回答
我很难让Chrome注意到flex: 1 1 25%在flex-direction: column布局中的灵活基础部分。它在row布局中工作得很好。下面的代码片段演示了这个问题:黄色、蓝色和粉红色的条形是基于弯曲的50 in，25%和75%，显示在列和行的flex方向上。如果您在Firefox (或IE11或Edge)中运行它，列和行将按预期划分区域：但如果你在Chrome (47)或Safari (9.0.3)中运行它，左边的列布局似乎完全忽略了挠性基础-
浏览 0提问于2016-01-27得票数 6
1回答
我不明白为什么要计算height: 1% auto ，因为父elements(**html** 和 body 标记没有显式地设置它的高度，而是有不同的高度，因为我们只是直接将高度设置为 auto。;}
我已经阅读了CSS2.1规范，并思考了我的问题可能涉及的高度属性和边缘崩溃主题，但仍然无
浏览 1提问于2016-02-21得票数 29
回答已采纳
我的问题是，在某种程度上，最大高度不能正常工作。我为此准备了一个： display: grid; grid-template-columns: 200px;}
height: fit-content;
max-height有趣的是，当
浏览 2提问于2021-12-02得票数 3
回答已采纳
1回答
当我向下/向上滚动时，我想阻止div移动。但我不想要position:fixed属性的原因是，当元素固定时，滚动条是关闭的。例如 position:fixed;} 如需了解更多信息，请访问：
输入此链接，您可以看到我的代码(f12铬)，在这种情况下，移动的元素是固定的。问题是，当你改变屏幕尺寸<em
浏览 2提问于2014-08-28得票数 1
height (50% of 50px)</div> <div class="parent2">I'm absolute positioned.</div></html>
没有为html和body定义高度，因此它们使用默认值auto (这意味着它们的高度是其内容的高度)。他们没有定位，所以他们是静态的。如果我没有弄错，只有
浏览 0提问于2016-02-10得票数 2
回答已采纳
首先，我的演示是在。
1)我试图将高度定义为百分比或使用window.innerHeight等，以便Slideout尽可能多地使用空间。当前，高度和宽度是由px在CSS中定义的。2)您会注意到，当您单击后面的一个选项卡时，其右侧的选项卡将显示为页面底部的链接。这是因为每个链接都应该完全覆盖它右边的选项卡。我一直无法做到这一点，尝试的东西，如绝对定位等，我只是没有想法。编辑1:下面马特给了我一些建议，让我的<
浏览 1提问于2010-02-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
