css 基础-

1. 移动端布局解决方案:

基础: https://www.cnblogs.com/woodyblog/p/6094664.html

　　参考: https://github.com/imochen/hotcss

2. BFC

　　参考: https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

3. flex 布局

　　参考: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

　　　　 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

4. 背景相关:

　　background:

　　　　-attachment: 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动

　　　　-origin: 规定了指定背景图片background-image 属性的原点位置的背景相对区域; 相对边框、内边距、内容

　　　　-clip: 设置元素的背景图片 background-image 是否延伸到边框、内边距盒子、内容盒子下面

　　　　-size: 设置背景图片的大小

　　　　-repeat: 定义背景图像的重复方式, 可以沿 x, y 或根本不重复

　　　　-position[-x | -y]: 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的

　　　　-color: 设置元素的背景色

5. 边框相关:

6. 变形 transform:

7. 长度单位: 见: https://developer.mozilla.org/zh-CN/docs/Web/CSS/length#vh

　　　　字体相对长度:

　　　　　　em,

　　　　　　rem,

　　　　视口(viewport)比例的长度:

　　　　　　vh,

　　　　绝对长度单位:

　　　　　　px,

7. 方法:

　　　　calc: 在声明 CSS 属性值时执行一些计算, 如: width: calc(100% - 1em); 注意, + 和 - 运算符的两边必须要有空格字符

　　　　blur: 将高斯模糊应用于输出图片, 如: filter: blur(4px);

[inset | circle | ellipse | polygon]: 定义一个图形, 详见: https://developer.mozilla.org/zh-CN/docs/Web/CSS/basic-shape#circle()

　　　　　　如: background: linear-gradient(to bottom right,#f52,#05f);

　　　　　　　　clip-path: polygon(50% 20%, 90% 80%, 10% 80%);

　　　　　　　 clip-path: ellipse(115px 55px at 50% 40%);

　　　　matrix: 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的

　　　　　　如: transform: matrix(1, 2, -1, 1, 80, 80);

　　　　......

8. @规则:

　　　　@charset: 定义样式表使用的字符集.

　　　　　　示例: @charset "iso-8859-15";

　　　　@import: 告诉 CSS 引擎引入一个外部样式表.

　　　　　　示例: @import url("bluish.css") 　　　　　　　

　　　　　　　　  @import 'custom.css';

　　　　@namespace: 告诉 CSS 引擎必须考虑XML命名空间.

　　　　　　示例:

　　　　　　　　@namespace url(http://www.w3.org/1999/xhtml);
　　　　　　　　@namespace svg url(http://www.w3.org/2000/svg);

　　　　　　　　/* 匹配所有的 SVG <a> 元素 */
　　　　　　　　svg|a {}

　　　　　　　　/* 匹配 XHTML 和 SVG <a> 元素 */
　　　　　　　　*|a {}
　　　　　　详细请见: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@namespace

　　　　@media: 如果满足媒介查询的条件则条件规则组里的规则生效。

　　　　　　示例:

　　　　　　　　@media only screen 
  　　　　　　　　and (min-width: 320px) 
  　　　　　　　　and (max-width: 480px)
  　　　　　　　　and (resolution: 150dpi) {
    　　　　　　　　body { line-height: 1.4; }
　　　　　　　　}
　　　　　　详细请见: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

　　　　@page: 描述打印文档时布局的变化. 没用过具体见文档

　　　　@font-face: 描述将下载的外部的字体.

　　　　　　示例:

　　　　　　　　@font-face {
  　　　　　　　　font-family: "Open Sans";
  　　　　　　　　src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       　　　　　　　　url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
　　　　　　　　}

　　　　　　　　a{ font-family: "Open Sans", sans-serif;}

　　　　　　详细请见: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

　　　　@keyframes: 描述 CSS 动画的中间步骤.

　　　　　　示例:　　　　　　　

　　　　　　　　@keyframes move {
  　　　　　　　　from { margin-top: 50px; }
  　　　　　　　　50%  { margin-top: 150px !important; } /* 忽略 */
  　　　　　　　　to   { margin-top: 100px; }
　　　　　　　　}
　　　　　　　　/**/from 等价于 0%
　　　　　　　　/**/to 等价于 100%

　　　　　　　　p {
  　　　　　　　　animation-duration: 3s;
  　　　　　　　　animation-name: move;
  　　　　　　　　animation-iteration-count: infinite;
  　　　　　　　　animation-direction: alternate;
　　　　　　　　}
　　　　　　详细请见:  https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
　　　　　　　　　　　　https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations

　　　　@supports: 如果满足给定条件则条件规则组里的规则生效

　　　　　　示例:

　　　　　　　　@supports (animation-name: test) {
    　　　　　　　… /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
    　　　　　　　@keyframes { /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
      　　　　　　　　…
    　　　　　　　}
　　　　　　　　}
　　　　　　详细请见: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports

　　　　@document: 如果文档样式表满足给定条件则条件规则组里的规则生效(推延至 CSS Level 4 规范)

......

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference