使用填充

Question

考虑以下示例。我有一个元素 margin是橙色， border是黑色， padding是蓝色，内容框是红色。

重现

1. 在内容框和 border-box 之间切换 .box 的框大小 。请注意，填充和边框包含在高度中。将其保存到 border-box 。

2. 现在开始降低 .box 的 height 属性。首先 52px 然后再进一步 0px

问题

1. 52px 和 0px 之间 .box 的高度不受影响。为什么是这样？有没有办法进一步降低高度？

2. 假设 .box 包含通过websocket实时接收的数据。我想使用css3为进入屏幕的数据设置动画。该框应该将其高度从0增加到全高，类似于jquery .slideDown()。我设置过渡所有0.3s 。什么是初始css和后数据css？ style="padding:0;height:0;"到style="padding:16px;height:auto"？有没有硬件加速的动画方式？

.box {
  background-image: linear-gradient(to bottom, #C33838, #C33838), linear-gradient(to bottom, #0012FF, #0012FF), linear-gradient(to bottom, #000000, #000000);
  background-clip: content-box, padding-box, border-box;
  border: 0 solid transparent;
}
.container {
  overflow: hidden;
  background: #926C0C;
}

<div class="container">
  <div class="box" style="
    box-sizing: border-box;
    height: 100px;
    padding: 16px;
    border-width: 10px;
    margin: 30px;">
    Hello
  </div>
</div>

Answer 1

解释“边框”是什么：

  

border-box：宽度和高度属性（以及最小/最大属性）   包括内容，填充和边框，但不包括边距

通常，如果没有专门设置为border-box，则高度和宽度仅指内容。最重要的是添加了填充和边框。

您的例子：

因此，当您将高度设置为52px时，内容将消失，剩下的所有内容（不包括边距）是52px的填充和边框值。

padding total = 32px
border total  = 20px
total         = 52px

您不能再降低它的原因：

每developer.mozilla.org's 'box-sizing' page，您无法将内容的高度设为负值，在您的情况下，该值高于52px。

  

内容框不能为负数，并且会将其置为0   不可能使用border-box来使元素消失。