logo标签列表

CSS：width/height属性仅响应以像素为单位的值（而非百分比）。

css
3
我可以帮您将以下内容翻译为中文：

我想在网页上创建一个红色的正方形。

当我写下以下HTML元素时：

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10%**','height' : '**10%**'}"

我得到了一个白色的网页。

然而，当我将“％”替换为“px”并编写：

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10px**','height' : '**10px**'}"

我在屏幕角落看到一个小红色正方形。很可能是我错误地使用了百分比功能。你能告诉我问题出在哪里吗？

1
你可以在这里找到答案。https://dev59.com/mmUq5IYBdhLWcg3wYvZ6 - masud_moni
4个回答
4

<div class="parent" style="width: 100%; height: 500px">
  <div style="width: 10%; height: 10%; background: red"></div>
 </div>

我认为您需要有一个父元素作为百分比宽度和高度的基础。
0

当您使用百分比时，您将对象的大小定义为父级的百分比。如果您的div的父级大小很小，例如100px x 100px，则将您的div设置为10％宽度和10％高度将最终得到一个大小为10px x 10px的div（因为这是父级大小的10％）。

确保您的div的父级大小是您想要的。最好的方法是使用内置于浏览器中的开发人员工具。

那么每当我使用%时，我是否总是需要从<html>元素开始，并将其定义为100％，然后定义其所有子元素？ - CrazySynthax
当然不是。父元素并不总是HTML元素（事实上，您不应该为html设置样式，而应该为body设置样式）。父元素是包含您的div的元素。父元素的样式和位置完全由您决定（例如，它可以被定位为“fixed”，这将不依赖于您的body大小等）。 - Baumi
当我定义了 "body { width: 100%; height: 100% }" 时，它没有起作用。只有当我写成 "html. body { width: 100%; height: 100% }" 时，我才得到了红色的正方形。所以...我认为这意味着我们必须从 <html> 标签开始。 - CrazySynthax
0
'

'%' 需要 ah 位置：尝试这个

' 

<div style="position:absolute;background: red;table-layout: fixed;width:10%;height:10%;"></div>

0
如果您想使用％作为宽度和高度，请先使用像素（px）创建一些外部div。
Check this out: https://jsfiddle.net/JakubL/sjtcvwdr/

外部div的高度为1920像素，宽度为1440像素，因此div-test（您的红色正方形）div的高度将为192像素，宽度为144像素。

理论上，这可能回答了OP的问题，但根据网站规则，您需要在此处发布代码并使用链接作为参考或演示。请在此处编写您的代码，否则此帖子将很快被删除。 - Danh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接