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

谁借莪１个温暖的怀抱￠ 2022-09-25 11:14 111阅读 0赞

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

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

7、浮动的清除方法

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

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

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

clearfix代码：

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

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

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

9、z-index的使用

z-index只能在position属性值为relative或absolute或fixed的元素上有效。  
z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。    
向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，    
决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。    
所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素。