一、重置默认样式
　　　　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. FreeMarker常用语法

    转自:http://www.cnblogs.com/linjiqin/p/3388298.html FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{exp ...

  2. python打怪之路【第三篇】：利用Python实现三级菜单

    程序: 利用Python实现三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 coding: menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{}, ' ...

  3. Java面向对象三大特点之多态

    概念: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作,如图所示: 多态性是对象多种表现形式的体现,同一个事件发生在不同的对象上会产生不同的结果. ...

  4. Windows下配置Git

    1.从git官网下载windows版本的git:http://git-scm.com/downloads 2.一般使用默认设置即可:一路next,git安装完毕! 3.但是如果这时你打开windows ...

  5. 使用新版Android Studio检测内存泄露和性能

    内存泄露,是Android开发者最头疼的事.可能一处小小的内存泄露,都可能是毁于千里之堤的蚁穴.  怎么才能检测内存泄露呢?网上教程非常多,不过很多都是使用Eclipse检测的, 其实1.3版本以后的 ...

  6. windows下开启mysql远程访问

    USE mysql;SELECT * FROM USER ; 直接修改user=root host=127.0.0.1为% FLUSH PRIVILEGES;

  7. springmvc的单文件上传

    @RequestMapping("/up") public ModelAndView up(MultipartFile myfiles , HttpServletRequest r ...

  8. Android之源码之模块编译和调试

    Android之源码之模块编译调试 (一) 进行源码模块修改进行编译的调试 1.首先是从git或者svn上拉一套完整的工程下来,然后全编一下,一般这个时间比较长,大概会得2,3个小时左右, 2,编译成 ...

  9. zabbix3.0.4 部署之五 （LNMP > nginx1.9.9）

    1 wget http://nginx.org/download/nginx-1.9.9.tar.gz cd /opt/pcre-8.35 autoreconf -ivf Installing sha ...

  10. text-overflow:ellipsis

    关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...