position 设置属性 absolute 之后,width 的值出现不固定
问题描述
页面布局中有一些场景需要设置盒子的 css 样式 position:absolute,
但是之后不设置 width 的具体值,会出现意想不到的宽度,出现折行啊等样式错乱
解决方案
原因是当设置了 position:absolute 之后,该元素的witdh、height会根据父元素(需设置position:relative,没有则按浏览器作为父元素)的width、height和该元素left、bottom、top、right而改变。
计算公式为:
该元素的witdh = 父元素的width-top-bottom;
该元素的height= 父元素的height-left-right;
所以根据具体的页面布局,设置宽高,防止出现意想不到的样式错乱