标签：clear 图像 styles -- 重写 padding 代码 提高 fixed
一、外边距合并:
上下两个外边距相遇时会合并在一起,取大值;
二、问题:
外边距溢出:在父元素中,设置子元素的外边距时,有可能被识别为父元素的上外边距;
解决:
1、给父元素添加一个边框;
缺点:对了边框像素;
2、使用父元素的内边距实现同样效果
缺点:多一条代码,且会影响父元素的大小(padding);
也能使用box-sizing:border-box(边框盒子)能解决缺点;
3、
div:before{
content:"";
display:table;
}
三、问题:
浮动产生的父元素没有高度
解决:
1、手动设置父元素高度;
2、通过overflow 撑起父元素的高度
overflow:hidden;
缺点:若父层元素包含需要溢出元素(overflow)时,不能使用;
3、通过clear:both 解决
在父元素内追加一个空的块级元素,并设置clear属性为both;
4、
div:after{
content:"";
display:block;
clear:both;
}
四、绝对定位的初始化位置:
1、相对于最近的已定位的祖先元素来进行位置初始化;
position属性为relative/absolute/fixed任意一种;
2、如果元素没有已定位的祖先元素,那他的初始位置就相对于最初包含块body;
五、CSS Hack
1、CSS的内部Hack
在样式属性名前加浏览器前缀或者在属性值后加浏览器后缀
例:*background:blue; background-color:orange\9\0;
2、选择器Hack
在选择器前加浏览器识别前缀
例:*+div{} *div{} 等
3、HTML头部引用Hack
根据条件注释 判断浏览器类型,再决定做哪些操作
条件注释:<!--[if 条件 IE版本]><![endif]-->
例:<!-- 根据不同的浏览器, 引入不同的兼容性css代码文件 --> <!--[if IE 6]> <link rel="stylesheet" href="style_ie6.css" /> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" href="style_ie8.css" /> <![endif]-->
六、CSS优化
1、减少http请求次数
css sprites:合并多个图像于一个;
Images-maps;
2、页面顶部引入CSS
提高加载速度;逐步呈现;
3、将CSS和JS放在外部文件中
会由浏览器缓存,后续也会是用缓存;
4、优化代码
合并样式:提前定义统一样式;利用CSS继承
缩小样式文件:使用简写;
选择更优的样式属性值:如border:none;
减少样式重写:使用Reset但并非全局Reset;
代码压缩:使用工具压缩CSS代码
5、不要在HTML中缩放图像
图像在网络传输时仍然保持原来的图像的字节数;
6、避免空的src和href;
标签：clear 图像 styles -- 重写 padding 代码 提高 fixed
原文地址：http://www.cnblogs.com/Axwen/p/6049189.html
