当您将边距应用于CSS百分比时会发生什么？
当您将边距应用于CSS百分比时会发生什么？
提问于 2014-04-07 04:51:46
假设我有以下内容：
html, body { height: 100%; }
<div style="height:80%;margin-top:10px;">test</div>当我调整屏幕的大小时，它会保持80%的比例到某个点，然后它就会中断并停止成为屏幕高度的80%。幕后到底发生了什么？
回答 3
Stack Overflow用户
发布于 2014-04-07 04:56:02
这是一个相对复杂的问题，称为“框大小”。
有一个很棒的关于它的阅读，它将回答你关于css技巧的问题：http://css-tricks.com/international-box-sizing-awareness-day/
本质上，在您的情况下发生的情况是，保证金-顶部优先。当你有50个像素的总高度时，去掉10个像素，50个像素中的80%就是40个像素--刚刚好。再小一点，剩下的80%就是“剩下的所有东西”
Stack Overflow用户
发布于 2014-04-07 04:56:32
如果使用%，则必须设置最小大小。
示例宽度: 80%；最小宽度: 1200px；
当你缩放或小于1200px的屏幕时，它会修复元素和1200px，而不会像这样打破屏幕。
希望这能帮上忙=D
Stack Overflow用户
发布于 2014-04-07 04:59:18
- html {高度: 100%；}
使<html>具有完整的窗口高度。
- body{ height: 100%；}
使<body>具有100%的<html>高度。请注意，有些浏览器使用
body {页边距: 8px；}
在其默认样式表中，因此页边距将溢出窗口，因为这些页边距不包括在height: 100%.
- div中{
<body>：80%；height: 100%.
- div-top:10px；}
使<div>具有80%的<html>高度，并添加顶部页边距的10px (附加于高度)。
如果希望将这些10px包含在80%中，可以使用calc()
div { height:calc(80%-10px); margin-top:10px; }或者对padding使用box-sizing，而不是margin
div { height:80%; padding-top:10px; box-sizing: border-box; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22899860
复制相关文章
相似问题
腾讯云开发者
