一个方法解决前端开发中出现元素间有间隙的问题
时间:2023-03-29 20:44:01
PHP
解决前端开发中元素间距问题的方法两个高度属性都使用单数时经常出现。如果是移动终端,由于设备的多样化,可能不知道设备会出现在什么地方。使用CSS3flex布局可以轻松解决此问题。注意:这里所说的元素间的间隙并不是特指普通图片输入后形成的间隙,图片形成的间隙也可以用这种方法处理。下面根据我在开发中遇到的一个例子写一个简单的解决方案。练习元素HTML{{h}}:{{m}}:{{s}}邀请后会失效
style.time-top{border-top:0.064054remsolid#fff2e9;}.time-value{高度:0.533333rem/*20/37.5*/;行高:0.533333rem/*20/37.5*/;宽度:4.346667rem/*163/37.5*/;字体大小:0.293333rem/*11/37.5*/;:0;保证金:0;颜色:#eeac71;背景色:#fff2e9;显示:内联块;填充:04%;边界半径:000.29216216216216217rem0.29216216216216217rem;位置:相对;:使用flex.time-box布局{display:flex;弹性方向:列;证明内容:居中;对齐项目:居中;}.time-top{border-top:0.064054remsolid#fff2e9;宽度:100%;保证金:0;填充:0;}如图,如果不使用flex,parent子元素也可以转换为兄弟元素。最后,由于css3是一个新属性,父元素设置了display:flex;之后,它的所有子元素都会变成内联块元素,所以在不同的情况下需要进行相应的布局处理。