Cascading Style Sheets

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

• CSS flexbox
• MDN: css flexible box layout
• Flex 布局教程-阮一峰

• http://cssreference.io/: 超好用，直接图像示例展示css效果。
• css icon: 使用 CSS 绘制常用图标。

• normalize.css

• postcss.org
• https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/

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

• sass-lang.com
• 下划线开头的_name.scss文件意味着只用来 import, SCSS不对它编译成CSS; import时可省略下划线。

• div 水平居中:margin:0 auto
  • Fixed 的元素居中则要这样设置:

    width:600px; height:50px; position:fixed; margin:auto; top:0; left:0; right:0; 

  • Fixed 元素也可以这样:

    position:fixed; top:50%; left: 50%; 
    width:600px; height:50px; margin-left: -300px; margin-top: -25px; 

• 文字垂直居中简单做法:在父级块元素让 height 与 line-height 相同
• 层级: z-index 对static不起作用；更具体的看我的 ppt.关键词 stacking context.
• 子元素溢出隐藏，在父元素设置: 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
• cursor可直接指定鼠标在范围内的样式
• div 子元素有 absolute 元素，会影响div的默认宽度，可直接指定 div 的宽度为 100%, 或者 width: 80%; margin-left: auto; marin-right: auto;
• 让链接标签不跳转可以这样设置：

  <a href="javascript: void(0);"></a>

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

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

详见MDN

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).