css经验总结

兼容问题

1. css hack：
   
   1. ie6：_color:green
   2. ie7：*color:green 或者 *+html .demo {background: green;} 或者： *:first-child+html .demo {background: green;}
   3. ie8|9：color:green\0
   4. ie9：color:green\9\0
      6.ie9： :root color:green
   5. Firefox:@-moz-document url-prefix(){body,html{color:pink;}}
   6. chorme:@media screen and (-webkit-min-device-pixel-ratio:0){body,html{color:pink;}}
   7. opera：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { color: red; } }
   8. iPhone / mobile webkit：@media screen and (max-device-width: 480px) { .demo { color: red } }
   9. .demo {
      
      1. color: red;/所有现代浏览器/
      2. color: green9;/所有IE浏览器/
      3. color: lime�;/IE8-9浏览器/
      4. color: red;/*IE6-7浏览器/
      5. +color: blue;/IE7浏览器/
      6. _color: orange;/IE6浏览器/ }
      7. ie6不支持，其他支持!important;
      8. @media all and (min-width:0px){ color: #000;/Webkit和Opera浏览器/ }
      9. @media screen and (-webkit-min-device-pixel-ratio:0) { color: #f36;/Webkit内核浏览器/ }
      10. @media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo {color: #369;} /Opera/ }
      11. @-moz-document url-prefix(){ .demo{color:#ccc;}/* all firefox */ }
      12. 
2. ie6双倍边距：
   
   1. 出现的原因：块级元素有float且margin-left|margin-right，ie6就双倍边距；
   2. 解决办法：display:inline;display:list-item;或者display:inline-block
3. div浮动文本产生3px的bug：
   
   1. 出现的原因：两div，一个用了float，一个未用，第二个前面将出现3px；
   2. 解决办法：（1）都用float；（2）给浮动bug的div加margin-left:-3px;zoom:1;
4. css中zoom和overflow:hidden的作用：
   
   1. zoom：比例缩放（IE私有）检查是否清除浮动、 IE下是否触发haslayout；ie6|ie7下zoom有包裹性，ie8没有；
   2. overflow:hidden；设置后去包裹里面的元素，div有了新高度；IE6的一个bug，ie7已修复，ie7|ie8下overflow:hidden可清除浮动
   3. clear:both/left/float以及上面的zoom:1 overflow:hiddend都是
5. ie不认识min-height或者max-width：
   
   1. _width:express(this.width>300?"300px":true):max-width:300px;
6. ie6下汉子偏上，标准浏览器下Tahoma不存在这个问题；taobao将tahoma放在”宋体“前；
7. ie6下a和a:hover{}一样，需要给a:hover{color:red;}里面加border:none;|padding:0;|background:none;即可触发；
6.

细节处理

1. float：left和display：inline-block的讨论：
   
   1. float父节点没有设定width和height时，父节点会塌陷为0，导致父节点同级节点会向上移，覆盖父节点的位置；解决方式：
   2. 给父节点加style=”overflow:hidden”;
   3. 父节点结束后，加一个<p style="width:0;height:0;clear:both"></p>
   4. .clearfix:after{width:0;height:0;clear:both;overflow:hidden;float:none;} 用after伪对象清除浮动；
2. 省略号：li{width:200px;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden}
3. 字符换行：
   
   1. css：ward-warp:break-word;width:300px；支持ie
   2. js:

function toBreakWord(el, intLen){         var ōbj=document.getElementById(el);         var strContent=obj.innerHTML;         var strTemp="";         while(strContent.length>intLen){                  strTemp+=strContent.substr(0,intLen)+"
";  //
换行符              strContent=strContent.substr(intLen,strContent.length);         }         strTemp+="
"+strContent;         obj.innerHTML=strTemp;}if(document.getElementById   &&   !document.all)toBreakWord("ff", 37);

1. div垂直居中：{margin:0 auto;padding:0 auto;}
2. css透明度兼容：{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; } 或者 filter: progid:DXImageTransform.Microsoft.Alpha( opacity=60);opacity : 0.6;
3. css引用方式：link和@import
   
   1. 区别：link是xhtml标签，link支持rss的xml，link拥有rel（link和文档的关系）；@import是css提供的方式；
   2. 加载顺序，link与文档dom同时加载，@import加载完后加载；
   3. ie5以上才支持@import;
   4. @import不受dom的js控制；
4. css的盒子模型：content+padding+border+margin
   
   1. w3c：
      
      1. 外盒高度=c_height+p_height+b_height+m_height;
      2. 内盒高度=c_height+p_height+b_height;
   2. ie：c_height=c_height+p_height+b_height;
      
      1. 外盒高度=c_height+m_height;
      2. 内盒高度=c_height
5. ie6无法定义1px height的容器，因为行高，需要设定line-height：1px；overflow:hidden
6. 让div垂直居中：div{position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;boder:1px solid red}
7. 超链接顺序：a:link{}a:visited{}a:hover{}a:active{}
8. z-index:元素的折叠顺序；必须配合position使用；同级可以比较，不同级别不能比较；
9. css布局：瀑布流布局，流式布局，圣杯布局，双飞翼布局；
10. css层叠：样式的优先级别，声明了!important（ff支持不好）>id>js内联>内联>（伪）类>元素选择，权重相同是，后面的>前面的；

#hid {color:#999;} < .a .b .c {color:red;} < .a .b a {color:green}  <  .c.d {color:#f60;}  <  a.c {color:yellow;}

1. 浏览器的渲染：浏览器的主要构成（High Level Structure）
   
   1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
   2. 浏览器引擎 － 用来查询及操作渲染引擎的接口
   3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来
   4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
   5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
   6. JS解释器 － 用来解释执行JS代码
   7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
   8. 输网址，浏览器向服务器发请求，返回html —> 浏览器载入HTML代码，发现link引入css文件，又向服务器发请求得到css，开始渲染页面 —> 发现img，向服务器发请求，一边下载一边渲染，图片占有面积影响后面布局，浏览器回头重新渲染这部分代码 —> 发现script，运行它（隐藏某div）浏览器又重新渲染这部分代码
   9. 重新渲染（reflow：使element占位面积、定位方式、边距变化）费时，img定了width和height后，只需重绘（repaint：改变background-color、color、border-color）
   10. 
2. 浏览器内核：
   
   1. trident（MSHTML）内核：IE、傲游、世界之窗、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman；
   2. Gecko：Firefox、Netscape6至9；跨平台可在Microsoft windows、linux、macOS X上运行
   3. webkit：safari、chrome；mac os系统
   4. presto:opera;
3. aa