1、DOCTYPE 严格模式与混杂
http://www.cnblogs.com/lxin/archive/2013/02/18/2915344.html
原文链接：Quirks mode and strict mode 地址是：http://www.quirksmode.org/css/quirksmode.html
问题的产生：
当Netscape4（译注：网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题（bugs），但是依然延续CSS实现中的其它故障（主要是盒模型（box model）问题）。
为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。
然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以2013-09-26 14:53正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。
解决方案：
所有的浏览器需要提供两种模式：怪异模式（即兼容模式）服务于旧式规则，严格模式服务于标准规则。
1：产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此‘没有DOCTYPE‘意味着触发怪异模式：既依据旧式的CSS规则渲染网页。
2：相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。
3：任何新的或未知的DOCTYPE将触发严格模式。
4：一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照这个浏览器比较图表。
主要使用如下写法：它除了声明我的网页是XHTML 1.0 过渡类型之外，还将在所有浏览器中触发“准严格模式”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、CSS盒子模型
在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
3、行内元素与块元素的区别http://blog.sina.com.cn/s/blog_4b8d6b890101ovyv.html
简要说明：
1. 行内元素会再一条直线上，是在同一行的。比如span和strong;
2. 块级元素各占一行。是垂直方向的！比如div和p.
假如你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block; 块级元素可以用样式控制其高、宽的值，而行内元素不可以。
行内元素与块级元素列表
行内元素与块级元素有什么不同：
1.尺寸-块级元素和行内元素之间的一个重要的不同点
行内元素和width
W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。
以下例子中，对行内元素<a>应用了width:200px,你可以看到，根本就没有什么效果。
行内元素和height
W3C CSS2 标准规定行内元素、非置换元素不会应用height属性，但是盒子高度可以通过line-height来指定。
以下例子，对行内元素<a>应用了height:50px,你可以看到什么效果都没。
行内元素和padding
你可以给行内元素设置padding，但只有padding-left和padding-right生效。
以下例子，行内元素<a>应用了padding:50px。你可以看到对左右的内容有影响，但是对上下没影响。
行内元素和marging
margin属性也是和padding属性一样，对行内元素左右有效，上下无效。
- 设置宽度width 无效。
- 设置高度height 无效，可以通过line-height来设置。
- 设置margin 只有左右margin有效，上下无效。
- 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了
2.text-align属性是两者表现的又以不同之处
在W3C CSS2.1规范第16.2节 对text-align 有详细地描述：
------------------------------------------
值： left | right | center | justify | inherit
初始值：匿名值，由‘direction‘的值而定，如果‘direction‘为‘ltr‘则为‘left‘，如果‘direction‘为‘rtl‘则为‘right‘。
应用于: 块级元素，表格单元格，行内块元素
继承性: 是
计算后的值：初始值或指定值
------------------------------------------
这个特性描述了如何使一个块元素的行内内容对齐。注意一点，标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
行内内容是说由行内元素组成的内容，比如 SPAN 元素，IFRAME元素和元素样式的‘display : inline’的都是行内元素；
块级内容跟则是由块级元素构成，DIV 是最常用的块级元素。 这样，我们对这个特性的认识应该就清楚了。
但是，虽然标准里这么规定，但不是所有浏览器都遵守，IE6/7及IE8混杂模式中，text-align:center可以使块级元素也居中对齐。
其他浏览器中，text-align:center仅作用于行内内容上。
解决上面的问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置
“margin-left:auto;margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。
若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”。
4、块元素中多出字显示为省略号
.activity-list-i {
margin: -1px 12px 0;
border-top: 1px dashed #676767;
height: 40px;
line-height: 40px;
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
5、表格中内容自动换行
word-break:break-all和word-wrap:break-word
6、网页顶部小图标设置
<link rel="shortcut icon" type="image/x-icon" href="${ctx}/images/contact_02.jpg" />
========================================================
前端面试题收集
http://wenku.baidu.com/view/c1e7c8fffab069dc5022018b.html
css中!important的作用
http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html