经验总结——静态页面布局中的常见问题

做为一个web前端的初学者，在静态页面的布局中常常会遇到许多的问题，如今把本身遇到的一些问题及解决方法分享给你们，但愿对你们可以有帮助，错误之处还望指正！
一、用<div>包含一个<img>标签时，<img>标签里面的图片下会有一条白色的缝隙
解决方法：由于<img>标签默认是底部对齐，此时只须要给<img>标签加一个display：block的属性将其转换为块状元素便可。
二、使用列表制做二级导航的时候，二级列表会相对于一级列表有必定的误差
解决方法：将二级列表设为绝对定位而且清楚浮动便可
三、关于电脑端页面的布局，因为如今电脑端和手机端的UI基本都是分开来制做，因此在进行电脑端页面布局的时候保证正常的分辨率的状况下显示正常便可，若是使用百分比布局全部的元素单位都要使用百分比，不然在页面大小发生变化的时候不一样块会发生必定程度的偏移。
四、关于布局时候的居中问题，line-height是内容的垂直居中而不是元素的垂直居中，元素的垂直居中能够利用内联元素设置vertical-align:middle来实现，在肯定高度的状况下也能够经过设置margin或者padding来实现。
五、关于absolute的相对位置的问题
当使用absolute定位的时候，其相对位置是以上一级有position的元素的位置为基准的，上一级中没有则上上一级，依次，直至到body元素，则以body元素的位置为基准。
六、同时使用vertical-align和line-height对于元素位置的影响
解决方法：当文字和图片处于同一行的时候，设置vertical-align：middle和line-height：center并不能使文字和图片都处于中间从而实现文字和图片的居中对齐。

此时让上级元素的高和图片的高相同，在图片属性中设置vertical-align：top，同时设置文字的height和line-height便可居中。

七、浮动的清除方法

（1）空标签方法：使用一个空标签设置其属性为clear：both，或者直接调用clearfix类（clearfix类的写法在下面）

（2）overflow：hidden加在浮动的块的上一级属性中

（3）clearfix方法，将clearfix类直接加在浮动元素的父级元素上便可。

clearfix代码：

.clearfix:after { 
    content:""; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {*zoom:1;}

八、IE浏览器中使用a标签套img标签会出现边框的问题

解决方法：设置a标签的border：0便可