常见问题(bug)及解决方案
1.图片下方有空隙
插入图片后默认会有一个空隙 给父级元素加一个边框就能看到解决方案:
img{vertical-align:middle/top/bottom;}
img{display:block;}
2.插入多个img标签时,换行输入代码,图片左右之间有一个空隙
解决方案:让代码在同一行显示
或者img{float:left;}
3.img标签与文本之间或者与input标签上下不对齐
解决方案:img{vertical-align:middle;}
4.img标签与其他之间有空隙时
解决方案:img{float:left;}
其他标签{float:left;}
通过margin-top来控制上下之间的距离
5.img标签鼠标经过时边框显示一半的问题
<a href="#"><img src=""></a>解决方案
a{display:block;width:100px;height:200px}
a:hover{border:1px solid red;}
这是因为要考虑到IE6只能识别a:hover,为了兼容IE6浏览器
或者img:hover{border:1px solid red;}
6.给图片添加超链接之后,图片会自带一个两像素的边框(IE)
解决方案:img{border:none;}
二、间距带来的问题(margin和padding)
1.浏览器当中所有的标签都会自带margin和padding,且每一个浏览器的margin值和padding值不一样解决方案:
*{margin:0;padding:0;}
2.块级元素的margin上下会取最大值,行内元素上下的margin不起作用,行内块元素的margin上下累加
左右的margin都会累加
3.给子元素添加上边距的时候,会作用在父元素身上
解决方案:
给父元素加padding值 padding:0.1px;
父元素加边框 不可选 虽然能实现
父元素加浮动 不可选 虽然能实现
4.经典3像素bug(IE6)
两个div 第一个div float:left 第二个没有浮动 两个div之间会有3px的间距 经典三像素
解决方案:
让两个元素都浮动就行
5.双边距问题(IE6)
IE6横向margin加倍
解决方案
给该元素添加_display:inline; 6.margin:0 auto;对于IE6不好使,在IE6中加text-align:center;使块级元素水平居中
三、行高及高度
1、浮动引起的副作用(子元素浮动,父元素的高度塌陷)1.给父元素加高度
2.给父元素overflow这个元素
3.在最后一个子元素的后面添加一个空白div,给该div设置clear:both
4.使用万能清除浮动的方法
.clearfixed:after{
content:"."
clear:both;
display:block;
visibility:hidden;
height:0;
}
5.高度自适应
SEO搜索引擎优化与伪代码
网络爬虫<meta name="keywords" content="">
<meta name="description" content="vr|html5|h5|大数据|java">
line-height height
width text-align
一些注意事项
- 设了float属性的元素 设了定位的 一般都设置一下height和width
- 父元素设置宽和高和背景 对子元素文字的大小、行间距
- 包含了h p 标签才用section
- 下拉菜单的时候li不要加高度(点击时的下拉菜单)
- 制作小三角的时候,使用border时可以用复合属性
- border:10px solid transparent
- border-bottom:10px solid red