2

当我开始按百分比使用填充时，将我的 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%。这是一个错误还是我错误地理解了边框框的概念，它将填充与宽度和高度一起附加。

在 chrome 和 firefox 上测试。

编辑

由@Claude Grecea 建议尝试了一些更简单的东西，没有身体高度，并且按像素固定 div 高度。但是，如果我把 padding-top: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>
4

1 回答 1

1

我相信这是因为你的身体 100% 的高度会占据屏幕尺寸。此外，如果您想使 div 居中，请使用边距，即使在 100% 时也能提供所需的外观；

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

宽度 + 内边距 + 边框 = 框的实际可见/渲染宽度高度 + 内边距 + 边框 = 框的实际可见/渲染高度

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

于 2012-09-20T06:53:41.413 回答