使用css制作div

创建基本的 div 元素

在 HTML 文件中添加一个 div 元素，为其指定一个类名或 ID 以便通过 CSS 进行样式控制。

<div class="custom-div"></div>

设置 div 的尺寸

通过 CSS 的 width 和 height 属性定义 div 的宽度和高度。

.custom-div {
  width: 200px;
  height: 100px;
}

添加背景颜色或图片

使用 background-color 或 background-image 为 div 设置背景样式。

.custom-div {
  background-color: #f0f0f0;
  /* 或使用背景图片 */
  background-image: url('image.jpg');
  background-size: cover;
}

设置边框

通过 border 属性为 div 添加边框，可指定边框的宽度、样式和颜色。

.custom-div {
  border: 2px solid #333;
  border-radius: 5px; /* 可选：圆角边框 */
}

调整内边距和外边距

使用 padding 控制 div 内部内容与边框的距离，margin 控制 div 与其他元素的距离。

.custom-div {
  padding: 10px;
  margin: 20px;
}

定位方式

通过 position 属性设置 div 的定位方式，如相对定位（relative）、绝对定位（absolute）或固定定位（fixed）。

.custom-div {
  position: relative;
  top: 10px;
  left: 20px;
}

显示与隐藏

使用 display 属性控制 div 的显示方式，如块级（block）、内联块（inline-block）或隐藏（none）。

.custom-div {
  display: block; /* 默认值 */
}

添加阴影效果

通过 box-shadow 为 div 添加阴影，增强视觉效果。

.custom-div {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

响应式设计

使用媒体查询（@media）确保 div 在不同屏幕尺寸下适配。

@media (max-width: 600px) {
  .custom-div {
    width: 100%;
  }
}