HTML+CSS
1 常用图片格式
jpg:最常用的图片格式,自身质量小,便于传输,不能实现透明
png:能实现透明,自身质量大
gif:能实现透明,自身质量小,能手实现动画效果,图像不够清晰
2 相对路径、绝对路径
3 CSS选择器
id选择器:在现代布局中,id选择器常常用于建立排上选择器;在老版本的windows/ie浏览器可能会忽略这条规则,除非特别定义这个选择器所属的元素
div#sidebar{border:1px dotted #000;}
类选择器:类名的第一个字符不能使用数字!无法在Mozilla或FF中起作用
4 高级选择器
CSS属性选择器 后代选择器
子元素选择器 h1>strong
相邻兄弟选择器 li+li
5 CSS图片透明度设置
img{opacity:0.4;filter:alpha(opacity=40);}
img:hover{opacity:1;filter:alpha(opacity=100);}
6 伪类和伪元素 :focus伪类无法在ie中工作
7 CSS对齐
除非已声明!DOCTYPE,否则使用margin:auto在ie8以及更早的版本中是无效的!
除非已声明!DOCTYPE,否则使用position;float在ie8以及更早的版本中会在右侧增加17px的外边距!
8 clear:both 清除浮动属性;(经验:这个属性在低版本浏览器中支持的不好,浮动的元素还是会影响正常元素)
解决盒子嵌套时垂直外边距塌陷的方法:
可以将内部的盒子浮动起来;可以给父级别的盒子设置overflow:hidden属性
9 在实际工作中绝对定位有一个使用的原则,子级绝对父级相对;
在工作中使用最多的一种方式是绝对定位。
10 只有在普通文档流中块框的垂直外边距才会发生外边距合并
行内框 浮动框 绝对定位之间的外边距不会合并
11 ie6浏览器的兼容性问题
双倍边距bug:这个bug主要是margin;双倍边距bug可能会出现的一些情况:一个元素同时具有float属性和margin属性在ie6当中就可能出现双倍边距bug.
注意:是可能出现并不是100%会出现的。
解决方法:在这个元素添加一个css属性:_display:inline;
前面加上一个下滑线表示只针对ie6;
在任何浏览器当中如果子级别标签的尺寸超出了父级,那么父级都不会被撑开,但在ie6当中,如果子级的内容超出了父级,那么父级将会被撑开
在ie6当中如果插入图片被添加了超链接,那么会默认多增加出一个紫色的边框;这个是我们所不需要的;只需要在清空全局样式的时候,添加border即可
(这个bug有点特殊,不仅是ie6有,基本上所有的ie浏览器都会出现这个问题)
ie6对插入图像img后面的空格识别更为明显,总会在img下面产生大约10px的距离,解决这个问题只需要将img显示模式转换为block;
12 一般情况下为了保证主导航的重要性,子导航是不会使用ul>li来制作的;直接采用超链接加span去制作。
采取高度剩余的方式来制作间距的好处就在于不需要考虑行高占的位置;还有一个好处就是它可以制作上下不均等的间距;

浙公网安备 33010602011771号