Question

问题：我想在％中添加padding-top到所有列表项（因为我需要稍微移动文本并且还需要所有元素都可以扩展）， { {3}}

高度很好。为了计算高度，我计算了li高度（最初为40px）相对于其父ul（400px）的百分比。 400px中的40px = 10％。在总ul高度仍然等于400px之后似乎工作正常。（盒子的高度为53.33vw，因为400px是750px的53.33％）。

但问题是以％计算填充顶部。为了计算填充顶部（8px）我需要计算400px中的8px（400px是父级的高度） ul）= 2％，并且在固定布局中，我从高度减去2％（10％，因此高度现在是8％）。但在那之后，总的ul高度等于470px。如何计算填充顶部％，以便ul的高度仍然是400px？我需要保留那些原始高度为ul的那个400px，在添加padding-top之后，ul的高度变为470px这是不正确的。

HTML：

<div class="box">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</div>

CSS：

body {
    line-height: 1;
}

/* THIS IS MY CODE*/

.box {
    margin:0 auto;
    width:100%;
    max-width:750px;
    height:53.33vw;
    max-height:400px;
}

ul.list {
    padding: 0;
    width:100%;
    height:100%;
    background:green;
    list-style-type:none;
    text-align:center;
    font-size:3vw;
}

ul li:nth-child(odd) {
    height:8%;
    width:interit;
    padding-top:2%;
    background:grey;
}

ul li:nth-child(even) {
    height:8%;
    width:interit;
    padding-top:2%;
    background:red;
}

Answer 1

这是因为padding中的margin和%是根据您的需要从width而不是height计算的。

来自spec for padding

与margin属性不同，填充值的值不能为负数。与边距属性一样，填充属性的百分比值是指生成的包含块的宽度。

来自spec for margin

百分比是根据生成的包含块的宽度计算的。请注意，对于＆＃39; margin-top＆＃39;和＆＃39; margin-bottom＆＃39;同样。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。这也是您在HTML中创建宽高比锁定div的方法，因为您可以使用带有百分比值的height从width计算padding-top。

您的解决方案是使用CSS calc，它具有良好的browser support并以非常简单的方式解决您的问题。这里唯一的缺点是它没有计算padding-top中的%，但你根本无法从padding-top计算%中的height元素，除非你使用javascript。

如果您绝对不需要 padding-top: 2%;我建议采用以下解决方案。

你的CSS看起来像这样

ul.list li {
    height: calc(10% - 8px);
    padding-top: 8px;
}

这会为所有ul.list li项目提供10% - 8px的高度，然后8px也会用作padding-top的值，这基本上会成为一个完美的10%再次。

您也可以用不同的风格编写选择器，我在这里使用ul.list li作为主选择器，只选择所有li元素，但您有:nth-child(odd)和:nth-child(even)选择器。

您在这些选择器上编写了重复的属性，唯一的区别是他们的background属性。

我强烈建议尽可能避免重复，因为您有时会忘记更改两个属性，而是将CSS更改为以下内容：

/*shared properties in a general selector*/
ul.list li {
    width: inherit;
    height: calc(10% - 8px);
    padding-top: 8px;
    background: grey;
}

/*if rule is not applied, use ul.list instead of just ul*/
ul li:nth-child(even) {
    background: red;
}

这甚至不需要ul li:nth-child(odd)，因为这也可以是共享样式的一部分，然后由更具体的ul li:nth-child(even)选择器覆盖。

另一种方式

执行此操作而不是依赖%值的另一种方法是使用em或rem值 - 它们的工作方式是根据字体大小进行缩放。

更多阅读

基本上，rem 始终相对于root element <html>元素。

在<html>元素上设置字体大小将定义CSS中1rem的值，如果未设置font-size，则浏览器默认值（通常为16px将使用）。

html { font-size: 16px; /*1rem is now 16px*/ }

当您使用font-size值定义上面的16px时，0.5rem将等于8px - 为什么这有趣？它可伸缩！但是用不同的方式。

现在，当您应用媒体查询并将font-size更改为更大或更小的内容时，使用rem的所有内容都会按比例缩放（您必须设置font-size <html>元素课程。）

现在em有点不同了，它与自己的font-size相关，但是因为这是从它继承而来的父元素自动（如果在font-size或em中设置了%），它基本上相对于父母。

如果我们采用最后一个CSS示例

html { font-size: 16px; /* 1rem = 16px, 1em = 16px */ } body > div { /*every direct div of body tag*/ font-size: 0.5em; /*8px*/ font-size: 0.5rem; /*8px*/ } body > div > div { /*every second level nested div*/ font-size: 0.5em; /*4px*/ font-size: 0.5rem; /*8px*/ }

基本上，由于em相对于它的父级大小是排序的，因此当您在em中缩放时，字体大小会减少更多 - 这是有潜在危险的，因为如果您更改结构并添加一个容器，在大多数页面上略微减小字体大小，这可能会产生比你想象的更大的效果。

有了这一点，技术上em和rem是根据padding属性在元素上扩展margin和font-size的最佳方法

您的容器示例如下所示：

ul.list li { height: 8%; padding-top: 0.5rem; /*if font-size is 16px, this will be 8px*/ }

就可扩展性而言，当您将字体大小更改为移动设备上的其他内容时，此功能将起作用。

它没有为您的问题提供解决方案，但在谈论可扩展性时它确实提供了答案和最佳选择，我希望这可以帮助您实现这一目标：）

Answer 2

CSS box-sizing: border-box;属性将使宽度最大，并且所有其他内容都向内部计算。

在狭窄区域与width:100%;结合使用很好

了解更多：https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

如何计算给定div相对于其父div的％的填充顶部

2 个答案:

另一种方式