文档章节

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

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 725
阅读 8
收藏 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标签会出现边框的问题

解决方法:设置a标签的border:0即可

© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式

在常规的后台管理系统或者前端界面中,一般都有一个导航菜单提供给用户,方便选择所需的内容。基于Metronic的Bootstrap开发框架,是整合了Metroinc样式,以及Boostrap组件模块的内容,因此菜...

walb呀
2017/12/04
0
0
Github Page创建个人主页以及绑定域名

在github中 我们可以通过github page创建个人主页 以及绑定域名 据说有300m空间 以及无限流量 不过只能支持静态html 以及一些脚本语言 顺便吐槽一下 阿里云最低配那个云空间服务器 512m内存 ...

蛙牛
2013/11/25
18.5K
7
我的电脑经验总结

一、预装win 10系统换成win7系统方法步骤:(自己实践总结) 1、下载微软原版win7版本iso; 2、用Ultroiso把win 7镜像安装到U盘上; 3、用“分区助手”将硬盘分区表由GPT改成MBR格式; 4、重...

怪诞祖母绿
2017/06/09
0
0
跨浏览器开发经验总结(一) —— HTML标记

为页面添加DOCTYPE 由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。 !DOCTYPE 声明指定文档...

leenash
2010/09/07
276
0
基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍

最近花了很多时间在重构和进一步提炼Winform开发框架的工作上,加上时不时有一些项目的开发工作,我博客里面介绍Web开发框架的文章比较少,其实以前在单位工作,80%的时间是做Web开发的,很早...

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
今天
8
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
6
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
8
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
5
0
rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部