[分享]css中子盒子撑大父盒子

在CSS中，当子盒子的宽度或高度超出了父盒子的限制时，会出现子盒子撑大父盒子的情况。这种现象往往会给页面布局造成不良影响，因此需要采取措施解决这个问题。.parent { width: 300px; ...

在CSS中，当子盒子的宽度或高度超出了父盒子的限制时，会出现子盒子撑大父盒子的情况。这种现象往往会给页面布局造成不良影响，因此需要采取措施解决这个问题。

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid #000000;
  box-sizing: border-box;
  overflow: hidden;
}

.child {
  width: 400px;
  height: 400px;
  background-color: #ff0000;
} 

以上代码展示了一个子盒子撑大父盒子的情况。父盒子的宽度和高度分别设置为300px，子盒子的宽度和高度分别设置为400px。因此，子盒子已经超出了父盒子的范围，导致父盒子的高度和宽度都被撑大。

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid #000000;
  box-sizing: border-box;
  overflow: hidden;
}

.child {
  width: 400px;
  height: 400px;
  background-color: #ff0000;
  margin: -50px 0 0 -50px;
} 

为了解决这个问题，可以使用负边距来使子盒子回到父盒子的范围内。上面代码中的负边距设置为-50px，表示子盒子向上和向左移动了50px。这样的话，子盒子就可以显示在父盒子内部，避免了撑大父盒子的情况。当然，需要根据实际情况来设置合适的负边距值。