DIV border边框显示不完全问题的解决方法

问题描述：

当给一个 DIV 添加 CSS border 边框时，发现边框不会显示完全，有时候只会显示一半或者一部分，这是为什么呢？

解决方法：

1. 解决方法一：使用 box-sizing 属性

box-sizing 属性定义了元素的大小计算方式，使用该属性可以解决边框显示不完全的问题。

默认情况下，box-sizing 属性取值为 content-box，这意味着元素的宽度和高度不包括 padding 和 border。

我们可以将 box-sizing 属性设置为 border-box，这样就可以让元素的宽度和高度包含 padding 和 border。

示例代码：

/* 设置元素的 box-sizing 属性为 border-box */
div {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  padding:20px;
}

1. 解决方法二：使用 outline 属性

outline 属性和 border 属性类似，可以用来设置元素的边框，但是与 border 不同的是，outline 不会占用元素的空间，不会影响元素的大小和位置，只是简单的在元素周围绘制一个边框。

如果只是想让元素看起来有边框，而不需要计算边框的大小和位置，可以使用 outline 属性来解决。

示例代码：

/* 使用 outline 属性为元素添加边框效果 */
div {
  width: 200px;
  height: 200px;
  outline: 1px solid red;
}

以上就是解决 DIV 边框显示不完全问题的两种方法。根据实际情况选择使用哪种方法。