注意, css 的诞生最早是为了适应富文本的流式布局, 至今遗留了很多流式风格的布局性质.使用时详查文档,不可类比桌面UI布局而想当然
坑： border-radius 设置为纯数字时，不被 chrome 接受，而 vscode, scss 等开发工具链也没有对此进行报错提示。
====== Cascading Style Sheets ======
* [[wp>Cascading_Style_Sheets]]
* [[http://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8| 中文wiki]]
* [[http://www.w3.org/TR/CSS21/|W3C CSS 2.1]]
* [[http://www.w3.org/Style/CSS/current-work.en.html|W3C CSS 3 current work]]
===== Flex =====
* [[https://www.w3.org/TR/css-flexbox-1/|CSS flexbox]]
* [[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout|MDN: css flexible box layout]]
* [[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html|Flex 布局教程-阮一峰]]
===== Tools =====
* [[http://cssreference.io/]]: 超好用，直接图像示例展示css效果。
* [[http://cssicon.space/|css icon]]: 使用 CSS 绘制常用图标。
===== Libs =====
* [[http://necolas.github.io/normalize.css/|normalize.css]]
==== PostCSS ====
* [[https://postcss.org/|postcss.org]]
* [[https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/]]
==== LESS ====
* [[http://lesscss.org|lesscss.org]]
* [[http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/|]]
==== SCSS ====
* [[https://sass-lang.com/|sass-lang.com]]
* 下划线开头的''_name.scss''文件意味着只用来 import, SCSS不对它编译成CSS; import时可省略下划线。
===== Tips =====
* 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''不起作用；更具体的[[http://blog.joak.org/ppt/csszindex.html|看我的 ppt]].关键词 stacking context.
* 子元素溢出隐藏，在父元素设置: ''overflow:hidden'';
* ''max-height''与''overflow:auto'' 配合可在元素内容过高时才出现滚动条
* 子块元素的''margin-top''影响了父级元素的''margin-top'', 可以在父级元素使用''overflow:hidden''来避免.
* float 的元素影响兄弟 float 元素与兄弟 inline 元素的定位, 但不影响非 float 的兄弟块级元素的定位; float 最好需要指定宽度;[[https://css-tricks.com/all-about-floats/|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=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 */
===== Positioning =====
[[http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme|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.[[http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme|w3c positioning-scheme]]
==== Position: top, bottom, left, and right ====
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.
==== Float and clear ====
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'').
===== tips =====
CSS选择器优先级：详见[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity|MDN]]
* 浏览器用户设置 > 浏览器内置 > 网页行内style > 非行内style
* css选择器的优先，分三组计算次数1.ID, 2.类、伪类、属性, 3.标签， 三组数量按奥运会金银铜奖牌板的方式排序，来决定优先级。
元素布局上分位**块级元素**(block)与**行内元素**(inline)， 行内元素排列行为类似文本，先横排，没空间才换行。 块级元素直接换行(垂直排列)，比如''div'' ''p'' 等。而像''span'' ''a'' 等则为行内元素。 这两者在定位、大小设置上行为有差异， 可以使用''display''来改变元素类型。
在布局上，行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，**垂直内边距、边框和外边距不影响行内框的高度**。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个行框的高度——但还是决定不了行内框的高度！
浏览器含有默认的CSS设置，比如ul标签含有默认的上下margin, 去除各个浏览器的默认设置，可以使用 http://cssreset.com, 把提供的css代码拷贝来就行，但是一些默认样式可能就需要自己来设置了。