在前端页面开发中，给DIV元素添加边框并适配响应式布局是非常常见的需求，下面我们就一步步讲解具体的实现方法。
一、给DIV添加边框的基础方法
给DIV添加边框最常用的是CSS的border属性，这个属性可以同时设置边框的宽度、样式和颜色，也可以通过单独的属性分别调整。
下面是基础的边框设置示例：
/* 同时设置边框的宽度、样式、颜色 */
.normal-border {
width: 200px;
height: 100px;
border: 2px solid #333333;
}
/* 单独设置边框各属性 */
.custom-border {
width: 200px;
height: 100px;
border-width: 1px;
border-style: dashed;
border-color: #ff0000;
}
/* 只设置某一侧边框 */
.left-border {
width: 200px;
height: 100px;
border-left: 3px solid #0000ff;
}二、响应式布局适配方案
要让带边框的DIV适配不同屏幕尺寸，常用的方案有flex弹性布局配合媒体查询，下面分别介绍两种核心方法。
1. 使用flex布局实现自适应
flex布局可以让DIV根据容器空间自动调整大小和排列方式，非常适合响应式场景。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.border-item {
/* 基础宽度，最小宽度100px，自动占满剩余空间 */
flex: 1 1 200px;
min-width: 100px;
height: 120px;
border: 2px solid #666666;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="border-item">内容块1</div>
<div class="border-item">内容块2</div>
<div class="border-item">内容块3</div>
<div class="border-item">内容块4</div>
</div>
</body>
</html>2. 使用媒体查询调整不同屏幕下的样式
如果需要针对不同屏幕尺寸做更精细的样式调整，可以配合媒体查询实现。
/* 基础样式，默认适用于大屏幕 */
.screen-border {
width: 80%;
height: 150px;
border: 3px solid #333333;
margin: 20px auto;
}
/* 屏幕宽度小于等于768px时的样式 */
@media screen and (max-width: 768px) {
.screen-border {
width: 95%;
border-width: 2px;
border-color: #999999;
}
}
/* 屏幕宽度小于等于480px时的样式 */
@media screen and (max-width: 480px) {
.screen-border {
width: 100%;
border-width: 1px;
border-style: dashed;
}
}三、常见注意事项
- 设置边框后DIV的总宽度会增加，需要注意
box-sizing属性的使用，设置为border-box可以让边框宽度包含在内盒模型中，避免宽度溢出 - 如果要实现圆角边框，可以添加
border-radius属性，响应式场景下也可以通过媒体查询调整圆角大小 - 避免使用固定像素设置DIV宽度，尽量使用百分比、flex属性或者min/max-width来设置，提升适配性
通过上面的方法，就可以轻松实现带边框的DIV并适配不同屏幕的响应式布局，开发者可以根据实际项目需求选择合适的方案组合使用。