关于CSS3 Animation的两个技术问题求助

嘿，这俩问题其实都是CSS布局里的常见坑，我来帮你拆解下～

问题1：border尺寸增大导致其他元素移动 #

这是因为默认的box-sizing: content-box会把border算在元素的总尺寸之外——当你hover时增加border宽度，元素的实际宽高会变大，自然会把周围元素挤开。给你几个靠谱的解决办法：

• 给元素设置box-sizing: border-box，这样border和padding都会被包含在你设置的width/height里，增加border宽度不会改变元素的总尺寸，周围元素也就不会动了。
• 用outline代替border：outline不占用布局空间，hover时修改outline宽度和颜色，完全不会影响其他元素的位置。不过要注意outline是跟着元素形状走的，不像border可以单独设置某一边。
• 用伪元素模拟border：给元素加个::before伪元素，初始时设置透明边框或者宽度为0，hover时用transform: scale或者修改边框宽度来实现动画，伪元素的变动不会影响主元素的布局，也就不会带动其他元素。
• 提前预留border空间：初始状态给元素设置和hover时一样宽度的透明border，hover时只改变border的颜色，这样元素尺寸从始至终不变，自然不会有位移。

问题2：侧边文本长度变化导致元素位置变动 #

这个问题本质是文本容器的宽度随内容变化，进而影响了整个布局的排列。解决思路就是固定文本容器的“占位空间”，不让它随内容伸缩：

• 给文本容器设置固定宽度或者min-width：比如width: 200px或者min-width: 180px，这样不管文本多长，容器的宽度都保持稳定，其他元素的位置就不会被带偏。如果文本过长，可以配合text-overflow: ellipsis和white-space: nowrap来显示省略号，避免内容溢出。
• 如果用的是Flex布局，给文本所在的flex项设置flex-shrink: 0，禁止它在空间不足时收缩；或者设置flex-basis来指定它的基础宽度，让它保持固定的占位。
• 用绝对定位把文本“脱离文档流”：把文本容器设置为position: absolute，同时给父元素设置position: relative来定位，这样文本的长度变化不会影响其他元素的布局。不过这种方法要注意文本不要和其他元素重叠，需要调整好位置。

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