css捋一捋

   最近突然发现好像自己不会真正的写css（I‘m 菜青猴一枚），一直以来就是很肤浅的使用而已，然后想捋一捋，找到网上大牛发布的视频提到了一本叫CSS.Secrets的宝典（真是好书，pdf下载地址：http://download.youkuaiyun.com/detail/lgvagent/9158813，csdn下载还是比较靠谱的~），然后就开始啃了，发现有例子图文并茂，以发现、解决问题的思路讲解，还有未来趋势的介绍，不愧为宝典，瞬间意识到，基础是想提高和迅速进阶的牢固保障，如果地基不稳，真坑~，于是觉得古人还是机智啊，“温故而知新“”果然是真理。。。然后整了一段自己看的明白的笔记，待续。。。

1.font-size: 百分比 和 em相对于结构父级

                    rem是相对html根字体

2.line-height:相对于字体大小，可以是倍数值

3.可以继承（类似于prototype，一层一层向上找）的属性,color（currentColor 相当于color：inherit）,background,font-size,

4.关于响应式注意的方面：

    1）用百分比代替固定的宽度，还有几个方便布局的值vh vw vmin vmax

           1 vh：单位是高度的1/100

           1vw ：单位是宽度的1/100

           1vmin：是高度或者宽度的最小的那个值的1/100

           1vmax：是高度或者宽度的最大的那个值的1/100

           ｃｈ：针对font-family的不同大小不一致

            e x：同上 是英文字符的x-height，中间高度

    2）用max-width代替width，可以使小于该值的值适配，不用media query

    3）要给img object video iframe设定一个max-width：100%

    4）大图作为背景撑满屏幕用background-size:cover;

    5）用display：inline-block或者弹性盒子模型来处理几列和行

    6）使用多列文本时，指定列的宽度，而不是列数，使您只在小的分辨率下得到一列。

5.预处理器less sass等的使用

6.SourceMaps恢复压缩代码，chrome 有format，FF有source Edit

7.cal（） 计算函数，color（）函数等css函数，不过一般不用，js计算

8.background不包含在border下面使用background-clip:padding-box;

9.多边框，可以使用box-shadow:0 0 0 10px green;的第四个参数表示多一圈边框。box-shadow也可以多个使用.

10.background:url() no-repeat right bottom #000;background-position:right 10px bottom 20px;

background-position:决定背景图片在那个角度放置

11.线性渐变：（repeating-）linear-gradient;径向渐变：（repeating-）radial-grandient，可以变换多种，角度，方向等，配合background-image可以实现多个网格，圆点等效果，ｂａｃｋｇｒｏｕｎｄ－ｓｉｚｅ；

12.background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"><rect x="50" width="50" height="50" /><rect y="50" width="50" height="50" /></svg>');ｓｖｇ图片画出来，还可实现随机的背景，通过background-size：多机组值，

13.关于属性值简写和整写，

            整写：一般的四个值顺序是上右下左。 

            简写：如果三个值，第四个和第二个一样，如果两个值，第三个和第一个一样，第四个和第二个一样。

14.keyframes 需要加前缀-webkit等

16.box-shadow:原理（x，y，模糊半径，模糊延展半径,颜色）可以有多个值，类似多背景图片

      1）创建一个和元素盒子大小一致的块儿，

       2）如果有位移偏移量就按照方向（xy）大小（正负）偏移，

        3）然后类似高斯模糊的方式2*模糊半径大小模糊

        4）如果有模糊延展半径就加上这个值到第三步（正负都有）

        5）然后后置到元素底层显示

17.background-image:多图的顺序是正序，先写先显示在前面

18.filter:blur()/ grayscale()/drapshadow()--类似box-shadow:三个参数+颜色的设置，没有延展半径