Question

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

Answer 1

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

根据定义，保证金是指盒子外面的区域;意思是没有办法在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内。从而创造了人造利润。

Answer 2

如果你的保证金是 10px ，你可以使用

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

browser support

w3schools.com reference

Answer 3

将CSS box-sizing属性设置为border-box以使width和height包含内容，边框和填充。这样您就可以设置width: 100%并仍添加padding或border。换句话说，box-sizing: border-box使width包含边距内边缘之间的所有内容。没有办法以这种方式包含保证金本身。

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

有用的参考资料

Answer 4

使用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>

Answer 5

也许在它周围包裹另一个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>

包括宽度和高度的余量

5 个答案:

有用的参考资料