关于 静态页面布局 中的一些BUG

Posted 2020-09-26

　　作为一枚初级程序猿，难免在制作静态页面时会遇到一些BUG，在此，我从网上找了一些资料并且结合自己的项目开发经验，总结了一些在静态页面布局时可能会遇到的问题，希望能对初级程序猿有一定的帮助(资料请参考：http://blog.csdn.net/sir1241/article/details/52259405)，本文在此基础上有所扩展和详述：

1.<img>标签被<div>包裹时，你会发现<img>图片下会有一条缝隙

原因分析：<img>是一个特殊的标签，它属于行内元素又有块级元素的部分属性，准确点说，它属于display:inline-block(但又有区别)，而且它默认底部对齐

解决方法：给<img>标签加一个display:block将其转换为标准的块级元素即可解决

2.使用<ul><li></li></ul>制作导航栏的二级导航时，二级导航所在ul总会有一定的偏差

原因分析：二级导航与一级导航为子父级关系，而且我们习惯与把二级导航的ul放在一级导航内元素的后面，导致浏览器解析时会解析出多的文本节点

解决方法：给二级导航设置为绝对定位，并清楚浮动

3.在制作PC端和移动端的静态页面时，由于PC端和移动端的UI都是分开的，在PC端进行静态页面布局时保证正常分辨率正常显示，倘若你使用百分比布局时，在页面大小发生变化的时候会发生元素的偏移

原因分析：静态页面布局，PC端和移动端的页面大小是有很大差别的，而且PC端和移动端各种浏览器的渲染也有差别，像素点占比也有差别

解决方法：给页面中的所有元素单位都使用百分别，切将字体单位大小设置为em/rem等单位

4.布局时居中，利用line-height想让元素垂直居中与页面，利用text-align让元素水平居中

原因分析：line-height是指行高，既文本的行高，延伸为内容的行高，text-align指文本水平居中，可延伸为内容水平居中

解决方法：元素的垂直居中利用行内元素设置vertical-align:middle实现，水平居中可以设置块级元素的margin:auto实现，在特殊情况(高度确定等)下，可以使用绝对定位，设置偏移量为50%，同时设置对应方向的margin反向偏移元素宽高距离一半(例：某div宽度100px,高100px,先让该div水平居中,绝对定位后设置left:50%;margin-left:-50px)，此方法居中后可根据情况而清除浮动

5.在使用position:absolute定位时，其相对位置不明确，想当然的使用此方法定位，结果发现定位元素没有达到理想的效果

原因分析：position:absolute的相对位置是已上一级有position设定的元素位置为基准，若上一级没有则再往上一级，依次类推直到body元素，也就是说，任何元素都没设置position，此时absolute的基准是body元素

解决方法：在使用position:absolute定位时，找到你所想定位的地方，再找到此地方所在的元素，并以此元素为父级元素(定位元素放入其中)，并给此父级元素设置position:relative即可

6.同时使用vertical-align和line-height对于元素位置的影响

原因分析：vertical-align和line-height，一个是针对元素，一个是针对内容，当然此内容也可以包括子级元素，这时对子级元素设置二者可能出现属性重叠，造成效果不理想，例：当文字和图片处于同一级是，同时设置vertical-align和line-height并不能使文字和图片居中对齐

解决方法：此时让上级元素的高和图片的高相同，在图片属性中设置vertical-align：top，同时设置文字的height和line-height即可居中(line-height的值为height的一半)

7.元素高度塌陷问题(并非只有浮动)

原因分析：当一个元素的所有子级元素都脱离正常文档流(浮动或者绝对定位)，而父级元素仍处于正常文档流，由于层级关系，导致父级元素中没有实打实的元素存在，导致高度撑不起来，从而对父级元素设定的有关背景的样式全部无效

解决方法：

　　7-1.对父级元素设置适合的CSS高度，强行撑起高度(不推荐使用，建议父级元素高度固定时使用)

　　7-2.clear:both清除浮动——新建一个样式选择器CSS命名为“clear”的div，对应选择器样式为“clear:both”，在父级元素结束前加此div引入“class="clear"”样式(即空标签方法，不推荐使用)

　　7-3.给父级元素设置overflow:hidden(因为overflow:hidden属性相当于是让父级紧贴内容，但会导致部分子级元素显示异常，只推荐没有使用position或对overflow:hidden理解时使用)

　　7-4.将父级元素也一起设置与子级元素设置相同的属性(如：浮动，不推荐使用)

　　7-5.给父级元素设置 display:table(不推荐使用)

　　7-6.结尾处加 br标签 clear:both(不推荐使用)

　　7-7.给父级元素设置 overflow:auto (不推荐使用，需要出现滚动条或者确保你的代码不会出现滚动条使用)

　　7-8.给父级元素定义 伪类:after 和 zoom (clearfix方法，此方法为当前主流清楚浮动方法，强烈推荐使用，建议定义公共类，以减少CSS代码)

　　clearfix代码如下：

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

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

原因分析：IE浏览器是目前的主流浏览器中兼容性问题最多的浏览器

解决方法：同时设置img和a标签的border：0即可

9、z-index的使用

z-index只能在position属性值为relative或absolute或fixed的元素上有效。

　　希望这些经验对初级程序猿有一定的帮助！