48

我希望框的宽度和高度默认包含所有内容、填充、边框宽度和边距。有没有办法做到这一点？特别是，我希望能够指定一些东西，比如width: 100%包括所有内容。

4

5 回答 5

29

这是一个模糊的问题，但我会尽力回答。

边距，顾名思义，就是盒子外面的区域；这意味着没有办法在你的 div 中包含边距。

如果你想在你的盒子内部有更多的填充，但你不希望盒子调整大小，那么使用：box-sizing:content-box;
或者如果你想包括填充和边框，使用：box-sizing:border-box;

保留 div 大小并消除溢出的可行解决方案如下所示：

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

<div id="parent">
   <div id="child"></div>
</div>

只需将要设置边距的 div 放在另一个具有填充的 div 内。从而产生虚假的边距。

于 2014-11-12T21:33:56.953 回答
24

如果您的边距是例如10px，您可以使用

width: calc(100% - 20px);
box-sizing: border-box;

浏览器支持

w3schools.com 参考

于 2018-05-27T19:02:26.873 回答
6

将 CSSbox-sizing属性设置为border-box生成width并height包含内容、边框和内边距。这允许您设置width: 100%并仍然添加paddingor border。换句话说box-sizing: border-box，makeswidth包括边距内边缘之间的所有内容。没有办法以这种方式包含边距本身。

.example { box-sizing: border-box; width: 100%; padding: 10px }

有用的参考资料

于 2014-11-12T22:32:38.043 回答
2

也许在它周围包裹另一个 div 并指定该 div 的宽度？

<div style="width: 100px; border: 1px solid blue;">
<div style="width: 100px; background:yellow; margin: 10px; border: 1px solid blue">
inner width 100px not including it's margin.
</div>
</div>

<div style="width: 100px; border: 1px solid blue">
<div style="background:yellow; margin: 10px; border: 1px solid blue">
  inner width's 100px including it's margin.
</div>
</div>

于 2018-05-17T01:57:17.130 回答
0

用于display: flex;父标签。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  display: flex;   /* it can put children in one line */
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
  box-sizing: border-box
}

.right {
  border: 1px solid black;
  width: 80%;
  margin: 0 10px;
  float: left;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

于 2016-03-13T15:29:44.183 回答