一、重置默认样式
　　　　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. VB6中的引用传递 与 VB.NET中的引用传递的区别

    首先注意一点,在VB6中缺省参数传递的方式是:引用传递,而在VB.NET中缺省参数传递的方式是:值传递. 然后我们看下面VB6中的引用传递与VB.NET中的引用传递的对比. VB6中的引用传递 Pri ...

  2. C++11在时空性能方面的改进

    C++11在时空性能方面的改进 这篇我们聊聊C++11在时间和空间上的改进点: 主要包括以下方面: 新增的高效容器:array.forward_list以及unordered containers: ...

  3. python __file__ 与argv[0]

    在python下,获取当前执行主脚本的方法有两个:sys.argv[0]和__file__. sys.argv[0] 获取主执行文件路径的最佳方法是用sys.argv[0],它可能是一个相对路径,所以 ...

  4. Vim入门教程

    尽管网上有成打的Vim在线教程,但是要么艰深晦涩,要么太过肤浅.本教程的目标让每个阶段都有斩获,从理解它的哲学(将和你终身相伴)到超越现在编辑技巧,成为其中的牛人. 简单来说,本教程的学习方式将使你终 ...

  5. 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

    一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...

  6. mysql的初识--DOS下的简单命令

    DOS下进入 1.通过程序中的mySQL的:MySQL 5.6 Command Line Client直接进入mySQL的命令行: 2.或者通过WIn+R-->输入cmd,然后C:等一层一层找到 ...

  7. android 破解工具

    来记录一下本人在平时工作中使用的android上的破解工具 静态破解: apktool: apk包 -> dex dex2jar和enjarify(google官方出品): dex->ja ...

  8. 能源项目xml文件 -- springMVC-servlet.xml -- default-lazy-init

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...

  9. Druid（准）实时分析统计数据库——列存储+高效压缩

    Druid是一个开源的.分布式的.列存储系统,特别适用于大数据上的(准)实时分析统计.且具有较好的稳定性(Highly Available). 其相对比较轻量级,文档非常完善,也比较容易上手. Dru ...

  10. iOS开发拓展篇—CoreLocation地理编码

    iOS开发拓展篇—CoreLocation地理编码 一.简单说明 CLGeocoder:地理编码器,其中Geo是地理的英文单词Geography的简写. 1.使用CLGeocoder可以完成“地理编码 ...