Css 使用百分比填充调整边框框大小的定位问题_Css

Css 使用百分比填充调整边框框大小的定位问题

css

Css 使用百分比填充调整边框框大小的定位问题,css,Css,我无法将div与框大小对齐：边框框当我开始使用按百分比填充时，框的位置将与位置的百分比不匹配以下是代码，将其粘贴到任何html文件以查看： <!DOCTYPE html> <html> <head> <title>Testing</title> <style type="text/css" media="screen"> body{

我无法将div与框大小对齐：边框框当我开始使用按百分比填充时，框的位置将与位置的百分比不匹配

以下是代码，将其粘贴到任何html文件以查看：

<!DOCTYPE html>
<html>
<head>
    <title>Testing</title>
    <style type="text/css" media="screen">
        body{
            width:100%;
            height:100%;
            background-color: blue;
            overflow:none;
            padding:0;
            margin:0;
        }
        #box{
            padding-top:50%;
            width:100%;
            height:100%;
            background-color:blue;    
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;        
        }

        #light{
            width:100%;
            background-color:yellow;                    
        }
    </style>
</head>
<body>
    <div id='box'>
        <div id='light'>
            halo world
        </div>
    </div>
</body>
</html>


测试
身体{
宽度：100%；
身高：100%；
背景颜色：蓝色；
溢出：无；
填充：0；
保证金：0；
}
#盒子{
垫面：50%；
宽度：100%；
身高：100%；
背景颜色：蓝色；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#轻的{
宽度：100%；
背景颜色：黄色；
}
光环世界

黄色div将位于底部附近，而我将填充百分比设置为50%。这是一个错误，还是我错误地理解了边框框的概念，它将填充物与宽度和高度一起添加

在chrome和firefox上测试

编辑根据@Claude Grecea的建议，他尝试了一些更简单的方法，没有身高，并按像素固定div高度。但是，如果我把填充物放在上面，盒子仍然会被扔到下面很远的地方：50%

<!DOCTYPE html>
<html>
<head>
    <title>Testing</title>
    <style type="text/css" media="screen">
        .box{
            height:1000px;
            padding-top:50%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box; 
            background-color:#C1C1C1;           
        }
    </style>
</head>
<body>
    <div class="box">
        halo world
    </div>
</body>
</html>


测试
.盒子{
高度：1000px；
垫面：50%；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
背景色：#C1C1；
}
光环世界

我相信这是因为你的身高是身体的100%，这将占据屏幕大小。此外，如果您想将div居中，请使用边距，即使在100%的情况下也能获得所需的外观

CSS中的“盒子模型”的工作原理如下：

宽度+填充+边框=框的实际可见/渲染宽度高度+填充+边框=框的实际可见/渲染高度

谢谢您的回复。我做了个测试，显然不是这个原因。您可以参考我更新的问题。我有一个类似的问题，请参阅-垂直填充作为%是根据宽度计算的。