Sunday, April 19, 2009

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

Tuesday, April 14, 2009

document onmousemove event differences in different browsers

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

Friday, April 10, 2009

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