具有填充和边距以及 100% 宽度的 HTML CSS 框？ [复制]

Posted

技术标签:

【中文标题】具有填充和边距以及 100% 宽度的 HTML CSS 框？ [复制]【英文标题】：HTML CSS Box with padding and margin and 100% width? [duplicate] 【发布时间】：2013-12-21 01:32:46 【问题描述】：

我有一个盒子#box，宽度：100%，高度：100%，内边距：5px，边距：5px；边框：5px；

我需要在 html5 布局中正确显示。

现在我有了：

但我需要在身体区域贴合块。

代码：

<!DOCTYPE html>
    <style>
    body,html 
        width: 100%;
        height: 100%;
        margin: 0;
    

    #box 
        width: 100%;
        height: 100%;
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
    
    </style>

    <body>
    <div id="box">
    Text will be here
    </div>
    </body>

【问题讨论】：

我在答案中看到，box-sizing 现在风靡一时。如果你这样做，请小心使用它，因为它存在问题 (caniuse.com/#feat=css3-boxsizing)，而且大多数人不会在他们的示例中使用它。 【参考方案1】：

你可以使用 css calc()

#box 
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
        width: calc(100% - 80px);
        height: calc(100% - 80px);

【讨论】：

【参考方案2】：

浏览器完全按照您告诉他的操作:) 但是我认为你不喜欢它的溢出。

发生的情况是您的 #box 由于您的边框和填充而扩展。您可以将这些属性插入，因此它不会扩展您的元素。你可以通过box-sizing 做到这一点：

 #box 
     width: 100%;
     height: 100%;
     border: 5px solid red;
     padding: 15px;
     /*margin: 20px;*/
     box-sizing: border-box;

但是你不能对 margin 做同样的事情，因为元素正在将自己从身体中推开：它会做它应该做的事情。

您可以通过执行与上述相同的操作来解决问题：

body

    padding: 20px;
    box-sizing: border-box;

您将使用主体上的填充而不是#box 上的边距。

jsFiddle

更新

为了防止双填充空间，你应该只将它应用到 body 元素（或 html，但我更喜欢 body，因为它最终是你的视觉元素）。

【讨论】：

+1 以获得详尽的解释。您也可以使用calc() 作为替代顺便说一句：jsfiddle.net/fRFGk/3【参考方案3】：

您需要在 #box 中添加 Add box-sizing: border-box; 属性并删除 margin: 20px;

这是更新后的 CSS：

body, html 
    width: 100%;
    height: 100%;
    margin: 0;

#box 
    width: 100%;
    height: 100%;
    border: 5px solid red;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

working fiddle

【讨论】：

【参考方案4】：

fiddle

你的问题是，你注意到了，假设只是 heights

height:100%;
border: 5px solid red;
padding: 15px;
margin: 20px;

这使得高度 = 100% + 边框 (2 x 5) + 内边距 (2 x 15) + 边距 (2 x 20) = 100% + (10+30+40) 像素

超过100%...因此没有fit block in body area.。尝试以百分比降低高度以获得更好的结果！ 宽度也是如此！！

【讨论】：

【参考方案5】：

你应该使用 CSS box-sizing 属性：

#box 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;

但请注意，您需要使用零 margin 才能使其工作。

有一篇很好的解释性文章介绍了它是如何工作的：http://css-tricks.com/box-sizing/

使用 CSS3，您可以将边框替换为插入 border-shadow，并将边距替换为透明边框。这样您就可以控制所有这些参数：内边距、（假）边距和边框：

#box 
    width: 100%;
    height: 100%;
    padding: 15px;
    border:20px solid transparent;
    box-sizing:border-box;
    -webkit-box-shadow: inset 0px 0px 0px 5px #f00;
    box-shadow: inset 0px 0px 0px 5px #f00; 
    -moz-box-sizing:border-box;

在这里查看现场小提琴：http://jsfiddle.net/HXR3r/

【讨论】：

这可能与您得到的一样接近，但它不考虑边距（border-box）。【参考方案6】：

根据w3c specs for Box Model

box 类型元素的渲染宽度等于其宽度、左/右边框和左/右填充的总和。

这意味着padding 和border-width 的值会影响元素的总宽度。因此，在这里您要添加填充的 15px 以及边框的 5px 和元素实际宽度的 100%。

所以总的来说它超过了寡妇大小，这就是它带有水平滚动的原因。

【讨论】：

以上是关于具有填充和边距以及 100% 宽度的 HTML CSS 框？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

以编程方式更新图像宽度和边距

CSS 使用百分比和边距、填充或边框

从 Javascript 检测真正的边框、填充和边距

视图的填充和边距之间的区别

CSS和输入100％宽度[重复]

没有填充或边距：是啥让我的表格无法获得 100% 的宽度？ & 为啥当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？