一、重置默认样式
　　　　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. JavaScript中的Math对象

    Math对象中提供的计算功能执行起来比你在代码中写的js要快得多,这是它的一个很好的优点.   属性: 属性 说明 Math.E 即常量e的值 Math.LN10 ln10 Math.LN2 ln2 ...

  2. 用友华表Cell一些用法小结(cs.net版本)

    //从Color类型得到RGB类型,也可以用ColorTranslator.ToOle()方法 public int GetRGBFromColor(Color color) { byte r = c ...

  3. Python中的logging模块

    http://python.jobbole.com/86887/ 最近修改了项目里的logging相关功能,用到了python标准库里的logging模块,在此做一些记录.主要是从官方文档和stack ...

  4. SaltStack实战

    SaltStack实战 #安装 安装注意几点 python-libs-2.6.6-64.el6.x86_64 conflicts with file from package python-2.6.6 ...

  5. MVP 个人理解2

    根据我的理解,画了个图 这次又看了下 较复杂点的例子. 往往一个项目有多个部份,我们可以按功能分成几个activity, 每个activity有自己的view和数据model,因此也有自己的逻辑 pr ...

  6. 检测当前运行环境——移动端与PC端。

    方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...

  7. 51nod 1183 编辑距离(dp)

    题目链接:51nod 1183 编辑距离 #include<cstdio> #include<cstring> #include<algorithm> using ...

  8. HDU 1231:最大连续子序列 解题报告

    第一次写博客, 自己总结写出了一道题感觉值得保存. 自己总结的规律:求最大连续子序列, 可以先求包括第N项在内的前N项最大值, (因为每一项都求过后, 前N项最大值最大的那一个元素所连续的序列即为最大 ...

  9. MVC、ORM、CURD、ActiveRecord、单一入口的概念

    MVC MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型(M).视图(V).控制器(C),它们各自处理自己的任务. 视图 :视图是用户看到并 ...

  10. SAP常用命令及BASIS操作

    Pfcg         角色,权限参数文件配置Su53        查看权限对象  st01  跟踪St22         看dump,以分析错误  eg.找到ABAP程序出错的地方,找出fou ...