blocks|key|3813925|text|这是一个相对复杂的问题，称为“框大小”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3813926|有一个很棒的关于它的阅读，它将回答你关于css技巧的问题：http://css-tricks.com/international-box-sizing-awareness-day/|offset|length|3813927|本质上，在您的情况下发生的情况是，保证金-顶部优先。当你有50个像素的总高度时，去掉10个像素，50个像素中的80%25就是40个像素--刚刚好。再小一点，剩下的80%25就是“剩下的所有东西”|3813928|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/international-box-sizing-awareness-day/^0|0|T|1P|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

That's a relatively complex issue called "box-sizing".

There a fantastic read about it that will answer you question on css-tricks: <a href="http://css-tricks.com/international-box-sizing-awareness-day/" rel="nofollow">http://css-tricks.com/international-box-sizing-awareness-day/</a>

In essence, what is happening in your case, is that the margin-top takes precedence. When you have 50 pixels total height, 10 get removed and 80% of 50 would be 40 - just enough. Make it any smaller and the 80% will instead be "everything thats left"

blocks|key|762575|text|如果使用%25，则必须设置最小大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|762576|示例宽度:+80%25；最小宽度:+1200px；|762577|当你缩放或小于1200px的屏幕时，它会修复元素和1200px，而不会像这样打破屏幕。|762578|希望这能帮上忙=D|762579|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

If you use %, you must set a minimum size. 

Example width: 80%; min-width: 1200px; 

When you zoom or less than 1200px screen, it fixes the elements and 1200px, not breaking the screen like this happening to you. 

Hope this helps =D

blocks|key|283766|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|283767|html+{高度:+100%25；}|ordered-list-item|283768|283769|使<html>具有完整的窗口高度。|offset|length|style|CODE|283770|body{+height:+100%25；}|unordered-list-item|283771|283772|使<body>具有100%25的<html>高度。请注意，有些浏览器使用|283773|body+{页边距:+8px；}|283774|在其默认样式表中，因此页边距将溢出窗口，因为这些页边距不包括在height:+100%25.|283775|div中{+<body>：80%25；height:+100%25.|283776|
|283777|div-top:10px；}|283778|283779|使<div>具有80%25的<html>高度，并添加顶部页边距的10px+(附加于高度)。|283780|283781|如果希望将这些10px包含在80%25中，可以使用calc()|283782|div+{+height:calc(80%25-10px);+margin-top:10px;+}|code-block|syntax|javascript|283783|或者对padding使用box-sizing，而不是margin|283784|div+{+height:80%25;+padding-top:10px;+box-sizing:+border-box;+}|283785|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/calc|1|https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing^0|0|0|0|1|6|0|0|0|1|6|E|6|0|0|V|C|0|6|6|H|C|0|0|0|0|1|5|C|6|U|4|0|0|7|4|E|3|N|6|N|6|0|0|0|3|7|C|A|Q|6|C|A|1|0|0^^$0|@$1|2|3|-4|4|5|6|1P|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1Q|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|1R|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|1S|7|@$G|1T|H|1U|I|J]]|8|@]|9|$]]|$1|K|3|L|4|M|6|1V|7|@]|8|@]|9|$]]|$1|N|3|-4|4|5|6|1W|7|@]|8|@]|9|$]]|$1|O|3|P|4|5|6|1X|7|@$G|1Y|H|1Z|I|J]|$G|20|H|21|I|J]]|8|@]|9|$]]|$1|Q|3|R|4|5|6|22|7|@]|8|@]|9|$]]|$1|S|3|T|4|5|6|23|7|@$G|24|H|25|I|J]]|8|@]|9|$]]|$1|U|3|V|4|M|6|26|7|@$G|27|H|28|I|J]|$G|29|H|2A|I|J]]|8|@]|9|$]]|$1|W|3|X|4|5|6|2B|7|@]|8|@]|9|$]]|$1|Y|3|Z|4|M|6|2C|7|@]|8|@]|9|$]]|$1|10|3|-4|4|5|6|2D|7|@]|8|@]|9|$]]|$1|11|3|12|4|5|6|2E|7|@$G|2F|H|2G|I|J]|$G|2H|H|2I|I|J]|$G|2J|H|2K|I|J]]|8|@]|9|$]]|$1|13|3|-4|4|5|6|2L|7|@]|8|@]|9|$]]|$1|14|3|15|4|5|6|2M|7|@$G|2N|H|2O|I|J]|$G|2P|H|2Q|I|J]|$G|2R|H|2S|I|J]]|8|@$G|2T|H|2U|1|2V]]|9|$]]|$1|16|3|17|4|18|6|2W|7|@]|8|@]|9|$19|1A]]|$1|1B|3|1C|4|5|6|2X|7|@$G|2Y|H|2Z|I|J]|$G|30|H|31|I|J]|$G|32|H|33|I|J]]|8|@$G|34|H|35|1|36]]|9|$]]|$1|1D|3|1E|4|18|6|37|7|@]|8|@]|9|$19|1A]]|$1|1F|3|-4|4|5|6|38|7|@]|8|@]|9|$]]]|1G|$1H|$4|1I|1J|1K|9|$1L|1M]]|1N|$4|1I|1J|1K|9|$1L|1O]]]]

<ol>
<li><pre><code>html { height: 100%; }
</code></pre>

makes <code>&lt;html&gt;</code> have full window height.</li>
<li><pre><code> body { height: 100%; }
</code></pre>

makes <code>&lt;body&gt;</code> have 100% height of <code>&lt;html&gt;</code>. Note some browsers use

<pre><code>body { margin: 8px; }
</code></pre>

in its default stylesheet, so <code>&lt;body&gt;</code> will overflow window, because those margin is not included in <code>height: 100%</code>.</li>
<li><pre><code>div { height:80%; margin-top:10px; }
</code></pre>

makes <code>&lt;div&gt;</code> have 80% height of <code>&lt;html&gt;</code>, and adds <code>10px</code> of top margin (additional to the height).</li>
</ol>

<hr>

If you want those <code>10px</code> to be included in <code>80%</code>, you can use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" rel="nofollow"><code>calc()</code></a>:

<pre><code>div { height:calc(80%-10px); margin-top:10px; }
</code></pre>

or use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" rel="nofollow"><code>box-sizing</code></a> with <code>padding</code> instead of <code>margin</code>:

<pre><code>div { height:80%; padding-top:10px; box-sizing: border-box; }
</code></pre>

Say I have the following:

<pre><code>html, body { height: 100%; }
&lt;div style="height:80%;margin-top:10px;"&gt;test&lt;/div&gt;
</code></pre>

As I resize the screen, it maintains the 80% ratio to a certain point, then it breaks and stops being 80% of the height of the screen. What exactly is going on behind the scenes?

What happens when you apply a margin to a CSS percentage?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

假设我有以下内容：html, body { height: 100%; }<div style="height:80%;margin-top:10px;">test</div>当我调整屏幕的大小时，它会保持80%的比例到某个点，然后它就会中断并停止成为屏幕高度的80%。幕后到底发生了什么？

问当您将边距应用于CSS百分比时会发生什么？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当您将边距应用于CSS百分比时会发生什么？EN