css宽度一定+高度自适应

CSS是我们构建网页的基本工具。在CSS中，我们可以通过定义元素的宽度和高度来控制网页的布局和样式。在实际应用中，有时我们需要让元素的宽度固定，而高度可以自适应，这时就需要使用CSS宽度一定+高度自适应的技巧。

/* HTML： */
<div class="Box"></div>

/* CSS： */
.Box{
  width: 200px; /* 宽度一定 */
  height: auto; /* 高度自适应 */
  background-color: #f00;
}

在上面的代码中，我们定义了一个宽度为200px，背景为红色的盒子，并将高度设置为自适应。这时，盒子的高度会根据其内容来自适应调整。

除了使用height: auto来实现高度自适应之外，我们还可以使用height: 100%的方法来达到相同的效果。不过，需要注意的是，这种方法的前提是其父元素的高度已经被定义且是确定的。

/* HTML: */
<div class="wrapper">
  <div class="Box"></div>
</div>

/* CSS: */
.wrapper{
  height: 300px; /* 定义父元素高度 */
}
.Box{
  width: 200px;
  height: 100%; /* 高度自适应 */
  background-color: #f00;
}

在上面的代码中，我们定义了一个高度为300px的父容器，并将其中的子元素的高度设置为100%。这时子元素的高度就会自适应父容器的高度。

总的来说，CSS宽度一定+高度自适应是实现网页布局和美化的重要技巧之一。掌握该技巧可以让我们更加自如地操作元素的布局和样式。