border边框影响布局解决方案

目录

• 边框不影响布局技巧
  • 剖析

边框不影响布局技巧

需要解决的问题

默认不处理与两种处理方式的效果图

剖析

边框从一开始到覆盖都是存在的，所以不存在突然多出2*边框宽度px 的占位

我们可以通过以下两种方式解决（个人目前已知）

• 先设置边框，颜色透明，后续（比如鼠标覆盖显示边框）就不会发生挤动

• 亦或是使用怪异盒模型，让边框占用元素本身的宽度

• 加边框缩小宽度也可以，单个人觉得没必要啊...（不就是怪异盒模型的效果吗）

/* 直接加边框，会影响布局 */
#content{
    /* 不加边框、不使用怪异盒模型 */
}
#content:hover {
    border: 3px solid brown;
}


/* ---------- 解决方法 ----------- */
/* 使用透明边框 */
#content{
    border: 3px solid transparent;
}
#content:hover {
    border-color: brown;
}

/* 亦或是使用怪异盒模型 */
#content{
	box-sizing: border-box;
}
#content:hover {
    border: 3px solid brown;
}