HTML5中设置边框位置的核心逻辑是依托盒子模型，边框的位置由元素的内容区、内边距、边框本身的宽度共同决定，理解盒子模型的层级结构是调整边框位置的基础。
HTML5盒子模型的基本结构
HTML5的盒子模型默认是标准盒子模型，一个元素的总宽度由内容区宽度、内边距（padding）、边框（border）、外边距（margin）共同组成，其中边框位于内边距的外侧、外边距的内侧，这是边框位置的默认基准。
我们可以通过box-sizing属性切换盒子模型类型，该属性有两个常用值：
- content-box：默认值，设置的width和height仅对应内容区，边框和内边距会额外增加元素总尺寸
- border-box：设置的width和height对应内容区+内边距+边框的总和，边框和内边距不会额外增加元素总尺寸
边框的基础设置属性
设置边框需要先了解三个核心属性，这三个属性共同决定边框的显示效果：
border-width：设置边框的宽度，值可以是像素、em等单位border-style：设置边框的样式，比如solid实线、dashed虚线、dotted点线等border-color：设置边框的颜色，支持颜色名、十六进制、rgb等格式
也可以使用简写属性border同时设置三个值，示例代码如下：
/* 设置一个2像素宽的红色实线边框 */
.box {
border: 2px solid #ff0000;
}
调整边框位置的核心技巧
1. 通过内边距调整边框与内容的距离
边框和内容区之间默认没有距离，设置padding属性可以增大内边距，让边框远离内容区，从视觉上改变边框相对于内容的位置。
示例代码：
.content-box {
width: 200px;
height: 100px;
padding: 20px; /* 内边距20px，边框会在内容区外侧20px的位置 */
border: 2px solid #333;
box-sizing: content-box;
}
2. 通过盒子模型类型调整边框对元素尺寸的影响
如果希望边框不影响元素的总尺寸，可以将box-sizing设置为border-box，此时边框会向内挤压内容区的空间，而不是向外扩展元素的总宽度。
示例代码：
.border-box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
box-sizing: border-box; /* 总宽度保持200px，内容区宽度会被压缩为200-20*2-2*2=156px */
}
3. 单独设置某一侧的边框位置
如果需要只调整某一边的边框，可以使用单边边框属性，比如border-top、border-left等，结合padding的单边属性可以更精准地控制边框位置。
示例代码：
.single-border {
width: 200px;
height: 100px;
padding-left: 30px; /* 左侧内边距30px，左边框会在内容区左侧30px的位置 */
border-left: 3px solid #666;
/* 其他三边不设置边框 */
border-top: none;
border-right: none;
border-bottom: none;
}
4. 通过外边距调整边框相对于父元素的位置
如果需要调整边框相对于父容器或者其他元素的位置，可以设置margin属性，外边距会控制元素整体（包含边框）与其他元素的间距。
示例代码：
.outer-box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.inner-box {
width: 200px;
height: 100px;
margin: 20px; /* 元素整体（包含边框）距离父元素上右下左各20px */
border: 2px solid #999;
}
常见问题与注意事项
在实际开发中设置边框位置时，需要注意以下问题：
- 如果元素设置了背景色，背景会覆盖内容区、内边距和边框区域，不会覆盖外边距，这一点会影响边框的视觉呈现
- 当边框宽度较大时，即使设置了
box-sizing: border-box，内容区的空间也会被明显挤压，需要提前计算好尺寸 - 如果需要实现类似边框但不占用盒子模型空间的装饰效果，可以考虑使用
box-shadow属性模拟，该属性不会影响元素的布局尺寸
下面是使用box-shadow模拟边框的示例代码：
.shadow-border {
width: 200px;
height: 100px;
/* 模拟2px的实线边框，不占用盒子模型空间 */
box-shadow: 0 0 0 2px #333;
}