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;
}