这篇文章将为大家详细讲解有关Css前端的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、移动端移动端还没有上车。先来总结一下三个基本的移动端开发特性：视口（viewport）、媒体查询（@media）和相对字体大小。1.1 视口（viewport）加上视口之后，页面将会自动裁剪成适合移动页面的大小。1.2 媒体查询（media query）以下只是对媒体查询使用的一个演示。实际中我们常用媒体查询来根据不同宽度的设备显示不同的布局。/* HTML */1.3 相对字体大小（rem/em）rem是相对于根字体的大小，em是相对于父级的字体大小。/* HTML */二、选择器2.1 常用标签（tag）、id和类（class）都是常用的选择器。其中class最为常用。// id在页面中是唯一的，class的属性可以有多个2.2 关系后代（parent child-child） 子代（parent>child） 兄弟（+） 相邻（~）。兄弟选择器常用来制作，导航栏中间的一条边框线。2.3 伪元素伪类有::before、::after、::selection、::first-line、::first-letter。其中::before常用来制作三角形和登陆框左边的图标。更多请见kingkit。/* HTML */2.4 伪类LVHA（:link,:visited,:hover,:active）、:focus、lang、first-child（last-child,nth-child(n)）div:first-child {}2.5 优先级优先级最高的是设置了!important的元素，其次看元素的权重。权重相同时看谁离HTML更近（内嵌>内链>外链），近的优先级更高。权重分配是attr：1000，id：100，class：10，tag：1。当有多种选择器组合的时候，他们的权重之和就是总权重。权重大的优先级高。display: none!important; // 优先级最高，IE6不支持同一选择符中的!important同级的按照就近原则（内嵌>内连>外链），越近优先级越高优先级最高三、样式重置（reset）3.1 常用重置* {box-sizing:border-box;} /* IE8+ */3.2 重置插件（Normalize.css,IE8+）当然，你也可以不自己写重置样式，使用插件制动帮你完成。四、浏览器前缀想要使用未标准化的新特性，往往伴随着一大堆兼容前缀。各浏览器使用自己的私有前缀实现新功能，我门在写完了兼容属性之后，还要加上一条标准属性。等到属性标准化之后我们就不需要重新添加标准属性了。div4.1 前缀由来在实验性功能尚未标准化之前，浏览器厂商为了开发者能尽快的体验这些新特效。通过带前缀的CSS属性使得这些功能可以直接被使用。待到标准化之后，则可以通过不带前缀的属性设置样式。但是对于没有更新浏览器的用户来说，样式依旧需要通过私有属性访问。这样，你不得不写N条兼容代码。chrome（-webkit-）、firefox(-moz-)和opera(-o-)。safari和chrome一样，私有属性前缀也是-webkit-。4.2 解决方案这时，你需要的是一个Autoprefixer或者-prefix-free。五、兼容性除了手写IE兼容性，你也可以直接使用IE9.js自动处理IE6-9的bug。另外，让IE6-9支持的支持圆角、背景渐变、边框图片、盒阴影、rgba等可视化的功能可以用CSS3PIE。让IE6-8支持媒体查询可以使用Respond.js。IE6-7支持CSS3 box-sizing可以使用borderBoxModel.js。IE6-8支持:first-child等高级CSS选择符，可以用selectivizr。让IE8及以下的浏览器支持H5新元素，可以用html5shiv.js。5.1 IE条件注释这类代码只有IE会解析，其他浏览器会作为注释处理。更多请见天堂的旋转木马。
