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

2018-06-27 04:39:34

我有问题对齐我的格与框大小：边框，当我开始使用填充百分比时，框的位置将不匹配位置的百分比。

以下是代码，将其粘贴到任何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>

黄色div将定位在靠近底部，而我将填充百分比设置为50％。这是一个错误还是我错误地得到了边框的概念，它将宽度和高度一起追加填充。

在Chrome和Firefox上测试。

编辑

建议者@Claude Grecea尝试一些更简单的方法，没有身高和固定的像素高度。但是，如果我把填充顶部：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>

我相信这是因为你的身体高度达到了100％，这将占据屏幕尺寸。此外，如果你想要居中一个div使用余量，即使在100％的情况下也能提供所需的外观。

CSS中的“盒子模型”是这样工作的：

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

http://css-tricks.com/box-sizing/

链接地址: http://www.djcxy.com/p/76027.html

上一篇: Positioning issue with border box sizing using padding by percentage

下一篇: margin CSS property, but it doesn't exist. How could I fake it?