开发小结-元素布局定位样式细节问题

场景一：设计外部框架细节时，往往将最外层盒子样式设置为width：100vw；height：100vh，将盒子尺寸设置为设备屏幕大小，而在第二层盒子中，一般设置会与最外层盒子有一定间隙，但是使用margin去设置间隙，就会导致最外层盒子被撑开，且样式也没有达到效果

比较好的方法是将最外层盒子的box-sizing设置为boder-box，然后设置padding间距就可以实现效果了

场景二：在列表布局中，设计有文字位于图片上的现象，一般情况下，只是将文本元素设置为绝对定位，然后通过magin调整上下距离，通过left、right调整左右距离，这样的样式设计在列表数据未超出盒子范围的前提下是可行的，但是一旦超出范围出现滚动条，随之滚动时就会出现文本不随列表项位置移动的问题

因为绝对定位是相对于最近且非static的父元素定位的，就上文的设计，文本内容目前是相对html元素的，所以不会随列表项移动。

比较好的方法是将离文本最近的父元素设置为相对定位，相对定位是相对其原本的位置定位，若是已定好样式，只要不设置left此类样式，就能既不改变当前样式，同时能让文本的定位是相对最近的父元素定位，就能让文本随列表项移动

场景三：文本溢出处理，可根据以下代码实现由...替代溢出文本，但是如果效果展示异常(如下图)，溢出有处理，但是文本也全展示的现象，就需要寻找问题出现原因

最后确定出现原因在于设置文本溢出处理的元素上，溢出处理是设置在父元素上，且父元素设置了高度

目前有几个可行的方法：

1. 父元素不设置高度（如果父元素一定要设置高度的情况下不建议，比如列表项）
2. 父元素设置行高line-height为高度大小（仅建议使用在只允许展示一行文本信息的情况下，还能实现垂直居中的效果，但是超过一行文本展示的话可能样式不太好看）
3. 在文本元素上设置溢出处理且不设置高度，而父元素不做溢出处理（建议使用）