0.1+0.2!==0.3 in javascript

>>> 0.1 + 0.2 !== 0.3

true

>>> 0.1 + 0.2

0.30000000000000004

javascript compare operations

'' == '0'; // false
0 == ''; // true
0 == '0'; // true
false == 'false'; // false
false == '0'; // true
false == undefined; // false
false == null; // false
null == undefined; // true
' \t\r\n ' == 0; // true

CSS 2.1 Tutorial (Basic Terms and Concepts)

CSS element basic types

• Replaced and nonreplaced
• Inline and block-level
• Replaced element: img/object/input，占位元素，在文档中起占位符作用，内容由元素本身决定(img)，或者元素类型可以替换（如input)。
• Nonreplaced element: 非占位元素，其内容由浏览器渲染得到，并且内容包含于文档中。

Block-level element

• Normal flow: The left-to-right, top-to-bottom rendering of text.
• Root element: html
• Block element seven properties (three width properties can be set auto)
• “background”是指content, padding and border区域的背景
• Margins永远是透明的(transparent)

Box Model

• IE Box Model Issues
• width in IE: border + padding + width
• CSS box model hack

Inline element

• Content area：nonreplaced element(font-size) and Replaced element(vertical seven properties)
• Leading (行间空白): ‘line-height’ 减 ‘font-size’
• (注意：行间空白只对nonreplaced元素起作用)
• Inline box: line-height(nonreplaced) and content area(replaced)
• Line box: 当前行中最高的inline box的顶到最低的inline box的底组成的box
• ‘line-height’, ‘vertical-align’ and ‘font-size’这三个属性会影响当前行的高度
• inline nonreplaced element border: 由’font-size’控制其边框，而不是’line-height’，边框会环绕在content area上
• inline replaced elements能增高line box，但是不会使line-height加高
• 为inline replaced element添加padding/border/margin可以增高inline-box
• inline nonreplaced element的padding, borders, margin不会影响line-height，并且margin-top/margin-bottom设置了是不会生效的,但margin-left /margin-right会生效

display: list-item

• 除inline和block-level元素外，还有一个特殊的元素LI，display: list-item
• list-item: LI此属性的默认值，该值使一个元素生成一个原始块框(principal box)和一个列表框(block box)

About margins

• margin is always transparent
• navigate value margin for css effects
• collapsing margins (边距重合)
• horizontal margins never collapse.
• Vertical margins may collapse between certain boxes.

1. 常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。
2. 在一个浮动框和其它框之间的垂直边距不重合。
3. 绝对和相对定位的框的边距不重合。

Positioning

• static: 默认值。无特殊定位
• relative: 依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置，占据原来的正常文档流中的空间位置
• absolute: 将元素从文档流中拖出，使用 left，right，top，bottom 等属性相对于其最接近的一个具有定位设置的父元素 (position非static元素)进行绝对定位。如果不存在这样的父元素，则依据 body元素
• fixed: 与absolute一样从正常文档流中拖出，区别在于其定位的容器是屏幕窗口(viewpoint)
• ‘top’, ‘right’, ‘bottom’, ‘left’只能针对position非static元素设置
• containing block： 为绝对定位的元素提供定位容器的，位置属性非static的元素

Floats and Clear

• float: 当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略
• clear在布局中与float同时使用的情况较多

CSS specificity value

• specificity值表示方法: 0,0,0,0
• id:0,1,0,0
• class:0,0,1,0
• element:0,0,0,1
• h1 {color: red;} /* specificity = 0,0,0,1 */
• p em {color: purple;} /* specificity = 0,0,0,2 */
• .grape {color: purple;} /* specificity = 0,0,1,0 */
• *.bright {color: yellow;} /* specificity = 0,0,1,0 */
• p.bright em.dark {color: maroon;} /* specificity = 0,0,2,2 */
• #id216 {color: blue;} /* specificity = 0,1,0,0 */
• div#sidebar *[href] {color: silver;} /* specificity = 0,1,1,1 */

Selectors

• * { sRules } 通配选择符
• *.div { text-decoration:none;
• E { sRules } 类型选择符
• a { text-decoration:none; }
• E1 E2 { sRules } 包含选择符 Descendant Selectors
• table td { font-size:14px; }
• E1 > E2 { sRules } 子对象选择符 Selecting Children (IE6 not support)
• div ul>li { font-size:14px; }
• #ID { sRules } ID选择符
• E.className { sRules } 类选择符
• E1 + E2 {sRules} 相邻节点选择符 Selecting Adjacent Sibling Elements
• h1 + p {margin-top: 0;}
• E1 , E2 , E3 { sRules } 分组选择符 grouping selectors
• 将同样的定义应用于多个选择符
• E : Pseudo-Classes { sRules }
• div:first-letter { font-size:14px; }
• a.fly :hover { font-size:14px; color:red; }

属性选择符

• 1. E [ attr ] { sRules }
• 2. E [ attr = value ] { sRules }
• 3. E [ attr ~= value ] { sRules }
• example: class partial value
• 4. E [ attr *= value ] { sRules }
• substring
• 5. E [ attr ^= value ] { sRules }
• 6. E [ attr $= value ] { sRules }
• 7. E [ attr |= value ] { sRules } (explode by ‘-’)
• a[href][title] {font-weight: bold;} /*multiply attributes*/
• *[lang|="en"] {color: white;} /*en or begin with en-*/

About CSS classes

• 如果某个元素具有特殊意义，在文档中只出现一次，则可使用id，同时也有利于js操作此节点。如果有不同的元素都可能用到相同的一个css效果，如div/p/a/span等，则可使用class
• 一个元素的class的值可以是以空格间隔的一系列class名，如：
• <p class=”urgent warning”>这个P元素有二个css class</p>

Position is everything

Reference:
5. Selectors
http://www.w3.org/TR/CSS21/selector.html
8. Box model
http://www.w3.org/TR/CSS21/box.html
9. Visual formatting model
http://www.w3.org/TR/CSS21/visuren.html
10. Visual formatting model details
http://www.w3.org/TR/CSS21/visudet.html

document onmousemove event differences in different browsers

当前文档document中如果有一个iframe时，当mouse滚过当前文档进入到iframe区域中时，不同的浏览器的表现形式有所不同，safari4/opera9.6中仍然能触发mouseover事件，但是在firefox3/ie中则不触发此mouseover事件，因为mouse已经离开了当前文档。

EmulatingFixedPositioning in IE

/* For fixed positioning savvy browsers */
.fixed{
position: fixed;
}

#header{
top: 0;
left: 0;
height: 80px;
}

#footer{
bottom: 0;
left: 0;
height: 30px;
}

body{
padding: 80px 0 30px;
}

/* For IE for Windows \*/
* html{
width: 100%;
height: 100%;
overflow: hidden;
}

* html body{
width: 100%;
height: 100%;
overflow: auto;
}

* html .fixed{
position: absolute;
}
/* */

Reference: http://css-discuss.incutio.com/?page=EmulatingFixedPositioning