为什么固定定位的div元素无法显示顶部和右侧边框边角

• 盒模型默认属性问题：浏览器默认的box-sizing属性值为content-box，这种模式下你给.test设置的width: 100%、height: 100%仅代表内容区域的尺寸等于视口宽高，边框会在内容区域外额外叠加绘制。左右边框各2px、上下边框各2px的情况下，元素总宽高实际为100% + 4px，超出视口的部分会被裁剪无法显示。
• 固定定位偏移与body默认样式问题：你没有给position: fixed的元素显式设置top、left偏移值，此时元素会沿用它在常规文档流中的初始位置，而浏览器默认给body元素设置了margin: 8px的外边距，相当于元素默认从距离视口顶部8px、左侧8px的位置开始绘制，进一步加剧了右侧、底部的超出问题。

你可以选择任意一种方案修复：

• 方案1（更推荐）：修改盒模型为border-box，同时显式设置固定定位偏移、重置默认边距

/* 也可以仅给.test元素单独设置box-sizing属性 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.test {
  height: 100%;
  width: 100%;
  display: flex;
  position: fixed;
  /* 显式设置固定定位的偏移值，避免位置异常 */
  top: 0;
  left: 0;
  border: 2px solid #ccc;
}

• 方案2：不修改盒模型，用calc计算减去边框占的尺寸

body {
  margin: 0;
}
.test {
  /* 宽高减去上下左右边框总共占用的4px尺寸 */
  height: calc(100% - 4px);
  width: calc(100% - 4px);
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  border: 2px solid #ccc;
}

内容的提问来源于stack exchange，提问作者Lester