Question

我怀疑为什么在给出填充时div大小意外增加。我正在开发HTML保持宽高比。

这是我的HTML：

<body>
<div id="container" class="containerOuter">
  <div class="main_container">
    <div class="top">
      <div class="top_inside"></div>
    </div>
    <div class="bottom">
      <div class="bottom_inside"></div>
    </div>
  </div>
</div>
</body>

CSS：

html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
.containerOuter {
    background-color:silver;
}
.main_container{
    width:100%;
    height:100%;
}
.top{
    width:96%;
    height:76%;
    padding:2%;
    background:#F00;
}
.bottom{
    width:96%;
    height:16%;
    padding:2%;
    background:#0F0;    
}
.top_inside{
    width:100%;
    height:100%;    
    background:#60C;
}
.bottom_inside{
    width:100%;
    height:100%;
    background:#C0C;
}

JS：

(function( $ ) {
    $.fn.keepRatio = function() {
        var $this = $(this);
        var ratio = 1.333333333;
        function ReSize() {
            var nw = $(window).height() * ratio;
            $this.css('width', nw + 'px');
            $this.css('height', $(window).height() + 'px');
        }
        $(window).resize(ReSize);
        ReSize();
    }
})( jQuery );
$(document).ready(function(){
    $('#container').keepRatio();
});

当使用border-box时，尺寸减小

div {
    -webkit-box-sizing:border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing:border-box;    /* Firefox, other Gecko */
    box-sizing:border-box;         /* Opera/IE 8+ */
}

有人可以解释这种意想不到的行为吗？提前致谢

Answer 1

嗯，这是浏览器默认解释块的方式，它会在块的宽度上添加填充。您应该使用CSS box-sizing。

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

您可以在w3schools.com上找到有关box-sizing的更多信息。

第一张图片的box-sizing设置为content-box，第二张图片设置为border-box

Content box Border-box

使用的CSS：

div {
    border: 1px solid #000000;
    padding: 15px;
    width: 200px;
}
.border-box {
    -moz-box-sizing: border-box;
}

填充不按预期进行

1 个答案: