html常用的标签

1：span css中属于一个行内元素 在行内定义一个区域 也就是一行内可以被span划分几个区域，从而实现某种特定效果，他本身没有属性 。<div> 在CSS定义中属于一个块级元素 <div> 可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上， 使用 <div> 会自动换行，使用 <span> 就会保持同行（比如可以在导航里面使用span 来划分区域）。

高手都不能错过的css常识

1 ：不要使用过小的图片做平铺背景 太消耗资源

2：无边框推荐使用border：none 不要使用border：0 它的样式 和颜色还是会被浏览器解析 占用资源不过有个特点border：0  占用空间比border：none 少三个字节。input 设置border：none;的时候，在标准浏览器下显示无边框。但是在IE下是默认是input自带的边框需要设置border：0；这样就可以了

3、慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。 css reset可以参考http://blog.csdn.net/budinger/article/details/19542189 

4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
5、样式放头上，脚本放脚下。不内嵌，只外链。 行内样式不推荐
6、坚决不用 CSS 表达式，耗费浏览器资源
7、使用 引用样式表，而不是通过 @import 导入。 （这样导致页面加载完毕，css 还么加载完）
8、一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。 （个别gif 甚至比png还小，优化需自己权衡）
9、千万不要在 HTML 中缩放图片，一者不好看，二者占资源。 （手机网站除外）
10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。 
11、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。 
12、段落之间，至少要有一倍行距。 
13、强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。 
14、中文标点用全角。英文夹杂在中文中，左右空格，半角。 
15、中文字体的粗体和斜体，远离较好，利民利己。

em

em是相对单位，参考物是父元素的font-size，具有继承的特点

如果字体大小是16px（浏览器的默认值），那么 1em = 16px

这样使用换算很复杂，尤其是和px对应，大家总结出了经验

body {
font-size: 62.5%;
}

这样之后 1em = 10px 在布局等使用的时候好换算了很多

百分比

百分比也是很常见的用法，看似简单其实有些初学者可能注意不到的知识

相对于谁

首先要明确百分比是相对于谁，宽泛的讲是父元素，但是并不是十分准确

1. 对于普通定位元素就是我们理解的父元素
   
2. 对于position: absolute;的元素是相对于已定位的父元素（offset parent）
   
3. 对于position: fixed;的元素是相对于 ViewPort

viewport：可视窗口，也就是浏览器的window那么大

意外

1. padding、margin 如果设置了百分比，会发现左右和预期一样，用的父元素宽度的百分比，但是用的也是 ** 宽度 ** 百分比，而不是想象中的高度的百分比
   
2. 后代元素继承的是百分比 计算后的值 ，而不是原百分比，这个对于line-height的时候经常会遇到坑，还有这样的面试题问你line-height设置为120%和1.2的区别

CSS3开启新时代

rem

em是个很不错的单位，但是有个问题就是可能会带来混乱，因为em依赖于父元素的字体大小，各个元素父元素的字体尺寸不一定一样，会带来布局上很大的不确定性

rem font size of the root element

rem相对于根元素html（网页），这样使用起来就安全了很多

html {font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/}
body {font-size: 1.4rem; /1.4 × 10px = 14px /}
h1 { font-size: 2.4rem; /2.4 × 10px = 24px/}

IE9+ 和现代浏览器都已经支持了

vw和vh

• vw Viewport宽度， ** 1vw ** 等于viewport宽度的1%
  
• vh Viewport高度， ** 1vh ** 等于viewport高的的1%

vw和vh会随着viewport变化自动变化，再也不用js控制全屏神马的了

甚至有些人丧心病狂的字体大小都用vw和vh控制，来达到字体和viewport大小同步的效果

IE10＋ 和现代浏览器都支持这两个单位

vmin和vmax

这两个单位是针对vw和vh

• vmin vw和vh中比较 ** 小 ** 的值
  
• vmax vw和vh中比较 ** 大 ** 的值

这两个属性也会随着viewport变化

IE10+ 和现代浏览器都已经支持vmin

webkit浏览器之前不支持vmax，现在已经支持，所有现代浏览器已经支持，但是IE ** 全部 ** 不支持vmax

ch和ex

这两个单位时根据 ** 当前font-family ** 的相对单位

• ch 字符0的宽度
  
• ex 小写字符x的高度