这是一个让不少前端开发者困惑的问题：明明给div设置了边框，在普通窗口下查看时边框右侧像被切断了一样，看起来比预期短了一截；可一旦切换到全屏，边框又完整地显示出来了。要理解这个现象，关键不在边框本身，而在于元素的宽度计算方式和视口尺寸变化之间的联动关系。下面我们从几个常见原因入手，逐层拆解这个问题。
盒模型差异：content-box与border-box的宽度计算
首先要检查的是盒模型设置。默认情况下，浏览器采用content-box，这意味着你通过width属性指定的只是内容区宽度，padding和border都会额外叠加在宽度之外。举个简单的例子：
.box {
width: 100%;
border: 2px solid #333;
padding: 10px;
box-sizing: content-box; /* 默认值 */
}在这个设置下，元素的实际占用宽度是100%加上左右各2px边框和10px内边距，总共超出了父容器14px。当窗口较窄时，这14px的溢出会导致边框右侧被裁掉或撑出滚动条；而全屏时视口变宽，父容器本身有了多余空间，溢出部分恰好被容纳，边框看起来就完整了。这正是“普通视图缩短、全屏正常”的典型成因之一。
解决办法很简单，改用border-box让边框和内边距计入总宽度：
*, *::before, *::after {
box-sizing: border-box;
}
.box {
width: 100%;
border: 2px solid #333;
padding: 10px;
}切换到border-box之后，100%的宽度就包含了边框，无论视口如何变化，元素都不会超出父容器，边框自然稳定显示。
百分比宽度与父容器塌陷
第二个常见原因是父容器的实际宽度发生了变化。如果div设置了width: 100%，它的边框绘制范围完全取决于父元素的渲染宽度。当父容器因为浮动、绝对定位或者未清除的浮动导致宽度塌陷时，子元素的百分比宽度会跟着缩小。
考虑下面这种结构：
<div class="parent"> <div class="float-left">浮动元素</div> <div class="child">我有一圈边框</div> </div>
.parent { border: 1px dashed #999; }
.float-left { float: left; width: 200px; }
.child { width: 100%; border: 2px solid #333; }在普通窗口下，如果父容器高度塌陷或者宽度计算受到浮动元素挤压，child的实际渲染宽度可能小于视觉上占据的空间，边框就表现为“缩短”。全屏后视口宽度大幅增加，百分比换算出的绝对像素值变大，加上浮动元素占比下降，溢出不再发生，视觉上的异常随之消失。排查这类问题的关键是打开开发者工具，选中目标div，查看Computed面板中的实际宽度值，再对比父容器的宽度，两者是否对得上。
修复方式包括给父容器添加overflow: hidden触发BFC、使用伪元素清除浮动，或者干脆改用flex布局，让宽度计算回归流式规则。
flex布局下的伸缩与最小宽度
如果这个div处于flex容器中，还需要考虑flex-shrink的作用。flex子元素默认可以收缩，当容器空间不足时，各个子项会按比例压缩自己的宽度。假设某个子元素内容较长（比如一段不换换的英文文本或一个固定宽度的表格），它会顶住最小内容宽度，把旁边的div挤压变形，边框自然跟着缩短。
.container { display: flex; }
.sidebar { min-width: 600px; } /* 内容很宽，不肯收缩 */
.main { flex: 1; border: 2px solid #333; }普通窗口下，视口宽度可能只有1200px甚至更窄，减去600px的侧边栏，主区域只剩几百像素，边框看起来又短又挤；全屏后视口达到1920px以上，空间充裕，主区域恢复到接近预期的宽度，边框显示也就正常了。这类问题的特征是边框长度随窗口拖动连续变化，而不是固定的差值。
处理办法是给不可收缩的部分设置合理的min-width约束，或者允许它换行（overflow-wrap: break-word），同时检查是否需要给main区域设置flex-shrink: 0或最小保护宽度。
overflow裁剪与视口单位
还有一种情况容易被忽略：外层容器设置了overflow: hidden，而内部元素使用了基于视口的单位。比如边框所在的div宽度写成了100vw，注意100vw包含了竖向滚动条的宽度，在普通窗口下页面出现滚动条时，元素会比可视区域宽出十几像素，超出部分连同右侧边框一起被overflow: hidden裁掉。全屏时如果布局变化使滚动条消失，或者容器本身变宽，裁剪不再发生，边框就完整了。
验证方法很简单：在控制台执行document.documentElement.clientWidth和window.innerWidth，如果两者相差约15到17像素，说明滚动条占用了宽度。修复时把100vw换成100%，或者给容器预留滚动条空间即可。
系统化排查步骤总结
综合来看，这类“窗口小异常、全屏就正常”的问题基本都指向同一个本质：元素的渲染宽度依赖视口或父容器的尺寸计算，在某个临界宽度以下触发了溢出或裁剪。排查时建议按以下顺序进行：
- 检查
box-sizing设置，确认边框是否计入宽度； - 用开发者工具查看元素的实际计算宽度，对比父容器宽度；
- 检查是否存在flex收缩、浮动塌陷、
100vw与滚动条冲突； - 逐层移除
overflow: hidden，观察边框是否恢复。
定位到具体原因后，再选择对应的修复方案。大多数情况下，全局设置box-sizing: border-box加上规范化的布局方式，就能让边框在任何视口尺寸下都保持稳定一致。