在刚学html时,新手经常会因为各种各样的原因导致页面布局出现BUG,无法达到预期效果,这里做一个练习时的总结
一、问题描述:
在矢量图标引入后,后方的文字与图标不在同一水平线上,使用垂直居中仍无法解决
解决方案:使用行高,给他们的父元素设置子元素最大高度,设置行高为最大高度。但前提条件是矢量图标的引入标签必须为块或提前转换为块,否则此方案将无法生效
二、问题描述:
关于排列标签(ol、ul、dl)浮动后部分标签显示不正常的问题
具体描述:布局中在将排列标签进行浮动后,显示效果不正常,部分标签在预期原位置,部分标签在预期原位置下面显示出不在一排
解决方案:将一整个标签进行块标签包裹,设置高度与宽度为合适距离,将块标签进行浮动即可显示正常
出现问题原因:
因为排列标签的父元素宽度不足以使每个排列标签按照预期排列,所以会出现位置显示不正常的情况,作为新手会不注意用块元素包裹以设置高宽度的问题。就会出现上述情形,有经验后再次布局提前注意到这个问题改变布局即可解决
三、问题描述:
在一个盒子里的图片与文字,调整其中的一个边距会一起移动
解决方式:
这主要是因为文字本身是类似于行标签的存在,在调整图片这个行间块元素的间距时,行标签因为基线对齐从而导致一起移动,解决方案有二:
1.将图片转化为块标签,即可不影响文字而自行调整位置
2.将图片给予除基线对齐外的任何一个对齐方式(缺点:两者并未分离,图片调整位置依旧会影响行标签)可使行标签调整位置,但无法彻底解决问题