有没有可能只使用CSS，而不使用硬编码的数字，以获得与另一个元素相同的计算值？
有可能只使用CSS，而不使用硬编码的数字，以获得与另一个元素相同的计算值。这可以通过CSS的相对单位和计算属性来实现。
相对单位包括百分比（%）、em、rem、vw、vh等，它们可以根据其他元素的尺寸或视口的尺寸进行相对计算。例如，可以使用百分比来设置元素的宽度，使其与另一个元素的宽度保持一致：
.element1 {
width: 50%;
}
.element2 {
width: 50%;
}在上面的例子中，element1和element2的宽度都被设置为50%，它们将根据其父元素的宽度进行计算，从而保持相同的宽度。
另外，CSS还提供了一些计算属性，如calc()函数，可以在CSS中进行简单的数学计算。例如，可以使用calc()函数来设置元素的高度，使其与另一个元素的高度保持一致：
.element1 {
height: calc(100% - 20px);
}
.element2 {
height: 100px;
}在上面的例子中，element1的高度被设置为100%减去20px，从而与element2的高度保持一致。
总结起来，通过使用CSS的相对单位和计算属性，可以实现只使用CSS而不使用硬编码的数字，以获得与另一个元素相同的计算值。这样可以使布局更加灵活和可维护，并且适应不同尺寸的屏幕和设备。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云CSS CDN：https://cloud.tencent.com/product/css-cdn
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
- 腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod
- 腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
- 腾讯云网络安全（DDoS防护、WAF、SSL证书等）：https://cloud.tencent.com/product/safety
相关·内容
我在同一行上有两个元素，分别是向左浮动和向右浮动。
<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
我需要让element2在element1旁边排列，两
浏览 0提问于2012-01-31得票数 99
回答已采纳
我到处打听，没有人能真正告诉我使用.css(‘width’)和.css(‘height’)而不是.width()和.height()的好处。
我知道它们都返回偏移尺寸，这是元素的真实尺寸，无论它的内部内容如何拉伸。
我猜有一些事情，一个可以做，另一个不能做，因为我使用css()返回窗口和文档的尺寸，FF没有问题，但IE向我抛回了一个错误。所以我猜它们可能会在一些浏览器中工作，但在其他浏览器中也是如此。那么，为了100%的跨浏览器兼容性，还是只在某些情况下，我必须同时使用这两种方法？
浏览 0提问于2012-11-08得票数 23
回答已采纳
<html>
<body>
<div></div>
</body>
</html>
:root {
--scrollbar-width: calc(100vw - 100%);
}
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
width: var(--scrollbar-widt
浏览 4提问于2021-11-20得票数 0
回答已采纳
3回答
目前工作在我的第一个高度响应的网站。我已经完成了一些关于这个主题的基本教程，尽管我经常注意到它们依赖于稍微老一点的移动设备，并根据屏幕大小属性通过@media切换设计。
现在我们有了移动设备，在6“屏幕上有相同的FullHD分辨率，就像在24英寸的显示器上.所以这是不可能的。
那么我能用什么来正确地缩放文本和菜单之类的东西呢？我不想在任何地方使用百分比值。
我的直觉想法是计算一个参考大小，我知道它在屏幕上总是有相同的大小。或者至少有什么东西能给我一些如何调整尺寸的提示。
为此，我尝试使用CSS中的"em“度量，方法是创建一个具有此大小的元素，然后通过Jquery度量它的高度，因为根据我
浏览 2提问于2015-06-26得票数 0
回答已采纳
使用基于百分比的宽度和高度计算的两个矩形div没有出现在我面前。下面是正文中的所有HTML：
<div class="brd"></div>
<img src="res/logo-art.png" alt="Logo Artwork" align="middle" width="100%">
<button class="btn btn-default" id="login">Login</button>
<butto
浏览 2提问于2016-10-03得票数 0
2回答
我想知道在CSS中是否有任何方法可以使背景图像的父div适合图像大小？出于某些原因，当我使用：
背景尺寸:封面；
我的图像变得模糊，因为它正在以某种方式缩放。
浏览 0提问于2016-02-18得票数 0
3回答
我有两个body元素的子元素。HTML和BODY元素的样式都设置为高度:100%。对于孩子，第一个高度固定为100px，另一个高度设置为100%。
但是，这样做会在视觉上取代第二个子元素，将其向下推到页面上并创建一个侧边滚动条。实际上，这个子级是body和html标记高度的100%，但是因为它位于第一个100px的子级之后，所以整个部分会向下移动100px的页面，并创建一个侧边滚动条。
我可以在其中一个父元素上使用overflow: hidden来裁剪掉多余的内容，或者在第二个子元素上使用负边距来拉回它，但我不希望这样做。
理想情况下，第二个元素将紧跟在第一个子元素之后，并延伸到窗口的底部，仅
浏览 0提问于2015-02-04得票数 0
我正在为一个响应式的设计而努力，在这个设计中，容器应该装满盒子，每排3个盒子。2个正方形和1个16:9，所有三个都具有相同的高度(因此第四个框也应该自动成为下一行的第一个)，中间有5px的空间。
开始的时候感觉很简单，但我找不到一个简单的方法来让它工作！？有什么想法吗！？谢谢!
浏览 2提问于2018-05-22得票数 2
我有以下HTML和CSS
<body>
<p>Foo Foo Foo</p>
</body>
p {
font-size: 50px;
font-weight: 600;
margin-top: 20%;
}
如果要在浏览器中打开此代码，减小浏览器的宽度将使文本向上移动。避免这种情况的最简单方法是什么？
浏览 0提问于2013-04-21得票数 0
回答已采纳
我已经使用Bootstrap modals在Splunk HTML仪表板中创建了一个弹出窗口。弹出窗口工作得很好，但其中的iviewer有一些问题。
iviewer不知何故认为它的大小和位置并不是它们原来的样子。当我在那里"loadImage“到用"zoom: fit”创建的iviewer中时，图像被向上和向左移动，并且肯定比“loadImage”所暗示的更小。当我使用iviewer('center')时，它以类似的上移和左移的某个点为中心。
是否有要查找的CSS属性？在我自己的CSS中重写(我可以通过ID来做，因此不会影响其他任何事情)？
浏览 1提问于2015-12-11得票数 1
2回答
因此，我试图为我的HTML文档设计一个更有响应性的设计，我首先想得到的是字体大小的缩放，取决于容器的高度、和宽度。现在我有以下几点：
我进行了一些研究，发现css中的"vw“单元允许字体根据容器进行缩放，但我只是注意到，只有当我调整浏览器宽度的时，它才能工作，这得到了以下内容：
如图所示，如果按比例调整浏览器的宽度，则文本确实在缩放，但我意识到，当调整浏览器的高度时，根本不缩放。
如何确保基于容器的宽度和高度缩放文本？
html,body {
height: 100%;
}
.outer {
height: 50%;
bord
浏览 4提问于2020-10-31得票数 2
2回答
我现在遇到的问题是，我希望navbar2类的第二个导航条也被固定在div class="col-xs-10"中，这样它下面的内容就可以轻松地滚动，而无需移动导航条2。另一个问题是，当navbar2固定时，就不能在不同大小的屏幕上保持宽度。工作代码在这里 ..。有人能帮忙吗..。提前感谢
<nav class="navbar navbar-default navbar-fixed-top navbar1">
<div class="container">
NAVBAR FIXED TOP
</div>
&
浏览 4提问于2016-06-22得票数 0
回答已采纳
1回答
2幅图像的响应绝对定位
、、、
我有一个足球场的图像，有11个区域(左结束区，右结束区，以及0-9区)。我也有一个足球的形象，我希望能够绝对地放置在任何这些想要的11个区域，并让球和球场是负责的大小(它将用于平板电脑，桌面和移动)。我也在使用引导，但现在我已经取出了这个变量，这样我就可以尝试让它使用我自己的CSS/HTML。
我可以让它绝对地把球放在球场的顶端，我也可以让球的大小适当地减小，但是球保持相同的大小。此外，当屏幕尺寸缩小时，球的位置就不正常了。我怀疑这是由于我使用px单位左/顶值。我试着让它与百分比(左:10%，顶:50%，等等)一起工作，但当我这样做时，它似乎忽略了左/顶。
我也尝试过设置字段容器的宽
浏览 4提问于2020-09-19得票数 0
回答已采纳
2回答
有谁知道如何使我的表的行和列的移动响应。我从数据库插入我的数据，但它们不是移动响应的。element1和content1 id用于元素的背景。您能告诉我如何使我的行和列的表具有移动性吗？
下面是我的html和php：
<section>
<table>
<tr>
<?php
$counter = 0;
while($product = mysqli_fetch_assoc($featured)){
浏览 0提问于2017-05-27得票数 1
我有一个视频容器，如果我能使用calc根据宽度计算高度，那就太好了。
的一些提示声称这样的事情是可能的：
.selector{
width: 100%;
height: calc(width * 1.75);
}
但我还没有在Chrome26中看到这一功能。如何仅使用CSS3计算高度？
浏览 0提问于2013-05-11得票数 7
1回答
我正在为一个实验创建一个游戏，当用户在屏幕上拖动对象时，将跟踪用户的鼠标。问题是，这款游戏将在不同屏幕尺寸和分辨率的不同电脑上玩(人们通过Amazon Mechanical Turk招募)。
我的首要任务不是创建一个动态页面，它会根据用户改变大小等，而是更多地获得一些准确工作的东西，可以让我尽快收集数据。我只是想要一种方法来创建跟踪用户的鼠标，在所有人中都是恒定的(即，将对象从0,0移动到100,0意味着在对象位置方面用户之间的相对位置相同)。
我认为最好的方法是为游戏定义一个绝对大小的窗口，例如600x800，无论最大的大小是什么，都可以让最多的人这样做。这样，所有参与者的运动都将在相同大小
浏览 2提问于2016-05-10得票数 0
1回答
我正在为智能手机创建下面的布局。iPhone、安卓和黑莓是主要目标。无论是纵向还是横向，布局都将保持不变。对于景观，它将缩放到宽度。我想要做的是定位和调整文本的大小，而不管屏幕方向是在相同的相对位置。灰色方框表示图像。我想知道的是，在这种情况下，是否有任何特定的css单位，vw，em或%，有任何优势？
浏览 1提问于2013-02-14得票数 2
回答已采纳
2回答
我在我的html中使用了一个map标签，在一个图像上有几个坐标。这个想法是，当用户点击该图像时，一条消息或另一张图像将弹出。但此时指针不正确，就好像图像移到了一边，而地图停留在另一个地方，我估计地图向左移动了大约100px。所以现在指针移到了另一个东西上。我也不知道原因。我使用了flex，但在使用flex之前就不起作用了。我使用了www.image-map.net .presentacion-lamina {
display: flex;
justify-content: center;
} <div class="presentacion-lamina"&
浏览 36提问于2021-07-09得票数 1
2回答
我正在做一个基于HTML和CSS创建PDF文件的项目。我们正在使用天线屋格式化程序来生成PDF文件。HTML文件是从内容管理系统导出的。不幸的是，我们在PDF文件中使用了很多表格(技术文档)。在内容管理系统中，我们只能给出固定宽度的表列。导出的HTML表如下所示：
<table data-ait-rows="4" data-ait-cols="3" data-ait-width="4818" style="width:85mm;">
<tr style="height:5.9mm;" data
浏览 4提问于2016-08-09得票数 0
回答已采纳
CSS和JS都使用外部文件进行读取。
我想做的是：
.typ-wrap::-webkit-scrollbar-track-piece:end {
margin-right: ?px;
background: transparent;
}
.typ-wrap::-webkit-scrollbar-track-piece:start {
margin-left: ?px;
background: transparent;
}
我想包括在这个?中减去302 at得到的值。
在公式中，? = (Window size) - 302px / 2 (?是相同的值)
我尝试过的(最新版本)(没有成
浏览 4提问于2019-03-04得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
