常见屏幕参数

• 设备 分辨率 设备像素比率
• Android LDPI 320×240 0.75
• Iphone 3 & Android MDPI 320×480 1
• Android HDPI 480×800 1.5
• Iphone 4 960×640 2.0

iPhone 4的一个 CSS 像素实际上表现为一块 2×2 的像素。所以图片像是被放大2倍一样，模糊不清晰。

解决办法：

1、页面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

        国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？

简单的说：

px是：相对长度单位。像素（Pixels）。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

em是：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem是：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。比如：我们定义如下，那么相对的font-size就是不同屏幕宽度的font-size，从而达到适配

text-overflow是一个常用的CSS属性，作用是让文本超出容器区域的部分以省略号显示。

要让它生效， 还需要配合设置其它几个css属性。示例CSS代码：

p { 
     white-space: nowrap; 
     width: 100%; /* IE6 needs any width */ 
     overflow: hidden; /* "overflow" value must be different from "visible" */ 
     -o-text-overflow: ellipsis; /* Opera 9-10 */ 
     text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */ 
}

这些三角形用图片都是可以达到一样的效果的，但当颜色和比例需要改动时，CSS只要简单的改变一下border的样式就可以了，图片可是要重新替换的，效果也没有那么容易调试，过多的图片也会对页面性能造成影响，所以还是推荐用CSS来实现喽~

 个人、商业均可自由使用

Font Awesome是完全免费的，无论个人还是商业使用。详见 协议。

 用CSS控制样式

用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。

1、使用一个声明

你必须经常在HTML网页头部放置一个声明，推荐使用严格的标准。同时需要是IE6进入兼容模式，这已经足够兼容的了。

2、使用position: relative

设置一个标签position: relative可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架。明显的，你需要小心，绝对位置放置的子元素是否都参照找到新位置。

3、为浮动元素使用display:inline

要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多 IE
下的显示错误，就是源于 haslayout。

什么是 haslayout ？

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）

...

<center>

不建议用了。

text-align:center

在父容器里水平居中 inline 文字，或 inline 元素

vertical-align:middle

垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。

line-height

与 height 联手，垂直居中文字

margin:auto

上次一个九宫格的面试题，点击这里，本文是对九宫格另外的实现方法的探讨。

9个元素，每个50*50px，排成九宫格默认是border颜色为blue，hover到格子上变成red（兼容到IE6）

...

相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。

IE下的滚动条样式

IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。

这些样式规则很简单：

• scrollbar-arrow-color: color; /*三角箭头的颜色*/
...