Cascading Style Sheets

• Cascading_Style_Sheets
• 中文wiki
• W3C CSS 2.1
• W3C CSS 3 current work

• lesscss.org
• http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

• div 水平居中:margin:0 auto
• 文字垂直居中简单做法:在父级块元素让 height 与 line-height 相同
• 层级: z-index 对static不起作用
• 溢出: overflow:hidden;
• max-height与overflow:auto 配合可在元素内容过高时才出现滚动条
• 子块元素的margin-top影响了父级元素的margin-top, 可以在父级元素使用overflow:hidden来避免.
• float 的元素影响兄弟 float 元素与兄弟 inline 元素的定位, 但不影响非 float 的兄弟块级元素的定位; float 最好需要指定宽度;All about floats
• float 会出现在之前的块级元素之下? clear 的元素会被强制放在 float 元素之下?
• 单词内换行: word-break: break-all
• jquery disable form:

   $form.find(':input:not(:disabled)').prop('disabled',true);//disable all
   $form.find(':input:disabled').prop('disabled', false);//enable all

• 目前至少ios7 ios8 android4 的css transform 还需要用 -webkit-transform

• W3C CSS 3 selector
• :before,:after: MDN doc
• Pseudo-elements, :first-child, :last-child, :only-child 这几个太好用了.

• 响应式css: 适应不同分辨率终端.

Copy from W3C CSS 3 selector.

A selector's specificity is calculated as follows:

• count the number of ID selectors in the selector (= a)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
• count the number of type selectors and pseudo-elements in the selector (= c)
• ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Examples:

 
*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

W3C positioning-scheme CSS 2.1 defines three positioning schemes:

• Normal flow: Inline items are laid out in the same way as the letters in words in text, one after the other across the available space until there is no more room, then starting a new line below. Block items stack vertically, like paragraphs and like the items in a bulleted list. Normal flow also includes relative positioning of block or inline items, and run-in boxes.
• Floats: A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item.
• Absolute positioning: An absolutely positioned item has no place in, and no effect on, the normal flow of other items. It occupies its assigned position in its container independently of other items.w3c positioning-scheme

There are four possible values of the position property. If an item is positioned in any way other than static, then the further properties top, bottom, left, and right are used to specify offsets and positions.

• Static: The default value places the item in the normal flow
• Relative: The item is placed in the normal flow, and then shifted or offset from that position. Subsequent flow items are laid out as if the item had not been moved.
• Absolute: Specifies absolute positioning. The element is positioned in relation to its nearest non-static ancestor.
• Fixed: The item is absolutely positioned in a fixed position on the screen even as the rest of the document is scrolled.

The float property may have one of three values. Absolutely positioned or fixed items cannot be floated. Other elements normally flow around floated items, unless they are prevented from doing so by their clear property.

• left: The item floats to the left of the line that it would have appeared in; other items may flow around its right side.
• right: The item floats to the right of the line that it would have appeared in; other items may flow around its left side.
• clear: Forces the element to appear underneath ('clear') floated elements to the left (clear:left), right (clear:right) or both sides (clear:both).