使用html布局时的经常出现的冷门问题

在刚学html时，新手经常会因为各种各样的原因导致页面布局出现BUG，无法达到预期效果，这里做一个练习时的总结

一、问题描述：

在矢量图标引入后，后方的文字与图标不在同一水平线上，使用垂直居中仍无法解决

解决方案：使用行高，给他们的父元素设置子元素最大高度，设置行高为最大高度。但前提条件是矢量图标的引入标签必须为块或提前转换为块，否则此方案将无法生效

二、问题描述：

关于排列标签（ol、ul、dl）浮动后部分标签显示不正常的问题

具体描述：布局中在将排列标签进行浮动后，显示效果不正常，部分标签在预期原位置，部分标签在预期原位置下面显示出不在一排

解决方案：将一整个标签进行块标签包裹，设置高度与宽度为合适距离，将块标签进行浮动即可显示正常

出现问题原因：

因为排列标签的父元素宽度不足以使每个排列标签按照预期排列，所以会出现位置显示不正常的情况，作为新手会不注意用块元素包裹以设置高宽度的问题。就会出现上述情形，有经验后再次布局提前注意到这个问题改变布局即可解决

三、问题描述：

在一个盒子里的图片与文字，调整其中的一个边距会一起移动

解决方式：

这主要是因为文字本身是类似于行标签的存在，在调整图片这个行间块元素的间距时，行标签因为基线对齐从而导致一起移动，解决方案有二：

1.将图片转化为块标签，即可不影响文字而自行调整位置

2.将图片给予除基线对齐外的任何一个对齐方式（缺点：两者并未分离，图片调整位置依旧会影响行标签）可使行标签调整位置，但无法彻底解决问题