在 CSS 中实现占满整行的矩形

如果您想在网页中创建一个占满整行宽度的矩形，可以使用 CSS 来实现。

使用 div 元素

通常，您可以使用 div 元素来创建一个矩形。在 CSS 中，您可以设置 div 元素的宽度和高度，以及颜色和边框等属性。

以下是一个基本的 HTML 和 CSS 代码示例，该示例创建了一个占满整行宽度的矩形：

<div class="rectangle"></div>

.rectangle {
  width: 100%;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
}

在上面的代码中，我们首先创建了一个类名为 rectangle 的 div 元素，然后使用 CSS 来设置它的宽度为 100%、高度为 100 像素、背景色为蓝色，以及边框为 1 像素实心黑色。

使用伪类元素

您还可以使用伪类元素 ::before 和 ::after 来创建占满整行宽度的矩形，而无需创建一个额外的 div 元素。以下是一个代码示例：

<p class="rectangle"></p>

.rectangle {
  position: relative;
}

.rectangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background-color: blue;
  border: 1px solid black;
}

在上面的代码中，我们首先创建了一个类名为 rectangle 的 p 元素，并将其设置为相对定位。然后，使用 ::before 伪类元素来添加一个绝对定位的矩形，在此示例中，它的高度为 100 像素，宽度为 100%，背景色为蓝色，边框为 1 像素实心黑色。

因为 ::before 伪类元素是添加在元素内部的，所以它可以自适应元素的大小，并且不会影响元素内部的内容。

总结

以上是两种常见的在 CSS 中实现占满整行宽度的矩形的方法。使用 div 元素是最基本和常见的方法，而使用伪类元素则可以帮助您在不额外添加元素的情况下实现该功能。