温故而知新，持之以恒，坚持~干巴爹

###基础知识

  1. 文档的意义：代码易维护；面向程序和其他设备更有意义；代码更少，下载更快
  2. ID：页面上特定的元素，且唯一；持久性结构元素，主导航，内容区等；一次性元素，form等
  3. 命名：这个元素是什么，而不是长的什么样。可以通过这个命名找到对应的元素。重用。
  4. 确定这个元素只会出现一次，用ID；以后可能需要相似的元素，用类。
  5. IE6在标准模式下，正常盒模型；混杂模式下，老式专有盒模型。
  6. DTD不存在或不正确，会触发混杂模式；有过渡DTD而没有URI？？？也会；DTD不是页面中的第一个元素，IE6也会触发。
  7. css，import速度比link慢

###可视化格式模型

  1. outline不会影响元素的大小和定位。ie7+
  2. 普通文档流中块框垂直margin才会叠加。float，absoulte，inline框的margin都不会叠加。
  3. 普通流中的元素框位置由元素在html中的位置决定
  4. 行内框，垂直padding，垂直margin，垂直边框，对其高度无影响。显式设定其height和weight没有效果。除非修改行高

  5. 在块级元素标签(如p)开头处添加一些文本 ，这些文本形成匿名块级框。

    1
    <div>hello world~~~~~~~<p>hello</p></div>

  6. 同理，如果在行内元素标签(如span)开头加文本，则形成匿名行内框。

    1
    <a href="##">hello world~~~~~~~<span>hello</span></a>

  7. position

  • relative: 元素占据自己原来的位置，移动是相对于自己原来的位置
  • absolute: 不占据空间。普通文档流中的其他元素就好像没看到它一样。移动相对于离它最近的已定位(除了static的)的祖先元素。
  • ie6的bug，相对于relative进行absolute，右边或底部，需要确保relative的祖先元素设定了宽高，否则会相对画布定位。
  • fixed，相对于viewport的绝对定位。ie7+
  1. float,元素不在文档的普通流中。其他没浮动的元素(框好像没看到它，但是框内的文本信息，会环绕着浮动元素)像没看到它一样。浮动停止的位置，是碰到包含框的边缘或是其他浮动元素的边缘。
  2. opacity,不透明度。除了对背景生效，元素中包含的内容也继承了这个属性。

###浏览器，table，form

  1. 浏览器默认对页面缩放而不是文本，也就是说，布局，格式和文字大小都会同比例变化
  2. border-spacing(IE8+),IE7-,可以用cellspacing
  3. fieldset,legend,label(for),input(与img一样是可置换元素，表现和inline-block差不多，display是inline的，却可以 设置宽高)
  4. 对于button标签，ie6,ie7，提交元素本身的内容，其他浏览器提交value的值。如果页面上 有多个按钮 ，ie6会提交所有按钮的内容。