css盒子模型铺满

在网页布局中，CSS盒子模型是一个非常重要的概念。每一个网页元素都是以盒子的形式呈现，而这个盒子的大小和位置就是由CSS盒子模型来控制的。但是如何让这些盒子占满整个网页呢？下面我们将介绍一些方法。

/* 方法一：使用height设为100% */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  height: 100%;
  background-color: #ccc;
}
 <div class="box"></div>

这种方法通过将html和body元素的高度设为100%，然后将需要占满整个页面的盒子元素的高度也设为100%来实现。但是这种方法需要注意的是，如果容器元素存在padding或border属性，那么这些属性会增加元素的尺寸，从而导致元素不能完全占满页面。

/* 方法二：使用calc属性 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  height: calc(100% - 50px);
  background-color: #ccc;
}
 <div class="box"></div>

为了解决上面所述的问题，我们可以使用CSS3的calc()属性。这个属性可以将数学表达式作为属性的值，这样我们就可以根据需要减去padding或border的宽度来计算出元素的实际尺寸。例如在上面的代码中，我们将元素的高度设为calc(100% - 50px)，其中50px就是代表元素的padding或border的宽度。

/* 方法三：使用绝对定位 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ccc;
}
 <div class="box"></div>

最后一种方法是使用绝对定位来让元素占满整个页面。我们可以将元素的position属性设为absolute，然后将top、bottom、left、right属性分别设为0，以使元素的四个边界都贴着页面的四个边缘。

以上就是三种让CSS盒子模型铺满整个页面的方法，每种方法都有各自的适用情况，根据实际情况进行选择即可。