一、重置默认样式
　　　　normalize.css
　　　　　　①不像其他CSSreset，它保存了一些有用的默认样式。
　　　　　　②规范了大量样式，纠正了一下bug与表现形式。
　　　　　　③有详细的注释解释代码的作用。

　　二、清除浮动

　　　　/* 现代浏览器: */
　　　　　　　　　　　　.cf:before, .cf:after {content:""; display:table;}
　　　　　　　　　　　　.cf:after {clear:both;}
　　　　/* For IE6-7: */
　　　　　　　　　　　　.cf {*zoom:1;}

　　　　★使用overflow:hidden;清除浮动的弊端：
　　　　　　①当窗口小于容器时，无滚动条，隐藏内容与子元素。
　　　　　　②干扰margin、border、outline 和 绝对定位的png图片。
　　　　　　③影响CSS3属性的应用，如box-shadow、text-shadow、transform等。
　　　　　　　　【即使非得使用，也应该确保触发hasLayout——zoom:1;】

　　三、图片替代文字
　　　　Kellum方法：在隐藏文本的同时保留了文本在屏幕内。而不是以前的-9999px(hack)。

　　　　.hide-text {

　　　　　　text-indent: 100%;

　　　　　　white-space: nowrap;

　　　　　　overflow: hidden;

　　　　}

　　　　提高性能，特别是平板电脑或小屏幕设备。

　　四、图标元素
　　　　当需要设置一个元素的背景图片，作为一个图标显示时，比起<span>等元素，<i>元素更具语义。

　　五、使用CSS3
　　　　CSS3有两个消极点：许多规范未确定需要前缀；旧浏览器不支持。
　　　　（1）CSS3兼容性
　　　　　　CSS3新属性最新支持列表：

　　　　 　　　　

　　　　　　通过JavaScript插件实现IE6~IE9对CSS3特性的支持：
　　　　　　　　①IE9.js.这里有一个IE9.js影响的属性和问题修正的解释。
　　　　　　　　②Selectivizr
　　　　　　　　③CSS3 Pie
　　　　　　　　④CSS Sandpaper
　　　　　　　　⑤Modernizr
　　　　　　虽然增加了页面的大小和加载事件，但这个代价值得。
　　　　（2）CSS3工具
　　　　　　查看HTML5与CSS3最新规范与支持度：http://html5please.com、http://css3please.com/
　　　　　　渐变工具：Ultimate CSS Gradient Generator
　　　　　　W3cplus整理了九十多个前端工具：《前端工具》

　　六、流体图片【常用于响应式布局】

　　　　img { max-width: 100%; height: auto; }

　　七、HTML5文档声明

　　　　<!DOCTYPE html>

　　　　HTML5的文档声明能快速改变页面模板和实现文档重构。
　　　　在IE6~IE8用条件注释引入脚本<HTML5-Shiv>，可使旧浏览器正确呈现元素。

本文整理自：http://www.w3cplus.com/css/css-architectures-new-best-practices.html

CSS——几个最新解决方案的更多相关文章

  1. css中文字体乱码解决方案

    css中文字体乱码解决方案:把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.还有一个避免中文乱码的办法就是把中文字体写成英文来表示 css中文 ...

  2. 移动端 CSS 1px 问题及解决方案

    移动端 CSS 1px 问题及解决方案 viewport & transfrom: scale viewport 的 initial-scale 设为 1 UI 设计稿用rem 和 trans ...

  3. css样式被覆盖解决方案

    刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...

  4. 关于sencha touch在华为、红米等部分手机下hide事件失效，msgbox无法关闭的解决方案(已更新最新解决方案)

    (急着解决问题的同学可以直接跳最底部查看最终的解决方案) 问题描述 因为前段时间抢到了华为荣耀3c,所以做项目的时候就用荣耀3c测试了一下项目, 结果发现在华为的emotion ui上sencha t ...

  5. JavaScript 与 CSS 滚动实现最新指南

    一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱.我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,(当你付诸实践时)将使你的页面 ...

  6. CSS常见Bugs及解决方案列表

    以下实例默认运行环境都为Standard mode 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px;font-size:0;li ...

  7. CSS高度塌陷问题解决方案

    高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  8. 网站项目所有js css无法引用问题解决方案

    网站页面中的所有js css引用失效,路径确保正确,但是浏览器就是报找不到引用.仔细查找发现问题所在: 报错信息很详细了,就是.NET Framework 版本不同导致.同时也提供了两个解决方案:将. ...

  9. CSS 盒模型、解决方案、BFC 原理讲解--摘抄

    PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1) W3C 标准盒模型 & IE 怪异盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模 ...

随机推荐

  1. socket（一）

    相关链接: http://my.oschina.net/u/1378445/blog/340206?p=2&temp=1469158886336#blog-comments-list http ...

  2. 5----table类型

    table类型是非常重要的Lua数据类型,也是Lua唯一能描述数据结构的类型 table类型可以很灵活的描述多种数据结构,其本身是基于键值对的形式存储数据的 字典结构 字典结构的table 的两种创建 ...

  3. javascript this在事件中的应用

    this关键字在javascript中是非常强大的,但是如果你不清楚它是怎么工作的就很难使用它. function dosomething(){ this.style.color="#fff ...

  4. Setup Factory Error3014

    在用Setup Factory打包软件的时候出现Error3014 一般都是由于软件冲突引起的 我的问题是由于杀毒软件 ,在打包的时候关闭杀毒软件 就能成功打包了.

  5. FROM_UNIXTIME()和UNIX_TIMESTAMP()函数的区别

    Unix时间戳(Unix timestamp),是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数. 在MySQL中如何格式化时间戳?在mysql中因为t ...

  6. 带事物处理的DBHelp和sql语句

    DBHelp语句 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  7. session如何保存在专门的StateServer服务器中

    session保存在专门的StateServer中,该种方式,性能损失比sql略好.比inproc据说有10%-15%的性能损失.怎么使用StateServer 服务器呢? 1.初始化StateSer ...

  8. 微信、QQ浏览器X5内核问题汇总

    一. 资料汇总 1.前端H5调起QQ浏览器的总结:http://km.oa.com/group/22486/articles/show/210189?kmref=search 2.Android We ...

  9. JS实现表格的增删改

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

  10. CPU指令系统

    CPU就是通过指令系统来操控寄存器然后实现读取数据的,所以我们必须介绍一下CPU的指令系统 如果我们知道指令的英文全称,这对我们理解指令的作用有很大帮助,所以贴出指令英文全称 接下来就是介绍一些主要的 ...