Question

我想在网页上创建一个红色方块。

当我写下面的html元素时：

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

我有一个白色网页。

然而，当我用'px'替换'％'并写：

{{1}}

我在屏幕的一角有一个小红色方块。可能我使用百分比功能错了。你能告诉我这是什么问题吗？

Answer 1

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

我认为您需要一个父级，您的百分比宽度和高度将基于。

Answer 2

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

确保div的父级大小符合您的要求。最好的方法是在浏览器中使用开发人员工具。

Answer 3

'％'需要啊位置：试试这个

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

Answer 4

如果要将％用作宽度和高度。首先，你需要一些带有px的外部div。

Check this out: https://jsfiddle.net/JakubL/sjtcvwdr/

外部div的高度为1920px，宽度为1440px，所以div-test，（你的红色正方形）div的高度为192px，宽度为144px。