修改

Question

我在将div与box-sizing对齐时出现问题：当我开始按百分比填充填充时，border-box的位置将与位置的百分比不匹配。

这是代码，将其粘贴到任何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％。这是一个错误还是我错误地得到了border-box的概念，它将填充与宽度和高度相加。

同时测试了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>

Answer 1

我相信这是因为你体内100％的高度会占用屏幕尺寸。此外，如果您想要以div使用边距为中心，即使在100％时也能获得所需的外观;

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

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

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

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

修改

1 个答案: